Table of Contents
About a month ago, a great friend of mine asked me this interesting question, what do I need to know to design a website? Since his job was back-end with front-end here and there, the answer was short, simple and easy to follow in just a few steps. However, it made me thing about what it would take for someone without any knowledge either in front-end development nor design. Today, in this post, I will answer this broader question and hopefully draw more people to this amazing industry.
Web design is complex
It’s fair to say that web design is a very complex field. I don’t want to scare you, but you should know that so you can prepare on what will come. If you will look at web design from the broader view, most of the time it is split to two parts. People talk either about front-end or back-end development. You can also find some people refer to themselves as front-end designers. Don’t expect the same with back-end. I should also mention the newest and popular term full-stack developer. As you can guess, it transcendent front-end and back-end.
After those two (or three) “official” terms, it will get more complicated. Let’s focus on front-end for the rest of this post and refer to it as web design. So, let’s dissect the whole field into individual skills you will need to learn and master. All the important skills, I think, can be summarized to four groups – layout, typography, color theory and psychology. It might look simple, but every group contains many smaller elements. What’s more, these groups also tend to overlap each other here and there.
For example, taking just layout and its theory, we would get Z-Layout, F-Layout and Guttenber diagram. Next, you can dive into golden ratio and golden section, rule of thirds and finally get to grid systems and what the fold is. And, that is just the beginning. To taste a bit of typography, you can take a look of the anatomy of type to get quick insight of what you are heading into. For those of you with enough courage, you can then continue to psychology of color theory for designers or learn about Gestalt principles and much more.
“After a while, you might feel like Alice in Wonderland.”
As you can see, the field of web design is broad and include many elements and tons of theory. Again, I don’t want to discourage, rather the opposite, but you should have a clear idea of the whole thing. As with other things in life, the more you will learn the more you will find there is to learn. After a while, you will feel like Alice in Wonderland. Just, imagine reading some article on Wikipedia and following the links in it. It is never ending cycle.
Exploring the roots of web design
On the other hand, for those of you wanting to be able to design the website, you should narrow your focus on graphic design and its history. Learning about the history you will understand what role the time and historical background played in shaping the design and its theory. Also, having a solid foundation of the history will give you support for additional theory of design and then web design.
Web, design and … Code
It is often mentioned whether and individual working in web design should be able to design and also code. You can read my opinion here. In a short, I think this decision whether to have both of these skills is highly individual. It seems a bit like, should a sushi chef know how to fish? It’s similar thing. Do you like to code? Great, learn it, practice and include it into your skill set of a web designer. If not, focus on the design part and let the rest take care of itself. There will always be work for both sides.
“Should a sushi chef know how to fish?”
Tools of your trade
Let’s follow the previous topic by discussing the tools you as a web designer can use. If you will ask group of people, what is the best tool, the amount of answers can be overwhelming. Not only they [answers] will differentiate in what kind of graphic editor and IDE you should use, some people will also suggest how your design process should look like. One will advise you to skip Photoshop and other graphic editors and go right into the coding phase after creating the wireframes.
“You should never skip wireframing.”
This decision about how you should work is up to you. You should choose what suits you the best and don’t give a fuck about what others will say. If you view creating the design in Photoshop first, and then go coding it as more interesting, give it a try. If not, don’t wait and design in the browser. However, no matter what way you will pick, you should never skip wireframing. Paper or digital, it will help you see the bigger picture and plan the layout.
The last thing … Choose your tools of trade wisely because you will work with them pretty long and on a daily basis. Also, don’t forget that every tool will require some time and effort invested into learning how to work with it. So, remember to measure twice and cut once.
Inspiration … Nothing is original
One of the things you will probably experience is the feeling of not knowing what to do. It is that situation when you took on new project and don’t know where to start. Your mind is completely empty, no inspiration or idea on the horizon. I have two good news for you. First, this will happen to anyone working not just in a web design, but in any creative field. Second, nothing in this world is original. The second quote is something I stole from writer and artist Austin Kleon.
“Nothing in this world is original.”
Like it or not, these two things are fundamental truths you should know and get used to it. Everything around you is either iteration or combination of two or more things. I understand this need of coming up with something truly original, seed of your mind. If you will try to come up with something original, you will probably die trying. All that said, you should never wait untill the muse will come and give you inspiration. This is not how it works.
“Start the work and inspiration will find you.”
You can find many tips to find inspiration. Some of them are browsing through works of other artist on sites like Behance or Dribbble. Another tips can include reading interesting book, watching some show or document, a long walk, going to the gym, gardening, listening to music, drawing and sketching, playing on instrument or just staring on the wall. However, what I found that works the best is to start the work and inspiration will find you.
The future of web design?
The last thing to discuss, before closing this post, is whether it is a good idea to start with web design. With the rise of tools such as Macaw, Pinegrow Web Designer or Grid.io will there remain any work for web designers? Should we be afraid of these tools? I don’t think so. Not that these tools are bad or low quality, rather the opposite. I’m tinkering with the latest version of Macaw and it looks great. First, if you are really good in what you do, you will always find some work.
Second, how many people do you think will want to spend time learning to work with these tools to create their own website, not to mention understanding the basic of design? These tools are created primarily for people working in web design, not the average web user. They are here to help you make your work easier and faster. You should stop worrying and complaining about it and be excited about it instead. The future looks, I think, very promising.
The whole field of web design can be summarized into three words … It is complex. There is a lot to learn and more will come. Before you decide whether to start with web design, you should understand that technology is one of the fastest field you can find. There is something happening every day and the rate of change is only increasing. On the other hand, it was never easier to get started in web design. You have all the knowledge at your fingertips.
Will you pick the gauntlet and accept the challenge?
Do you have any questions, recommendations, thoughts, advice or tip you would like to share with other readers of this blog, and me? Please share it in a comment. You can also send me a mail. I would love to hear from you.
Did you like this article? Please subscribe.