🎨 Web Design basics
Web design is the part of web development that comes before any code is written, and one can argue that it is as important as the implementation itself. We'll see the basics of web design, some tools and learn a bit about the patterns used in designing websites.
Why do we need a design ?
Website designs are like the blueprints of an architect. Sure, you can make a house without blueprints, but will it look as good, or will it be as well though-out ? The same is true for web design.
Another thing to consider is that it is easier to make changes in the design, before everything is implemented. Interface changes that might seem simple to make at first glance might actually imply rethinking of critical parts of the logic and structure of the code, so it's very important that we make a well thought-out plan first and foremost.
Tools of the trade
There is no formal standard on what a web design is - it can be as simple as a scribble on the back of a napkin, or as complex as an animated, interactive prototype that looks real. We'll go through some of the well established tools in use by designers around the world, but this is by no means a comprehensive list.
✨ Gravit Designer
Gravit Designer is a free, open source and cross-platform vector-based design application. We'll be using this throughout the course, not only because it's free, but also because it has a simpler interface free of extraneous features that aren't really needed in web design.
Adobe Illustrator is a software that you probably heard of before. It's the Photoshop of vector graphics, being a fully-fledged vector design application, having tools for web design as well as graphic, icon and asset design.
A design is usually a series of static images. While this might be enough for most cases, there are times where an interactive prototype might be useful. There are many tools that can do this, but we'll mention just one, that recently also became free.
Adobe XD (from experience design) is Adobe's offering for generating interactive prototypes. It supports basic vector graphic and editing, but its main focus is in creating interactive prototypes by linking design screens based on interactions. It also allows easy sharing of generated prototypes via an online portal.
A note on bitmap versus vector graphics
You might have noticed that Photoshop or GIMP are nowhere to be seen in the list above. This is because of the types of graphics that they use. In short:
- Photoshop and similar software are bitmap graphics editors
- Illustrator and similar software are vector graphics editors
Image from Wikipedia
This is no small difference - vector graphics are fundamentally different from bitmap graphics, and they are better optimized for scaling on different sizes. Try opening this SVG image in your browser and zoom in. Now try the same with this bitmap image.
You can read more about the difference between vector and bitmap graphichs in this article from Lifewire.
User interface patterns are solutions for common design problems, such as - how do I get input from an user ? These patterns are established by years of grahical design software, and it's a good thing to be aware of them and try to use them in your designs.
The key thing to keep in mind when talking about UI patterns is - never surprise, always delight. That is, don't reinvent standard controls. For example, if the user of your website wants to search for something, he or she will most probably look for an icon similar to this one: 🔍 and will most likely expect for a text input field either to open up when clicking the icon, or to be beside the icon.
If you change the icon too much, or use another icon altogether, you run into the risk of confusing the user. This is why sites such as ui-patterns.com and nngroup.com exist that are focused on discovering and teaching designers on what patterns to use.
Similar to UI patterns, you can also find information on dark patterns. These are user interfaces meant to fool the user into doing things that they might not have wanted to do. A very often encountered dark pattern is the install wizard that automatically checks the install box for a browser toolbar or some other extra software that the user might not want.
An example of a dark pattern in a setup program.