Table of Contents
Every designer, no matter what industry is he working in, has a certain system or process to help him get from blank paper to finished design. This approach might seem counter-intuitive to many people in the first moment. Isn’t bounding yourself to and strictly following any rigid system damaging your creativity? Fortunately, the exact opposite is true. Using system or process will remove unnecessary stress, doubts and fear of unknown. In this post I will share with you the process I use in my daily work.
Idea generating process
After being hired by client, your first task is to understand your client’s needs, ideas and wants. Without knowing this information and understanding them you are walking in a fog. When you put together all these data, the next step is to come up with various ideas to get the job done with happy client on the end. In this part of the process there is no number or limit to how many ideas you should create. In short, the more ideas you will have the better.
Think about the industry your client is in. Think about his customers, their age and culture. Think about their needs and wants in connection to your client. What mood should the design evoke. In web and print design, this includes the color palette and typography.
When it comes to tools, it is important to understand what suits you the best. Some people like to write down lists, some use mind maps (my preferred choice) or you can use your phone to dictate your thoughts and listen to them later. Pick any choice, whether analog or digital, you feel the most comfortable with and is more natural to you.
Research
The “research” phase is all about inspiration and calling the muses to arms. There is frequently shared illusion that you have to create something completely new from nothing. Please, don’t believe this crap. Every great designer needs to look for inspiration somewhere. It can be architecture, other samples of web design, sculptures, literature, fashion, food, magazines, movies, nature, games, etc. The resources are in abundance, just find what sparks the fire of creativity in you.
For web designers, good way of doing research is to take a look at other works in web design. Use websites like Dribbble, Behance and awwwards to your advantage. Don’t limit your view only to the industry of your client. Cross the borders and explore various types of web designs. Collect the pieces you like or just parts you find interesting (navigation, galleries, blog posts, footers, etc.). Think about it like creating Frankenstein’s monster. Individual pieces will in the end create something new.
Wireframes
You’ve done your research, so what’s the next step in the process? Now you are going to put together what you’ve collected with your ideas and create first wireframes or drafts. Wireframes shouldn’t be too complicated. Their purpose is to lay down only the basic structure. Depending on the amount of details you will include, you can create either low or high fidelity wireframes.
The picture shows sample of low fidelity wireframe. It displays only the fundamental parts of website and distribution of content along with proportions. It can also contain boxes as a placeholders for images and text. High fidelity wireframes, on the other hand, will be more detailed. Instead of random boxes you will use real images and either random text or text that will be used on final website. Some high fidelity wireframes can look like a regular website without any styling.
There is no rule saying how you should approach the wireframing part of the process, but it is better to start with low fidelity wireframes and then move to high fidelity. This procedure will lower the stress and number of potential roadblock on your way because you will allow yourself to focus on the bigger picture first and only then think about all the details. You will also be less likely to get stuck at some point – word to use or what picture will be the best.
Mockups
The next step, and for some web designers also the last, is to turn your wireframes into mockups, i.e. create a layout of the website. One benefit of wireframes I forgot to mention is how easy it is to move to the “mockup” phase of the process. If you did “wireframe” phase right, you can now just open the result in graphic editor of your choice and simply start replacing the placeholders with real content.
You don’t have to think about what will be placed where. This puzzle is already solved. Your job now is to bring it to life by choosing the right colors, typeface(s), images and putting together the final layout. Remember to talk frequently with your client during this and wireframe phase and to send him the files for regular revisions. The biggest mistake you can do is to waste the precious time on something your client will not like. Only through meetings, chats and revisions you can avoid this.
Code
Certain part of web designers or front-end developers does not stop with creating a mockups. They also make the next necessary step and code it into live website. Personally, I like to make this step too. It seems to me like a more holistic process – from blank page to physical product (or digital). Another reason to include this step is that you have one more chance to polish and improve the design before delivering complete project to your client.
However, I don’t want to tell you my opinions about designers and coding (I did it here). It’s your own choice and it requires devoting some time to learning new markup and programming languages, which is good for your brain. It can also expand your business and bring your opportunities to support yourself and make a living, i.e. designers learn to code and developers learn to design so the game is balanced.
Summary
Establishing a process or system of specific steps will lower the burden you have to carry and free your mind’s resources to unleash your creativity. What’s more, if your process is flexible enough you can use it in other areas of your life and work. For example, let’s think about writing a posts. Simply switch wireframes with drafts or pieces of text, mockups with final version of your post (revised) and code with publishing it.
See? It is easier than it might look like. Just break the task down to smaller steps and focus on process. What are your thoughts on following some system in design? What is your preferred procedure or approach to work?
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
