- PSD to WordPress
- Learn
- Infographics
- Web design guide: 69 website design tips for breathtaking websites
Web design guide: 69 website design tips for breathtaking websites
Get free updates of new articles, interviews & roundups here, or subscribe to our RSS feed.
By PSD to WordPress.
You’ll probably agree with me when I say: It's really hard to find a website that offers more than a dozen website design tips which you can actually use as web design inspiration during your web design projects, right?
Well you don’t need to search for web design tips anymore because in this web design guide, we’ve combined all the tips, tricks and fixes we could find into one comprehensive list of 69 web design tips. View the infographic, read all tips per category or download the complete list with all tips elaborated.
Share this infographic
Embed this infographic on your website
The 6 different sections (.jpg)
The complete list of 69 website design tips elaborated
Design
1. Investigate
Tweet Tip 1Before you start designing your website, you need to figure out who your target audience will be and what their expectations are. Make sure you build a website that fits their needs and not one that targets everyone. If you build a website that targets everyone, your conversions will never be as high as when you build a website that specifically targets your target audience. Find out who your competitors are and analyse their websites. Find out which parts of their websites are good and keep those parts in mind when you design your new website. But don’t just copy and paste, create something original that is better and has a better conversion rate.
2. Limit colors
Tweet Tip 2When you’re designing a new website, it can be very tempting to use color after color simply because you can. However, it is not recommended to use more than two to three colors on your website in order to simplify your web design and keep it visually attractive. When you use more colors on your website, the design will start to look chaotic and visitors will get distracted. If you still need to use more colors, it's recommended to use different shades of the two to three basic colors. That way you can use more colors, but still stick to the basic two to three colors and avoid a website full off different distracting colors. Also, make sure you pick colors that colors that go well together. If you’re not sure how to find colors that go together, use one of the various color scheme generators available on the web.
3. Logo
Tweet Tip 3Your logo is probably the most important item on your website, since the logo is a major part of your brand and will be a point of recognition for the people visiting your website. Always make sure that you use a high-quality logo that has a prominent position at the top of every page on your website and make sure it links directly to the homepage of your website, so that visitors can at any point easily navigate back to the homepage.
4. Text contrast
Tweet Tip 4Why do you think books always have pages with white backgrounds and black text? Because you need to be able to read the text properly. The same goes for websites. Since the beginning of the internet, websites have changed a lot. One thing that didn’t change much is the presentation of text and making sure texts have an optimal contrast. Black text on a bright (usually white) background is still the most used and most effective way of presenting text to visitors. If you decide to use a text color which is similar to the background color or which doesn’t go well with the background color, visitors won’t stay very long on your website because things aren’t clear.
5. Extremes
Tweet Tip 5A lot of designers forget that the space they reserve for a piece of content may be too small to fit the actual content. For example, when you create a website design in which you reserved space for five menu items, but the client suddenly needs space for eight menu items, you’re in trouble. Always make sure you keep in mind that you or your client might need a lot more space than expected in the first case. When you don’t keep this in mind, this might lead you into trouble at a later time and make you invest many more hours into fixing the problem.
6. Design order
Tweet Tip 6It is important to start every design you create at the same point and go through a certain design process to achieve long-lasting designs with optimal conversions. Investigate the target audience, analyze the competitors, create multiple sketches and drafts and ask your client's opinion about them. Design using a grid and create an organized Photoshop document containing folders and layers. In three words: "Keep things organized".
7. Use a grid
Tweet Tip 7Preferably use a 12-colum grid. This will allow you as a designer to create a website design that is well structured, logically ordered and aligned, and will at a later stage allow you or the developer to use that grid layout when he creates the layout. The developer will especially benefit from usage of the 12-column grid when he starts on the responsive part of the website. Working with a grid is very easy to start with and once you use grids as a part of your design order, you will never work without them anymore.
8. Simplicity
Tweet Tip 8Keep things simple and make sure you only display the most essential elements on your website. A lot of websites have their essential elements scrambled between the un-important elements of the website which lowers the conversions dramatically. Remove all those un-important elements or hide theme somewhere at the bottom of your page or somewhere on a sub-page so your potential clients won’t get distracted. The 80-20 rule also counts for website pages, only 20% of the elements on a page have value and the other 80% has almost no value. Make sure you run tests on which elements have value so you don’t remove the valued ones.
Besides displaying essential elements only, make sure you use the same style across your entire website. Use the same style for buttons, menus and color schemes across the website so everything stays simple and clear, and make sure you use a structure which you’ve given good thought to and which you’ve tested thoroughly.
9. Trends
Tweet Tip 9Websites change all the time. What was hot last year, may become old this year. If you’re a web designer it’s definitely recommended to follow the latest web design trends so you don’t design websites for your clients with techniques that were hot 10 years ago. But at the same time, don’t overuse the trends and base all designs on the latest trends because then the website you design might need a redesign shortly. Always make sure that your designs are able to last for many years because a lot of your clients might not want to change their websites too often.
10. Be original, don’t buy a theme
Tweet Tip 10When you create a new website for your clients, for your business or for personal goals, you always want it to be unique. A website is like a business card since in most cases the target audience will see the website before they see anything else. So you don’t want them to arrive at the website and think: “hey, I’ve seen this website before” or “hey, this is the same website as this site”. However, there are plenty of reasons why you won’t be able to create a unique website. When you aren’t able to create a unique website, buying a theme might be a cheap and fast solution. A few tips when you decide to go for buying a theme are:
- Buy a theme that isn’t frequently used. Don’t buy a theme that is the most sold or has the most views. This means that a lot of websites use this theme already, so the chances are high that your target audience will already be familiar with the theme.
- Customize as much as possible. Change colors and remove all references to the original theme seller, and edit as much as possible so it will look less like the original design. Be aware that some themes require you to credit the template’s owner or CMS. If this is the case we would recommend to search for a different theme.
- Make sure you at least design a custom logo so your audience has something to recognize you by.
11. Test your designs
Tweet Tip 11Once you’ve finished your web design and are ready to throw it in front of your audience, it is important to test it thoroughly. The smallest change can result in major positive or negative results. For example, when Microsoft was testing several shades of blue, this resulted in a $80 million annual revenue. Now this might not be a realistic example for your personal or company website, but you get the idea. Give your website multiple tests and when it is live, keep testing. Run A-B tests on and on to strive for the perfect website with a conversion rate which is as high as possible.
User Experience
12. Five seconds
Tweet Tip 12One of the most used buttons is the back button. Once a visitor lands on your website, you’ve got about five seconds to make the value of your website, company or product clear to the visitor so they have a good reason to stay. If it takes longer for the visitor to get a clear picture of what the website has to offer, the back button is their biggest friend and gone is the visitor. Make sure that above the fold on every page of your website, it’s clear what you have to offer and what the benefits are for visitors.
13. Responsive design
Tweet Tip 13During the last decade, usage of the internet has changed a lot. When first all internet users came from computers and laptops, nowadays more and more people use tablets, smartphones, even TVs and watches to access the internet. When you design a website, it’s recommended to use a grid because a grid will allow you to create a perfectly responsive website. Responsive design uses media queries, which you use to position and style elements on your website differently based on the screens' resolution. If you want to go all the way with responsive design, make sure that you give elements a width in percentages instead of fixed widths. This is called a fluid responsive design or a liquid responsive design. The advantage of percentages is that the screen resolutions that fall between the media queries will also get an optimal display.
14. Navigation
Tweet Tip 14The navigation on a website is one of the most important sections of a website since it allows a visitor to quickly go to the desired page without having to search for it, get frustrated and leave early. If visitors can’t find what they’re looking for they’ll rather exit the website and try a different website then search within the website until they figure it out themselves.
Mostly used is a top horizontal menu, so this is what most visitors will be looking for. Make sure you only list important items in that menu and use, for example, a menu in the sidebar or in the footer for menu items that are less important or that will only distract visitors from reaching their goals. Avoid using sub-items in a menu since that will only provide extra choices to choose from, as extra choices means extra distractions and that’s the last thing that you want.
15. Scroll vs click
Tweet Tip 15Some people will prefer a website where they need to click through several times before they reach their destination, and others part will prefer scrolling. Both have several advantages and disadvantages. For example, when a visitor has to click multiple times before he or she reaches their target page, the chances are high that they will leave early. The same goes for scrolling when a visitor has to scroll and scroll and scroll until he or she reaches the desired part of the page. You need to figure out what suits the target audience of your website best, scrolling or clicking.
With the coming of trackpads, tablets, smartphones and digital watches, where scrolling works much better then clicking, it is recommended that you create larger pages so visitors will be scrolling instead of clinking. Scrolling is easier then clicking because visitors don’t have to consider if they want to click on a link, they just scroll along. Thereby scrolling allows you to guide your visitors through a certain story that you want to tell them in a certain order.
16. The flow
Tweet Tip 16One of the most important aspects of your website is that you understand what your target audience is looking for and that you provide them with a clear website flow so they will not wonder what to do next, but will automatically go through well-considered website steps which makes them always end up in the right place. This is so important because website visitors will easily be distracted and it’s very hard to get them back on the right track once they’re distracted. Before you design your website, understand the needs of your target audience and create a flow-chart in which you define exactly which steps the visitors will need to take for an optimal conversion.
17. Remove clutter
Tweet Tip 17Before you start designing, you need to figure out which elements you want to use and which you don’t. A lot of elements might seem useful at the beginning, but will only distract visitors which is the last thing you want. It is easy to use too many images, texts, social media widgets, etc. Too much information will at some point stop our brain from processing it. So use the 80-20 rule, where only 20 per cent of the elements you have in mind can be used to get an optimal conversion, so remove all those unnecessary elements and only use the ones that will lead to high conversions.
Limit the options you give your visitors by reducing the number of links, buttons and other calls to actions. Make sure you keep your paragraphs as short as possible and don’t use too many pictures and videos. Especially avoid moving gif images at all times. The more information and elements you position on a page, the more the visitors will be distracted and the lower the conversions will be.
18. Unavoidable buttons
Tweet Tip 18Buttons are the most used call to action elements on websites. They’re used for forms, but also to send a visitor to a page where he needs to order a product or read more about something. Therefore you will need to make the buttons on your website as beautiful, attractive and appealing as possible so visitors can’t help but click on the button. Make sure you also use hover and active states so when a visitor hovers with his or her mouse over a button or clicks on it, the button style will change a bit which should make the user want to click it even more.
19. Readable fonts
Tweet Tip 19There are so many fonts you can use to design a website, which can easily make you no longer see the wood for the trees. When you choose one or multiple fonts, make sure that those fonts are easy readable across all devices, so not only on desktops but also on tablets, smartphones, digital watches and TVs. A font might look nice on your desktop but once you scale it down or scale it up you might start seeing pixels, which you definitely don’t want.
If the default browser fonts are too limited for you, you might want to use non-web fonts. Non-web fonts are fonts that are by default not supported by browsers, tablets, smartphones, et cetera, but that you can implement using, for example, @font-face. You can do this by uploading the fonts to your server and let every visitor download those fonts once they visit your website, but a better and faster way is to use Google Fonts. Most of those fonts are already cached by the visitors of your website when they visited other sites that also use those fonts, so loading times won’t get affected. When you decide to go with non-web fonts, make sure you use no more than two font families to affect the loading times as little as possible.
20. Think local
Tweet Tip 20If your website will be internationally oriented, your visitors will use different currencies, measurements, dates, times and languages. What you want to accomplish is that the visitors will understand everything on your website, so you need to make sure that every visitor on your website gets the idea that the website he’s visiting is specially made for him or her. All elements and sections on your website should fit visitors' customs. For example, if they use dollars in their daily life, make sure they see product prices in dollars and not in euros.
21. Breathing room
Tweet Tip 21White space between sections, elements and paragraphs makes sure that visitors get the time to take in the information they just read, instead of directly getting the next stuff in front of them. The white space allows the user to understand the contents of your website and makes sure you keep in control of the user flow, instead of the users jumping from section to section because they all seem to belong together due to the lack of white space.
22. Working links
Tweet Tip 22Links are important because they are the foundation of your website’s structure. If one or more links don’t work, the visitors, but also the search engines, won’t be able to navigate through your website. This isn’t only terrible for your conversion rates, but far more users will exit your website because they can’t reach the information or products that they are looking for. Make sure all the links on your website work, both internal and external links.
23. Link texts/anchors
Tweet Tip 23The links (and buttons) on your pages guide visitors through your website. Make sure that all the links on your website explain to your visitors where the links will take them and not use texts like ‘click here’ or ‘read more’ but use texts like ‘click here to find out more’ or ‘click here to read this article’. These aren’t the best examples, but you get the idea. The links on your website should provide visitors with some quick information about the page they will go to.
24. External links
Tweet Tip 24When you want to point out external resources on your website, you do this by using an external link. External links are the most effective way of showing that you appreciate the contents on that other page, but are at the same time lowering conversions since the visitors will leave your website when they click the link. If you want to lower those conversions as little as possible, make sure you let the links open in a new window using target="_blank". This ensures that the tab in which your website was opened will remain open so when visitors exit the resource website, they will land where they left your website.
25. Short forms
Tweet Tip 25Most websites use forms to allow potential clients to contact them, to request a quote or to initiate an order. If the forms on your website are very long and take a lot of time to fill in, potential clients will leave the page before they actually considered your service and what you’re offering them. Always make sure you use as few form fields as possible and avoid captchas. There are user-friendly ways of preventing spambots from using the forms, for example, hidden fields that can’t be filled in.
26. Auto-complete forms
Tweet Tip 26Allow forms to be auto completed by browsers. A lot of visitors have their browsers remember their contact information so filling out forms only takes a few seconds when auto complete is allowed. This will save them a huge amount of time which will only result in higher conversions.
27. Message received
Tweet Tip 27Provide a confirmation receipt after a form is filled out successfully, or let the visitor know if (and what) went wrong if a form isn’t sent. You can do this by creating a thank you message, or by redirecting the visitor to a thank you page. Either way, visitors want to know whether their message has been sent successfully or not.
28. Contact information
Tweet Tip 28A form can be used to let a visitor contact you and provide information you want them to provide. But consider that a lot of visitors don’t want to provide all that information, all they need is an email address so they can simply shoot you an email without having to fill out an entire form. Always make sure that you add contact information beside every form on your website so every visitor has the ability to contact you in the way he or she wants.
Content
29. Limit pages
Tweet Tip 29A successful website with a high conversion starts with simplifying the web design. If you want your visitors to request a quote, you don’t want them clicking through all the various pages that you have on your website as that only distracts them. You also don’t want them scrolling through pages that don’t seem to end. To make sure your visitors don’t get too much distraction, make sure your website hasn’t got too many pages and that the pages only are as long as they should be. Only create pages for information that they are looking for and trim all the remaining pages. For example, you see many websites have an 'about our company' page, and a 'who we are' page. That is a typical example of unnecessary pages since those pages can easily be fused into one page.
Just like adding too many choices on a menu, don’t add too many pages to your website. If your website is already online and you have a lot of pages, make sure you remove the ones that aren’t really needed, or merge pages together that contain similar contents.
30. Homepage
Tweet Tip 30The homepage of your website should only contain the most important information of your website. The information on your homepage should be short and right to the point. All secondary and supportive information should be on sub-pages which can only be one click away. If you currently run a website that has information buried three or four clicks from the homepage, consider moving that to the sub-pages. If it isn’t important enough for sub-pages, it isn’t that valuable at all so annihilate it. The homepage is only a doorway to the sub-pages where visitors are supposed to take action, like requesting a quote or placing an order. Of course, the above doesn’t account for one-page websites.
31. Content is king
Tweet Tip 31This is one that you probably have heard before, which emphasizes the importance of it. You can make an astonishing web design with beautiful techniques, but far more important are the contents of your website. If the message you want to communicate with your website audience isn’t clear, then the whole website will fail, no matter how it looks. So always make sure you look at what your audience needs and appoint your services in the right way so your audience understands exactly what your services are about and how they will contribute from it.
32. Messaging
Tweet Tip 32If you want the visitors from you website to perform an action, for example, buy your product or request a quote, you need to make sure that you don’t overwhelm them with long paragraphs of text. Only message down what they need to know, and only use a few words for that so they don’t get distracted or bored. Imagine that you have a single text message to explain your website, so the message becomes clear within a few sentences.
33. Photography
Tweet Tip 33A photograph says more than a thousand words, at least when that photograph is beautiful, original and supports the message that you want to communicate to visitors to your website. Visitors will notice when the photographs on your website aren’t original and they will then think the same of your company. Invest in quality photographs by hiring a professional photographer or buy the photographs from stock photo services, and make sure that the photographs on your website tell your story without using words.
34. Video
Tweet Tip 34As many internet users have very fast internet connections, it is highly recommended to create a video for your business. A video is one of the best ways of explaining your product or service. When a potential customer watches your video, it immediately builds a bond and allows you to explain your business in the best possible way. When you display your video above the fold on your homepage, all your visitors have to do is click the play button and lean back to watch the video. After watching the video, they don’t have to click around on your website anymore and can directly contact you or start the order process. Don’t mistake this video with a background video though.
35. Stay fresh
Tweet Tip 35How do you feel when you arrive on a website that looks like it hasn’t been updated for at least one year? Exactly, you go back and search for a similar website that has recently been updated. Avoid your website visitors from thinking that your website or business is outdated, and make sure that you update your website on a regular basis. It is important to give visitors to your website the impression that your business is an active business and if you’re not active online, then they will think that your business isn’t active either. The best way to do this is by maintaining a blog and social media accounts.
36. Blog
Tweet Tip 36A blog is one of the best ways to get your website to look active, just make sure you display links to the latest blog posts on the homepage of your website. Another advantage of a blog is that you can show that you actually know what you’re talking about and share that knowledge with the visitors to your website. This will make visitors feel comfortable about your company or service , as you actually know what you’re talking about and even care to teach others what you know.
37. Social media
Tweet Tip 37Social media is hot. Items like like-buttons, share-buttons, widgets and links to social media pages from a website are used a lot to gather as much social engagement as possible. Social media is a great way to create a loyal audience. This audience can become brand advocates for your brand who can help attract new visitors to your website. If you want to include social media as a part of your marketing strategy, you need to make sure that it is very easy for visitors to your website to find your website on social media and to share contents of your website on their social media accounts. Make sure you find the perfect mix because too many sharing buttons, et cetera, will distract visitors to your website too much, which will lead to lower conversions.
38. Audience
Tweet Tip 38The products that you want to sell through your website, the information that you want to provide on your website, or any other things that you want to publish on your website will not be intended for everyone. When you design your website, keep that in mind and only target the target audience with your website. If you, for example, sell dresses, target women and don’t target men. If you do target the wrong audience or target everyone, the conversions will be terribly low and you’ll probably run out of business shortly. Always start by researching who your target audience is and what they are looking for before you design a website that targets everyone.
39. Spelling
Tweet Tip 39It can be very distracting and annoying to read a text that is full of spelling mistakes. When you write the text for your website, always make sure that the spelling is done correctly. If you’re not confident enough about your own spelling, hire a proofreader who can correct all the mistakes you’ve made. Incorrect spelling doesn’t only annoy visitors, but will also annoy search engines. Make sure you spell everything correctly!
40. Above the fold
Tweet Tip 40The part of the website that you see when you first go to it and haven't scrolled is the part that is above the fold. This part is where potential clients decide in a few seconds whether they're interested or not. This means that this is the most important part of your website, so it's better to have the message that you want to communicate and the action that you want them to take, for example, call to action links/buttons, a contact form, an email address or a phone number you want them to call, right there. However, keep the part above the fold clean so that visitors don’t get too many options to look at and choose from.
41. Landing pages
Tweet Tip 41Most web designers start their designs with the homepage, assuming that users enter a website through the homepage and then proceed to one of the sub-pages. In reality this isn’t the right way to go since most of the website's visitors enter the website via a sub-page and navigate from that sub-page throughout the website. This means that web designers should design every page of the website as a landing page, and not only the homepage and specific landing pages which are used for marketing campaigns. Make sure every page contains the most important information above the fold, whether it’s a contact page, an about page or a blog post page.
42. SEO
Tweet Tip 42It is important to keep SEO (search engine optimization) in the back of your mind when you create the design for a new website. Of course, the main focus should always be the target audience, but don’t block SEO out. A lot of websites out there rely on the traffic that they get from search engines and when you also want to receive visitors from search engines, you’d better make sure that your website has a logical structure, that you use the various HTML elements in the right positions and that search engines are able to index all pages and parts of your website. Make sure that you follow the latest Google Guidelines when you design and develop the website so you won’t get some sort of penalty because you violated their rules in any way.
43. Ranking
Tweet Tip 43Don’t put all your focus on the homepage. When you want your website to rank in search engines, don’t think that all you need is the homepage to rank in search engines because it is web pages that rank in search engines, not websites. This might sound a little odd, but it is actually true. When your website starts to rank in search engines, you will notice that not only your homepage will rank, but your sub-pages will rank as well. Since you can have a lot of sub-pages, your focus should be on all those pages and not on the homepage only because if all your sub-pages rank instead of just your homepage, you’ll get a lot more traffic from search engines.
Development
44. CMS
Tweet Tip 44Be smart and don’t waste time by building your website from scratch and create a custom built CMS. Open-source content management systems like WordPress, Joomla and Drupal (or Magento if you’re looking for an e-commerce CMS) are freely available and fairly easy to use. You’re wrong if you still think that those open-source content management systems will only allow you to set up a blog. These systems allow you to run a complex website with all the functionality you will need. An additional advantage is that there are a huge amount of plugins available which allow you to easily add extra functionalities to your website. And of course, if you’re not much of a coder yourself, you can always outsource the PSD to WordPress conversion to a company like ours, so you’ll know for sure that you’ll get the best possible quality at affordable rates and high delivery.
45. Security
Tweet Tip 45Ensure that your website is secure, always. Whether you’re running a simple blog or you’re running an e-commerce website with thousands of products, not only you but more importantly the visitors to your website should never be vulnerable to hackers, spam, viruses, or whatever other crap may harm them. Always make sure you’re keeping everything up to date, use HTTPS and never store privacy-sensitive data on your server or website.
46. Benefits
Tweet Tip 46You can design a beautiful website and use techniques that will drop the jaws of your visitors, but as long as you don’t offer benefits that will suit the needs of your visitors, all that hard work will be for nothing and it won’t take long before you’ll run out of business. Before you start designing and developing a new website, you need to think about your target audience. We mention this again because it is important to realize that once you’ve found out who your audience is and what they’re looking for, you can come up with the benefits that will solve their problems and suit their needs. Once you have the benefits that you will offer on your website, start designing and developing the website around those benefits so the target audience that lands on your website finds what they’re looking for.
47. Learn
Tweet Tip 47Do you earn your living as a web designer or as a web developer? Make sure you keep educating and updating yourself with the latest techniques, technologies and tools. It happens too often that new websites are being launched with techniques that were fine 15 years ago, but really aren’t an option any more nowadays. For example, did you know that there are still everyday websites launched that use tables for the basic HTML structure? It is actually not so hard to keep educating and updating yourself with the latest techniques and technologies. Assuming you have a Twitter or Facebook account, just follow some of the big guys in the web design and/or web development industry. They’ll talk about new stuff all the time so you’ll see it passing by and when you find it interesting, all you need to do is click on it to find out more. Happy learning!
48. Experiment
Tweet Tip 48If you want to stand out or to be able to offer your clients the most beautiful websites using the latest techniques, you’ll need to keep learning and keep improving yourself. If you’re eager to learn new things, one of the best things to do is to start experimenting with new things, and simultaneously start a blog and start blogging about the things that you learn yourself. Experiment with new things and you’ll notice that you’ll improve your skills on multiple levels. One of the great things about blogging about your experiences is that you don’t keep the things you learn to yourself but share it with others. Those ‘others’ can be anyone, from designers, to developers, to potential clients. You will become an authority, people will start to look up to you and trust you (be aware, this won’t happen over a few months!). Most of the big blogs about web design or web development started out because someone was experimenting and simultaneously blogging about it.
49. Outsource
Tweet Tip 49This web design tip might sound a little out of place, but it has to be mentioned. A lot of the web designers out there (and here we’re talking about the creative people that work with Photoshop or Illustrator, but don’t know much about coding) aren’t really familiar with coding and also don’t want to be familiar with it. All they want to do is design websites and let the coding be done by somebody else. If this is exactly how you think about your life as a web designer, outsourcing the web development part is what you need to do. There are a lot of web development companies out there that offer a complete solution, but you don’t need that.
What you need are companies or freelancers who convert your designs into HTML and CSS, or into a content management system like WordPress. If you’re on a low budget, you should try out freelancing websites like freelancer.com and upwork.com. There you’ll find a lot of people (mostly from Asian countries) who will guarantee you everything at its best and fastest at very low prices. However, if you buy cheaply, you pay dearly. When you really want the PSD conversion to be at the best possible quality, created by experienced web developers who have been in the business for years and don’t promise you things they can’t honor, you should never go to freelancing sites. Outsource your projects to companies or freelancers that are from America or Western Europe (as we are, how accidental!). These companies actually work with developers that use the latest techniques and always deliver the projects according to the latest standards and within the agreed timeframe.
50. Clean and commented
Tweet Tip 50This one doesn’t only go for web design and web development, but goes for any work in any line of work: work clean and organized. When you design a website in Photoshop, make sure you use a grid, use a separate layer for each element, name the layers and order the layers in different folders. When you develop HTML, CSS, JavaScript, PHP or any other code, make sure you keep things structured, clean and commented. Make use of tabs and enters, and comment every element so it’s easy to find again at a later time. Of course you can minify your documents when you’re ready, but always make sure you keep things organized so you (or any other developers) won’t waste time in searching through the documents.
51. Speed
Tweet Tip 51One of the biggest reasons for visitors dropping out early is because a website loads too slowly. You’ll want to avoid a website that loads for more than a few seconds, so make sure you do all that is necessary to accomplish a load speed which is under two seconds. Here are nine tips that you can use to speed up your website and reduce the loading times of your website pages:
- Reduce the number of images (and make the images that you use as small as possible);
- Use sprites and, where possible, use CSS to replace images;
- Minify your JavaScript and CSS files (and remove duplicate codes) and combine the files into one file;
- Enable browser caching;
- Enable server compression;
- Use a fast server (with a fast server response time);
- Optimize the database(s);
- Use a CDN (content delivery network);
- When you’re on a CMS, use a caching plugin.
52. Images
Tweet Tip 52A website with images that relate to its contents are in most cases more beautiful and convert better. When you use too many images, or use them in the wrong way, the loading times of the pages of your website will dramatically drop. Always make sure you use the following three tips when you use images on your website:
- Create the images using CSS3 where possible. CSS3 allows you to create the most beautiful shapes without having to use background images (in contrast to CSS2). When you, for example, have a button with a rounded border and a shadow, you no longer need to use a background image to display that button, but all you need to use is a little CSS3. This ensures that your visitors don’t download all those redundant images which will result in a website loading much faster.
- Use sprites. Sprites are multiple images combined into one image. Sprites are used mostly for icons and images that have hover functions. When you use a sprite, multiple images will be loaded at once (since they’re all combined into one image), so there is only one download request for all those images. Thereby hovering will become more beautiful because the image is already downloaded, so you won’t see it blink when it transfers to the ‘hover image’.
- Compress images. The smaller the image, the less time it will take to download it. Make sure you lower the quality of your images or compress them using one of the various services which can be found online.
53. Special effects
Tweet Tip 53It can be tempting to use all the techniques and effects you know on one website so every movement, hover, or action has its own special effect. But consider that all those special effects, like a flashing logo or spinning graphics, will only distract visitors from the contents of your website. A lot of the people don’t like special effects at all and get annoyed as soon as there are more than two effects on a website. The advice here is to keep it simple and clean, and don’t use more than two special effects on a web page.
54. Parallax scrolling
Tweet Tip 54Parallax scrolling is a special effect that has become very popular over the past few years. It allows a website to let the various elements on a website move in different directions once the visitor starts scrolling. Using parallax scrolling can result into really nice website that guide the website users into a certain flow, but these websites are usually built for demonstration purposes. If you’re thinking of using parallax scrolling effects on your website, the advice is to keep it simple and don’t use too much of it. Again, too many of these special effects will only distract visitors from the important contents of your website.
55. Sticky footer
Tweet Tip 55The bottom part of a website is called the footer. Since it is the bottom part of a website, you might assume that it is always at the bottom of your browser. Unfortunately a lot of web designers and web developers don’t make the footer sticky so when there is a page that contains little content, the footer doesn’t stick to the bottom of the screen but moves up and leaves an empty space below it. Always make sure you create a sticky footer when you start with the development of the HTML and CSS.
Future
56. Test and update
Tweet Tip 56Once you've finished the website and people are starting to find it, it isn’t time to relax. To make sure that your target audience has an optimal experience and the conversion rates are as high as possible, you need to keep testing new things and keep adding updates to your website that came from the tests you did. A-B testing is one of the most popular ways of testing new things. Your website can always be better.
57. Learn from others
Tweet Tip 57In almost every industry there are a lot of competitors. You need to analyze all your competitors and learn from them. However, you should also look at other industries. This is what is called “thinking outside the box”, which allows you to come up with fresh ideas that your competitors don’t use and which will help you stand out. It can be the smallest difference that makes a potential client choose your service or product over your competitors' websites.
58. Lead the way
Tweet Tip 58An industry leader isn’t any more the leader it was years ago. An industry leader nowadays is a person that represents a well-known business who shares his knowledge and experiences. When you share your knowledge and experiences, not only potential clients, but everyone will see that you’re not the industry leader for no reason, you actually know what you’re talking about and people will respect you and your business even more. There are several ways in which you can share your knowledge and experiences, for example, via the company blog, via social media, or via platforms like LinkedIn.
59. Keep up
Tweet Tip 59Once you’ve got your website or business settled and things are starting to work out well in terms of search engine rankings or social media engagement, you might think that the job is done and you can lean back from that point. Consider the fact that while you’re leaning back, your competitors won’t be leaning back and will keep working on their online presence. It won’t take long before they overtake you and you're left behind. Always make sure that you keep working on your online presence, no matter how far you are ahead of your competitors you are, because taking the lead and holding the lead are two completely separate strategies.
60. Wearable tech
Tweet Tip 60It is almost impossible to keep track of all the latest technologies. Wearable gadgets like glasses and watches pop up everywhere. Your brand or business might benefit from these technologies and gadgets, so make sure that your website is ready. Optimize your website for these gadgets so everyone will have an optimal experience when they open your website on their futuristic gadget.
Don'ts
61. Flash
Tweet Tip 61Years ago Flash was used on a lot of websites to create visualizations. Flash websites worked pretty well, except when you’re a search engine that can’t read Flash content or on an iOs device that doesn’t support Flash. Luckily nowadays the usage of Flash on websites has almost died out, and that should be kept this way. Whatever you want to build using Flash can be built using plain old HTML, CSS and JavaScript. If it can’t, think of something else to build as long as you don’t use Flash to build it.
62. Pop-ups and pop-unders
Tweet Tip 62There are still a lot of website owners out there that use pop-ups on their websites, mostly to convince people to subscribe to their newsletters. A pop-up might convert better than a sidebar or footer section, but still, it annoys the hell out of most people. Pop-unders are usually used on websites where lovemaking is brought to a lower level and, luckily, they stay at those kind of websites. Let’s all pray the same happens to pop-ups!
63. Auto play
Tweet Tip 63Websites that contain screen-filling background videos that auto play when the page is loading or fragments of music that start playing once the page is loaded have a high bounce rate. The average website visitor gets annoyed once video or music starts playing without asking for it. Thereby it only distracts the visitor from the main contents of the website and can result in long loading times.
64. Advertisements
Tweet Tip 64When you’re running a business, money is made by selling your services or products. But what if you’re running an informative website where you publish contents for free? You need to make some money so you can at least cover the server costs. The most obvious (and often the only way) is the usage of advertisements. Ads are a great way of generating funds to cover the costs and nothing is wrong with a few ads on your website, but don’t overdo it. Make sure you never use more than three ads per page so people won’t get distracted too much or even get annoyed by all the ads.
65. Carousels and sliders
Tweet Tip 65The time where image carousels and sliders were displayed on almost every homepage has luckily passed for a while now, but some designers still think that displaying contents using carousels and sliders is a good idea. Image carousels and image or text sliders only annoy and distract visitors to your website, and may make them hit the back button faster than you can even imagine.
66. Old techniques
Tweet Tip 66Back in 1995, CSS didn’t even exist and websites were built using frames and tables. Back in those days that was the only option when you wanted to create a website, but nowadays frames are hardly ever used and tables are only supposed to be used for displaying data in an organized way. Please don’t use frames or tables to display regular content. Invest some time in understanding the basics of HTML5 and CSS3, and stop using frames and tables.
67. GIFs
Tweet Tip 67A GIF is an image format which is on the web mostly used for animating images. GIFs can be great but don’t use them in the wrong places. Your visitors will get distracted from the main contents when they see a moving GIF, and that is something that you don’t want.
68. CAPS
Tweet Tip 68Some people think that writing sentences in CAPS make things stand out more. Well, it will stand out more but people will actually think that you’re SCREAMING at them. Don’t overuse CAPS!
69. Underline
Tweet Tip 69An underline is used beneath words that link to different places. People are used to clicking on words that contain an underline because they think it’s a link. If you start underlining words that aren’t links, people will get confused because they click on it and nothing happens. Make sure you only underline links and don’t underline normal words or sentences.
Get new articles, interviews and roundups delivered to your inbox:
We'll send you our non-commercial newsletter a few times per year.
No SPAM ever, we value your privacy.
Jules
- 2016-02-16 14:19:43Some excellent comments - and some questionable ones.
Firstly I would agree with all of the "don'ts" - but would add several of the suggestions you include as "does".
46. Benefits - "think about the audience" - Yes, Yes, Yes -and why isn't this # 1 ?
But missing from the commentary is: Give the Visitor reasons to stay on the site with
i) plenty of content
ii) plenty of CLEAR navigation
Many of the criticisms below may be about designers (or website owners) thinking inwardly, or towards a different audience (e.g. other designers, or competitors)
2 Limit Colours: Noooooo!
Sites that stick to their corporate colours are:
a) boring
b) harder to navigate (fewer visual clues to distinguish active elements)
4. Text Contrast - Yes !
But why do so many sites use grey text - often on glaring white backgrounds. (e.g. the text here is mostly grey not black)
8 Simplicity : Noooooo !
What you call "unimportant elements" may be those micro details that say:
i) "We've made extra effort to improve your UX"
ii) This element is Active but this is Passive
Flat, monotone slabs and icons are;
a) boring
b) indistinct as navigation links.
9 Follow Trends - Noooooo !
The recent dumbing down of the internet with flat, minimalist, hard to navigate sites - often with HUGE photos and empty space requiring endless scrolling is a BAD trend.
10. Don't Buy a Theme. Why not?
Think of the User (item 46).
Familiarity with a layout is likely to keep the visitor longer than a site with uncertain or unclear navigation.
12. Five seconds before using the back button and "above the fold"
Absolutely agree - so why have recent sites pushed so much content out of sight - or removed Contents list and Menu items - all of which tell the Visitor:
a) what's inside
b) how to explore
..... instead forcing extra "work" by scrolling ??
13. Responsive Design.
Careful ! Some responsive sites make it impossible to resize a browser window for side-by-side comparison - without shuffling the content around unhelpfully.
14. Navigation.
Yes ! - top equal with Content....
.... so why do sites make navigation harder with fewer distinctive features (e.g. less colour, no shading, slabs instead of rounded buttons/tabs)
And why less inviting by having no Contents list and too few Menu times????
15. Scrolling is extra "work" - so is almost always bad.
Making the User scroll should be avoided and only allowed when there is a natural flow (such as Comments in a forum - but even here there should be a limit and pagination enabled)
"scrolling allows you to guide your visitors"
That's a problem for some visitors.
Their reason for visiting may NOT be what you think - and it can be annoying to be "guided" down a path (long page) rather than seeing links to take one's own route.
17. Remove Clutter - Noooo !
Designers "clutter" is the Visitor's "visual clue" for navigation and invitation to explore.
"Limit the options you give your visitors by reducing the number of links, buttons and other calls to actions" - Noooooo ! (at least recent trends have taken this too far )
Contents lists and Menu items tell the visitor what is inside, so inviting him/her to explore.
18. Buttons - "make them beautiful".
YES - so why so many flat, monotone slabs (like the social media one at the top of this page)?
20. Think Local - but don't force it.
When I plan a vacation in Canada I do NOT want a website to AUTO-change the currency - because that makes comparison harder - esp. when I'm getting Canadian Dollars on other sites.
By all means have a conversion button.
21. Empty Space - is another recent trend for the worse.
Empty space means less content and more scrolling.
When it is glaring white it can cause eye-strain - worse if the text is grey.
30. Homepage - "short and to the point" Noooooo"
Arriving at a page with a HUGE photo, fewer than 10 words and a couple of flat, monotone, indistinct icons is NOT going to make me stay and explore.
Content, Content and Navigation please !
31. Content is King - Yes Yes Yes !
(Along with clear navigation)
33. Photos rarely "say a thousand words" on a website.
Mostly they get in the way of Content and Navigation - forcing unwanted scrolling.
Keep photos small - while allowing the Visitor to enlarge.
34. Videos must be optional.
How many visitors have the time to watch?
( esp. if it is a company employee merely speaking the companies "mission statement")
Provide a compelling text summary - or links to the same theme in text.
Mostly videos should be reserved for "How to do this" demonstrations.
40. Above the fold - Yes, Yes Yes !
So why so much content - or progress/continue buttons hidden below the fold.
Too many sites have enlarged their text, widened line-spacing, heightened panels with empty space. Why ?
41. Landing Page - as per Home Page - please can we have Contents and Links.
Romain Caisse
- 2016-03-02 14:19:26Great article, thanks! I appreciate it when people share specific hints readers can implement in real life
Olivia White
- 2016-07-05 08:24:35Wow, really I got a lot of information from above tips.
Keep sharing.
Bradley Lisotte
- 2016-09-04 08:41:47That's the one I was looking for from a long time search on the webs for website designing tips. Thanks a ton @BRoesink for sharing all these critical points.
Bradley L.
(http://www.advis.com.au/page/web-design.aspx)