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.
Image first: No idea is unique. When you come up with an project topic that is interesting for you, take a step back and do some research. For example, if your project is based on optical illusions, begin researching art movements that use visual patterns such as op art. Or figure out the origins of optical illusions. Where does this fit in the larger cultural context? How is that different than an art context?
Content first: If your ideas have no immediate visual cues, begin thinking about various project applications. For example, if you’re using tweets from a specific person, you can begin researching both that person and twitter. You can then step back and look into social networks, text-based art, etc.
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. While it’s good to look at other design work, I’d avoid using other designers' work as mood boards. 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.
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.
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. 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. Other popular and free prototyping tools are Figma and 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.