There are a lot of ways in which a designer/ developer can make a good interactive design and there are a lot of ways in which a good design can be turned into bad. There are lots of factors one needs to consider when designing. If you are new in this field you might not know all of them so here are 20 powerful do’s and don’ts of web design that you should keep in mind when trying to design.
Let’s start from what you should do to improve your design.
Starting with Do’s of web design
1. Consistency
Many times, we come across designs where when you load up the site it’s different and when you start exploring it starts to shift the layout to a completely new way. The most basic principles of UX designing states that your design should be consistent and the same throughout the design every page should follow the same type of layout style and pattern.
By layout and pattern I simply mean using the same colors, fonts, animations, and typefaces in repeated fashion. This is because this consistency can have a very positive impact on the users visiting. For improving this, you should more focus on UX.
With the help of UI UX design course available at ADMEC, you can learn to strategically plan for successful UIs for both websites and web apps.
2. Simple Navigation Structure
The navigation of a website is very important as it leads users to other pages and having a very simple navigation structure is crucial so the user doesn’t feel lost and if ever wants to track back, they can.
Now this doesn’t mean put everything in the top nav bar, no definitely not, categorise them using simple terminology and if you have many dropdowns put them in the simple category. Try to highlight the current page with minimal styling. You can also use breadcrumbs to indicate the locations of the user within a particular part of the website.
Also try to make your navigation sticky or fixed so the user doesn’t have to go to top every time they have to navigate to a different page.
Using the footer menu is as important as the top since it provides more space to add the links. Any important link can be added there as well.
3. Highlighting URLs
Highlighting URLs especially when they are embedded within the content is also important and it can be achieved by making each content link bold or if you are using bold for something else then change color perhaps but highlight them in such a way that when you see it stands out.
You can also take this a step further and add visited pseudo class there so the users can also tell the difference if they have ever visited it.
4. Content Scanning
Whenever we open the site we don’t read everything on it, generally we just scroll through it. This is especially true for the homepage of any website if you put a lot of content in a page people will ignore it as stated we don’t read everything. Try to use more images, heading and use short and precise content.
5. Responsive
Nowadays every website that is made is made to be responsive and generally all of them follow the grid layout. Now this can be achieved using a CSS framework, or by vanilla CSS with display grid and flex properties. Along with this website has to be tested on multiple browsers as well as different screen sizes.
Regardless of the screen size the user is viewing, it should always be similar. Your design can change a bit since you cannot simply fit everything into the mobile and you shouldn’t try to.
You can build up your responsive designing skills with the help of right UI development course that covers responsive designing step by step.
6. Relevant Content
Adding unique content is extremely crucial. Always check the piracy rate of the content you are uploading. A website without the relevant content will always be empty no matter how good the design is.
7. Fixing Errors
Keep in mind that there should simply be no error on your site i mean it should not be displayed on the screen or hinder the users work. Broken images, links, videos, can cause disbelief in the site so try to avoid it. You can also use various 3rd party links to find different types of page errors like the ones showing 404 etc.
8. Less Choice
Now with this option I don’t mean remove all the options No. See if you give users n numbers of choices it only confuses them instead of interacting and continuing they look for the answer to your options which is actually bad. Give the choices but not too many.
9. Labelling
Label basically everything and label it right like buttons don’t use vague texts like submit, learn more, read more come up with more interacting text which reflects the users actions and they will feel more comfortable when interacting with it. Vague titles never provide enough information about the outcome or the impact.
10. Header
Making a header/ hero image/ slider strong is very important as it sets the tone for the website. If you have a good slider it compels users to scroll down and look what’s next in line and that’s basically what we are trying to do: make the user stay and get them explore the site.
Now let’s move on to the don’ts.
Thinking about Don’ts of Web Design
1. Making user wait
Having a faster load is not important, it is a necessity if your website takes like 10 seconds to load then people will just close it before it can show the content. You can reduce the load time by.
- Literally compressing everything like images, HTML, CSS, JavaScript.
- Using cache tools
- Lazy loading
- CDNs
Especially by removing the loaders many times a single thing is taking time to load and the loader blocks the whole page because of it so always check if the loader is working properly or better simply remove it.
You can test your website speed on sites like GTMetrix and Google Page Insights these are most popular and free.
In addition to this you can also use skeletons for show while your content is being loaded in background like Facebook uses it right before the content is loaded you see grey blocks occupying the area of the content.
We mentioned about HTML and CSS above, if you don’t know about it then you should take a look at HTML5 course that we offer.
2. Linking
Many times I people make this mistake of using linking in the wrong way. There are two ways you can open a link either in the same tab or a new one. What you should do is
- If you are just opening your own website then use the same tab
- Or if you are opening a link which is for a different site: open it in new tab
Don’t make the user leave your site even if its social links to other sites go for a new tab.
3. Shapes, shadows and border
When we learn to make shapes, borders and shadows we try to apply it everywhere. I especially see this with new developers. They think it will look good but it makes the design so bad. What you want to do is use them efficiently don’t fill the site with it.
- Use a very light border radius property like 5px or so just to make it rounded.
- Apply light shadow tones you can also google for sites showing CSS shadow styles simply copy from there and use it. One such site is Shadow Example.
- Using borders is good but giving 10px borders is ridiculous in a button so please don’t.
4. Many typefaces
We talked about consistency right this is also the same thing but with typefaces. You can use up to 2-3 typefaces in a single site even 3 is too much but you can. Anything more than that is just bad. What you can do is use different sites to make a font set for your site and use one font for all the headings and other for content. Or you can simply choose one font with a lot of styles up to but don’t make it crowded.
To make your own combination I would recommend Typespiration
5. Splashing Colors all over
Like the font you don’t want to put too many colors in your site. Build a color scheme and follow the same throughout the designing process. You have to reach a certain balance with the color scheme which becomes harder and harder every time you add a new color to the mix.
Now making the color scheme is challenging so better you use a 3rd party tool to make it and my recommendation is coolors.
6. Too Much popup
Making an auto pop is good for newsletters and contact form but only when using it in a limited state the thing is you don’t want your popup to show when the website is not there yet.
Wait for the user to spend some time on your website and then show. So, it can be time based or you can make it so if a user scrolls the webpage to a particular point make them appear.
Don’t display it too frequently like if you display literally on every page as soon as the users’ loads up they will get annoyed by it and we don’t want that.
Learn to create magical and trendy popup without spoiling the user experience with master JavaScript course
7. Letting Advertisement takes up the space
Earning with your website is a good but better way to design a separate block for advertisements especially if they are not on your site. Don’t let ads too much space in your site or they will diminish the identity of your site.
8. Playing Music
Don’t play any type of audio without the user’s consent. They may be in an environment where they cannot play the audio and always give a notification and ask if they are okay with it. Playing audio without any prior info only leads to immediate closing of the site and we don’t want that do we?
9. Horizontal Scroll
According to me a horizontal scroll bar is one of the worst things on the website. Always give it priority and fix it across all devices, even on the phone. Some developers make websites horizontally scrollable on smaller devices claiming that it is responsive but we rarely use horizontal scroll in our design.
10. Stuffing keywords in content
In the early days of SEO people used to just spam the keywords in websites and got better ranking in search for that but now search engines are smarter than you think and if you spam the keywords too much crawlers will literally ignore everything. So don’t do it.
You can give time to learn things like optimizing website for search engines with our SEO course that you can join in the form of both online and offline training.
So these were the few most important points a web designer should keep in mind and overall they result in a better user experience and more visitors on the site. You must consider these do’s and don’ts of web design while working.
Skills based courses are available for you in web design. Check the followings:
- Web Master Plus (18 months diploma)
- Web Master (12 months diploma)
- Web Premium (8 months diploma)
For any query related to these courses, do contact us or ring us at +91 9811 8181 22.
