How to Begin a Project and How to Present Your Process
Starting a new project can be overwhelming, this checklist introduces a few strategies on how to begin gathering inspiration, references and defining a visual language that is both specific to you and to your project.
While this workflow provides an entry point, you should find a routine of storing and observing images that is meaningful to you, and continue to work on it even when there isn’t a deadline. Additionally, this is just one way of working. Decide what works best for you.
Figure Out Your Intention
It’s easy to be overwhelmed if you’re just consuming without thinking. Before you begin digging, have an idea of what you’re after.
For example: perhaps your project is based on optical illusions so you begin researching art movements that use visual patterns such as op art. Your ideas should feel specific to your project, and should not be random.
If your ideas have no immediate visual cues, that’s OK also – begin thinking about what the project needs to function and iterate on that aspect of it first. Or, think about the content itself. For example, if you’re using tweets from a specific person, your visual research could be exploring both that person and twitter.
If you’re totally stuck, you could begin collecting ANYTHING that interests you and taking a look at it to see if there’s anything common in the images you have, and if that commonality is also present in the content of your project.
Concepts
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 for a presentation:
Concept Introduction
Give each 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. This can be done by hand, in the browser, or using a third party design tool.
Experiment
You have to begin with text for your maxims project, but after that you can do what you want with it. How can you add a second layer of meaning, or add another vantage point to your content by reproducing it in a different way? What’s at the heart of your project? What are you trying to highlight about your source text? You can consider writing the maxims out by hand and scanning them, or using photographs of the text out in the world, or maybe even republishing the text in a new way.
Try sketching out a few different ideas by hand or in code and then creating screenshots of it to put into your are.na channel.
Wire Frames
A wireframe is a stripped down layout design that focuses on content, structure and hierarchy. Design and photography are omitted.
Here is an example of a mobile wireframe. In the prototype you’ll see that all the necessary pages to demonstrate how something works are fleshed out, the design hasn’t been developed, but it’s consistent from page to page and there’s a system to help inform the viewer. For example: there’s only a couple colors to indicate when you can click on something, the way photos are treated is consistent, and overall everything feels part of the same story.
This was created using the digital design tool Sketch which is what I use to do any kind of digital design. In this class, we’re going to focus more on developing a process and experimenting with code, but I want you to be aware that this tool exists.(Another popular one, that’s free, is figma, and also Invision)
For the wireframe portion of our homework and for other projects in this class, you can do it either by hand, in illustrator, or even in HTML. That’s up to you. I want to see that you’ve considered how a user might go through your maxims, how are they seen: all one page or on several different pages, what the navigation is like – how can someone go back to the homepage from one of the interior pages, and how are the maxims connected, and a general hierarchy of the page.
Figure Out Your Intention
Concepts
Concept Introduction
Visual References
Experiment
Wire Frames
A wireframe is a stripped down layout design that focuses on content, structure and hierarchy. Design and photography are omitted.