Sometimes it can be hard to know how to improve your web designs, especially when you're first starting out and it just seems like you are not improving much, if at all.
Based on what a given website is for (it's various requirements, style, type, etc.), the needs of the layout and design will be different -and so will the methods/techniques you will need to use as well, but the following tips are design principles and things I have learned which should apply to almost any web design you make.
My Experience (Intro)
When I first started in web development & design, I would just dive in and start writing the HTML and CSS for each of the website's pages without a solid idea of what the layout or design even was.
What I Used to Do
I knew what the design needed to communicate and I thought I had good ideas for the layout and design. However, once it came to coding the ideas into an HTML page, I was lost. I had either forgotten the ideas or hadn't though the ideas through well enough.
Not having much of an idea of what I was aiming for with the design, I spent hours trying hundreds of different web designs and attempting to tweak them (all in the raw code) to fit the idea of what I knew the website needed to be like in my mind.
Needless to say, it was a lot of work and the completed pages looked quite bad. (Granted, my standard has always been really high for design...but it still wasn't what I wanted.) A bit frustrated, I wondered how others made their web designs to look so good and in way shorter periods of time than me. "What is is that I am doing wrong with my designs?" I kept wondering.
What I Discovered
Then, I discovered a tutorial in which someone walked through the process of making a mock-up of a professional-looking website design in Adobe XD. They explained about the proper use of white space, color contrast and other design techniques. It really made sense to me and I thought about how much time it saves making a mock-up of the layout/design first before messing with the code itself.
Inspired to try the techniques I had learned myself, I launched Inkscape, a free software program which I had already been using for SVG editing, and started to create a web design mock-up from scratch. Just by applying the design techniques I learned and taking the time to create a mock-up first, my designs and layouts improved and looked much more professional and pleasing almost immediately -and other people said so.
Continuing to Learn
Now, I am not saying I have attained any great level of proficiency in my web designs yet and I continue to learn and make mistakes all the time. However, I will share what I have learned regarding website design so far and I hope you will benefit from it.
Knowing that continuing to learn and practice to improve your web designs and skills is a basic concept that we, as designers need to remember.
It's also something we need to remember in our spiritual lives: never stop searching and seeking for our Heavenly Father, Yahweh's truth which He primarily reveals through His Word, the Bible.
So without further introduction, here are 5 tips and design principles you can use to improve your web designs/layouts:
1. Create a Mock-up of your Web Designs First
Creating a mock-up of the website design you plan to make is really important, but is something a lot of beginner (and even more advanced) web developers overlook. It's something I didn't even think of when I first started out.
Advantages of Creating a Mock-up Design First
Having a clear plan helps you to sort out any issues ahead of time and gives you a reference to go by when you are coding the website's pages. Also, in some software programs you can export elements from the mock-up/template design to use in your real HTML pages which can save a lot of time not having to create them again.
Free & Open-Source Software for Creating Web Design Mock-ups
Some good, free software programs for creating website design mock-ups are:
Lunacy – The best free and open source software I have found so far for making web design templates/mock-ups. Lunacy is known as the "Sketch for Windows" and has a lot of great features such as support for multiple layers, paths, built-in UI kits and PNG export. I use it in conjunction with Inkscape (see below) and it is a great option to use if you're using Windows.
Inkscape – Free and open source software for manipulating and editing SVG with features such as SVG filters, effects, layers, paths and more. Inkscape is a great alternative to Lunacy (see above) for creating web design mock-ups and layouts when you can't use Windows. I have used to use it for many mock-up designs and it is a solid tool I still use for SVG editing no matter what OS I am on.
Gimp – Another free and open source software program specifically aimed towards raster image editing, which many web designers use to create mock-ups. I don't I have much experience using it for creating mock-ups myself, but I have found it useful for editing and resizing images for use on the websites.
Any of these programs can be used to create mock-ups for your web designs and allows for exporting elements.
Creating the Web Design Mock-up
Once you have your selected program for creating your mock-up, start with some basic shapes in the layout for the placement of different sections, such as the header (navbar), sidebar, body elements, footer, etc.
Next, start with any one area (I usually start with the header and navbar) and begin to place different elements in their approximate positions. Remember that you can always come back and change and/or tweak it if it doesn't look right. The purpose of creating the mock-up is to sort out the ideas you have into something solid you can use as a guide when actually writing the code (not that you won't make changes while executing the design in the code).
A word of caution though: You should try your best NOT to be sloppy with the template/mock-up design and position the elements as they will be in the final website, otherwise you will not have an accurate idea of what the design should look like in the coding stage.
You can only hope that your execution of the design template in the code will be as good as the design itself, so don't be lazy with the mock-up or it will be hard to know what your aim is.
2. Use White Space to Guide the Viewer Through your Design
White space is important in any design and especially important for websites with lots of text and/or elements. The white space doesn't need to be plain white, though and it can be used to effectively guide the viewer through your website and give their eyes a place to rest.
White Space for a Design that Flows
I believe that having proper white space in your web designs is right along side typography and color in importance for a design that flows. A website design that has inconsistent or uneven spacing breaks the flow of the page and looks unprofessional at best.
Outside of creating a mock-up design, the main thing I did to immediately improve my designs overall was simply to start using consistent, even spacing around elements and, in general, more spacing.
...looks and flows at lot better than this layout:
So make sure to add spacing that is consistent to separate the different elements in your layout.
On pages with a lot of text (such as blog articles, etc.) there needs to be white space around the blocks of text so that the viewer has a rest for their eyes and so that the text doesn't look so overwhelming. Spacing for the paragraphs and headers should help the viewer to find the information they are looking for by guiding them through content of the page.
Experiment with adding a bit more spacing and you will see that the layouts you create will be more clearly defined.
I realize that not every design style works well with a lot of spacing, but it is something to try for your next website design, at least. :) The minimalist website design style is an example: it's based off of the concept of "less is more" with anything other than white space, it would seem . :)
3. Keep the Colors & Typography Consistent
Choose your colors and typography wisely as they determine the feel of the website and can really make-or-break-it for the overall design.
Colors & Color Contrast
There would be no real designs without color contrast and choosing a color scheme that fits the website's purpose and content is very important. Try to limit the color palette you use for a web design to no more than four, excluding grey and white. Make sure they complement each other and (depending on the style) have enough contrast when put together.
It is best to be consistent with the colors throughout the website because having different pages different colors can be jarring for the viewer and they may wonder if they've navigated to a different website altogether.
Here are a few good sites to browse through and generate color palettes for inspiration for your next web design:
Typography is important for readability and branding for a website. Try to limit the fonts in the website design to 4 and make sure they are consistent with the style of website you are designing.
Choose a good font that:
- Represent the website's style well
- Is readable at any size (on mobile devices, etc)
- Goes well with any other fonts used on your website
You can find a great selection of free web-fonts from:
Font Squirrel - Download free fonts, convert them to different web-font types and more.
Google Fonts - Choose from almost 1, 000 different fonts to download or use via the web API.
4. Use Images that Match your Overall Website Design
Use the right images and/or edit the images to fit and have a purpose for adding them to the design.
It's a good idea to break up text, especially long blocks of text with images and/or graphics -but don't just add a graphic just for the sake of adding it. Not only will the load time of your website be impacted, but the wrong type of image that is not consistent with the rest of the site can break an otherwise great design.
Use an image only if it can be edited to be consistent with the rest of the images. If you haven't got it by now, consistency is a huge factor in making a website design look professional (in my opinion).
Software for Editing Images/Graphics
I already mentioned Gimp and Inkscape as good, free software programs for creating website design mock-ups but they are also great for editing images and graphics. I also want to mention...
Gimel Studio - 100% free, node-based graphics editor for Windows and Linux, which is one of my own projects. It includes real-time rendering preview, a node-based workflow, support for importing/exporting a variety of image formats, ability to convert images into normal maps for 3D graphics and more. It is still in beta stage as of the writing of this article, but you may want to give it a try. Feedback is welcome. :)
Should I Add this Image/Graphic?
A good rule for deciding whether to add images or graphics to a website design is "Does this graphic/image add something to the content of the page? Does it help the viewer to know more about the website or the content?"
I am not against decorative images/graphics, but if it hinders the visitors from getting to your content, then you should probably find a different way to add decorations. (See below)
5. Keep your Web Designs & Layouts Simple
Simple is often better in web design. Complex navigation and/or design frustrates users who are just looking for the information they want to find.
The Focus is on the Content
As harsh as it sounds to us designers, people are not usually coming to the website to see the website design. They expect it to look nice and all, but that's not the focus for most people. The content is the focus.
Done right effects can be good, but often times, they just distract from the content. So effects should be kept to a minimum unless there is a good reason to do otherwise.
So, you've put into practice all the tips mentioned in this article. Now what?
Remember the Most Important Thing
Remember that the most important thing is to glorify Yahweh, our Heavenly Father through all that we do. Whether it be what we think, do, say or what we design, the most important thing is that we bring glory to Him through it.
Try Something New
Try new things, new techniques. Get out of your comfort zone and try a different design style, coding library or, perhaps a color palette you've never used before.
It's obvious, but: practice, practice, practice to improve your work. Practice creating different designs and using different techniques, styles, variations of a website design you like, etc.
Thanks for reading. If you enjoyed this article or have questions, comments or corrections, please contact me here.