Beginner’s Guide to Web Design – Tips & Tricks to Get Started
In this article, I will write about some fundamental principles that underpin the design which you see every day online on different and various websites. You can use this guide either if you are an aspiring web designer, a developer or a client just trying to understand what a good design is.
There are fundamental techniques and principles that anyone could adopt to produce better designs. Techniques like layout, typography, imagery, styling, branding, and calls to action and so on are used to create awesome designs.
There are extra secrets about web design that you can use on your website or on your client’s website to produce great design.
Creating Beautiful Layouts
Design starts with your content, but the first things you need to do with that content is to structure it in a logical way so visitors can find what they are looking for very easy. This is done through layout and composition.
A good layout is represented by your grid. The grid is the framework into which your framework works and also provides your structure for all your content. If you ever read a newspaper or browse the magazine you have seen the grid in action. The all what defines the columns and spaces on the page.
Images cross multiple columns while text flows. But whatever the case, page elements are constrained by this underlying grid system. Between each column, there are normally gaps that separate columns and this prevents text from putting up against each other and sentence running together. These gaps are known as margin. Without them, reading content in columns will be extremely difficult. There is a general rule: the wider your margins the easier your text is going to be read.
Creating a grid design it is not as hard as you think. You can create a CSS grid that yourself or you can use pre-designed responsive grids such as responsive.gs, ResponsiveGridSystem, Skeleton, BootStrap or other that suits you the best. These grids are free to use.
Usually, websites have two or three columns. One in right which contains some widgets, one in the center page which contains the content and sometimes itself has multiple columns depending on the type of content and a left column which contains other widgets. A complicated system to create is the 12 column one used sometimes for interactive websites such as online stores or web applications.
So there might be a complex underlying grid system but it is worth because ii gives a structure and an order that will improve the user experience. Also, it helps you to design because you have a structure where you can place objects together with a lot of decision.
Unfortunately creating a grid for a website is not so easy for a print where you know the specific constraints such as dimensions. For the web, that is not the case. Web pages can be visited from widescreen monitors to smartphones and so on. Add to that the fact your browser may be open for a full screen or a small window. So you never know how large your grid should be. It needs to adapt to each dimension and this is called responsive design.
With the huge growth in access to the web via mobile devices, you have to have a really good reasons for your site not being responsive. But creating a responsive website has some challenges. It means that your grid system needs to flex to support different screen size so your column becomes too narrow when you start shrinking it down so that you need to change the number of columns you display.
For example a website on a mobile device it probably has a single column, while for a widescreen will have multiple columns side by side. This is difficult when graphic software such as Illustrator or Photoshop insist on setting the limits. That is why many professional web designers are either designing directly in the browser or they are using a new generation of tools such as Macaw.
You can check Macaw to get started with a responsive web design. It is hard to get used to creating responsive web design especially when involves the relationship between grids. So a good rule is to start designing for the smallest screen size and working up.
Do not begin by designing the desktop version of your website because you are going to struggle to put in on a mobile device. To help you understand exactly how responsive design works you should look at a responsive website and see how it adapts as you scale it.
There are online tools that let you see how your website look on different screens and devices. For a tablet version, the layout needs to adjust while the elements need to reposition themselves. For mobile versions, they need to reposition even more the layout adjusting also.
You need to think in terms of break points, content, and grid system when you are designing the layout. The grid systems need to update dynamically and it should be designed around the content you try to display not around mobile devices.
A good grid system will help you to bring structure to your site but will not necessary help your users identify what they should focus on. For that, you need a visual hierarchy. It essentially shows visitors what items are important and what not so much. This is important in web design for three reasons:
- Users are incredibly impatient: They can instantly find what they want and then they leave. That is why you need to be sure that the important element is focused.
- We all suffer from something called choice paralysis: For example, if you are in a supermarket and you see something nice that you like you maybe be overwhelmed by the choice you have and maybe you give up, but if the product is on special offer or put on a separate display then you are much more likely to buy it. Now the same is true for a website. If you present a user too many options it can be overwhelmed and to leave. So you need a hierarchy to make the users focus what is most relevant to them.
- You need to guide the users to the options you want them to choose: For example if you have a charity website you will want to focus on donations. If you sell software you want to make them focus on downloading. If you offer services you want them to focus your contact form.
Hopefully, now you understand that you need to design and build your website around a strong grid system and a strong visual hierarchy and also you should not forget about the responsive design. If you are looking for hosting service for your future website, I recommend reading our web hosting reviews section, to find a reliable and affordable company.
In the first part, I wrote about basic web design elements such as layout and grid. In the second part, I will write about the use of imagery and style on your website. So you should know how to select an image, where you can find a good quality image, also how to edit an image.
Using Relevant and Informative Images
One of the most common mistakes made by people is to think to imagery as something to add interest to a page. Imagery should answer a user question because that wants the user. As a result, imagery should be used if it supports the content in some way.
Imagery should be used to communicate a message and explain a difficult concept. For example in a template for a restaurant website you need to show food. These images answer to a lot of questions for a user such as what food the restaurant offers, the quality of the food, what type of food and so on. All that without reading a single line of text.
But the imagery from the restaurant template makes you start to salivate, it look delicious. So imagery should create an emotional reaction in order to sell your products and services. But be careful with this approach, creating an emotional response may be a dangerous game because it can make people feel manipulated and that is never a good thing. Stick to imagery that truly represents what you are selling. Sell a well-presented reality, but not an impossible fantasy.
Imagery that works well in print does not always work well online. When you view a printed photograph you view between 300 and 600 dots per inch so the image is very sharp. Unfortunately, the majority screen is running around 72 dots per inch so this creates a problem with high images which start to break up and look pixelated. Add to this the compression of images which make them download fast and this means that complex images just do not work very well on the web.
You need to keep image size small because you want your web site’s element to download quickly so save your image in a JPG format on the lowest quality possible without destroying the image. Also, resize your image to the correct size. Also, you can use an online compressor such as compressor.io or TinyPng to save the files as efficiently as possible.
You need to look at an image that is web friendly, creates an emotional response and communicates your message.
You cannot simply search for images in Google. Most images are copyright protected so using them is going to get you and your client in multiple troubles. You can create your own photographs or create in Adobe Photoshop your own images.
If you have a budget, you can always use a stock photography. Fortunately, there are many people out that which released their photographs under public domain license and you can use them for free. You can use sites such as Pixabay to search after imagery.
If you want to take your imagery to the next level consider creating a consistent theme across your imagery. You could apply a color overlay or using a filter into your photographs so you can either create a black and white image or use another filter. Just simply cropping a photograph in an interesting way can make the imagery very nice.
Please take care about, it is easy to go too far to add to stronger filter or too much color overlay. You should try out different approaches and show them to another designer to receive some honest feedback.
Choosing the right style, fonts, texture, and icons
All these elements have a big impact on design and the feel of the design. It also helps you to create content. There are limitless ways to use the style in your design and like fashion, it changes over time. Nowadays the flat design is the most used, but in old times a 3d fashion was popular.
The good old Arial or Times New Roman are readable fonts, but they are boring. To make a website more prominent, you can use custom font families for headings and text. You can use and embed fonts for free from Google Fonts directory. Always makes sure that the text is readable while using custom fonts. Don’t forget to check on different browsers and devices, because some fonts might look strange on different web browsers.
Texture can be used to add character and it can also be used to differentiate between different areas of the page. When it comes to texture, subtlety is the key. Most of the work done by the texture will be on the purely subconscious basis. You can find texture at subtlepatterns.com. Here you can find a lot of packages you can use in your designs.
Boxes, arrows, and dividers are an invaluable set of tools in your arsenal and it can help you group page elements and create a sense of structure on your page. Boxes and dividers are a way to emphasizing the visual hierarchy. Notice the use of arrows on multiple websites and discover their impact. All these elements are holding together the design and they can also be used to emphasize important content. Boxes can be used to attract attention providing a visual indication to see what is important and to tell what to do.
Icons are used by many websites to support different options on their website. Icons can be a powerful visual cue. Icons allow users to quickly scan the page and find what they are looking for and they are pretty universal so you do not need to know English in order to understand what an icon represents. They can replace a long text or a large image. And this is important when you are creating mobile websites.
The problem is that icons are not always obvious if there is no text near them. If you going to rely only on icons you need to make them obvious. So if you want to find icons you can create your own or just go to Google and search a website which has multiple available icon packages to use for. However, you need to take care because icons come in different styles so if you are using more than one icon on your website you should be sure they match one with another.
Wrapping it up
Now you can see how styling must be subtle but an important role in your design. Boxes, texture, arrows and dividers offer you a structure while icon sets can make scanning your website page easier. Style improvise character to your design. Combining all the elements you can even show your personality and create a brand.
Whatever techniques and design elements you use for creating your website, one thing is sure: you need a good web hosting service. For beginners I highly recommend eHost.com for starting their website. This company offers affordable hosting service for both individuals and small businesses.