Most professional environments elect to create a design presentation with research, a few concepts, and executions. In my experience, this is a fantastic way to explore different ideas, and also to make sure that your ideas are coherent. It also allows the client to react to different pieces, and to help facilitate a conversation around your work.
While this is part of a professional work flow, having a clearly documented process allows you to have more clarity about your work, too, and is helpful for getting feedback in the classroom and beyond!
Website Project Life Cycle
Concepts(Focusing on this today)
Content, Site Architecture, and Design
Design Refinements
Programming & staging environment
Launch
(Documenting work, Sharing assets)
Look at Nika’s Examples
Studs
Parsons Festival
Evewear
Concept
While we’re not creating a commercial product, the way a strategy is developed for brands is really helpful in breaking your project into digestible chunks and giving reasons to your design decisions. To show what I mean, let’s take a look at a few brands that have a strong and consistent point of view, and see how if we can figure out how they got there.
It’s a good idea to have several different directions(visual and conceptual) for any kind of project. This helps you try different things out and also helps you land on a less expected result. I’d suggest having lots of ideas and then narrowing it down to 3 which feel distinct from one another. If you’re not sure where to begin, you can follow the below outline:
Concept Introduction
Give your concept a name and introduce it, maybe with a couple sentences.
Visual References
Collect a few visual ideas for the concept. The type of imagery can be from a variety of sources(film, photography, books, etc.) but should ideally inform the concept and not so much the execution. Better designers work with ideas. While it’s good to look at other design work, I’d avoid using other designer’s work in a mood board setting. This is because this is another artist’s execution of something, and you want this visual storytelling to be your own!
You can also include play screens. What I mean by that is, you can include small detail exploration(perhaps how type might work with an image, or maybe an exploration of a headline, body copy, and a button) that aren’t part of the actual website design, but can still inform the viewer on some of your systematic thinking.
Design Work
Present your work. InVision makes it easy to look at an image as though it were actually online. Remember to make your page as long as you need it to be/
Making Your Presentation(Read this whole section in class/for homework, before you start working)
Design your entire presentation in the Figma Desktop App.
Your presentation slides should be 1280 x 720 px(the homepage sketch can be taller than this).
I’d suggest using a 12, 14, or 16 column grid rather than the 10 column grid she uses. 12 column grids are the most common set up in websites. More details about grids in figma.
I tend to use a 14 column grid
Please watch this video and review the notes below before you begin:
Website Project Life Cycle
Look at Nika’s Examples
Concept
Design
Concept Introduction
Visual References
Design Work
Making Your Presentation (Read this whole section in class/for homework, before you start working)
Please watch this video and review the notes below before you begin:
Notes: Digital Design Tools