DEV Community

Cover image for 10 tips to improve your website design.
Abhiraj Bhowmick
Abhiraj Bhowmick

Posted on • Originally published at abhirajb.hashnode.dev

10 tips to improve your website design.

There are some things you need before you design anything.

1. A Logo and Favicon

A logo is the most prominent brand element on your website. It will almost always live in the site navigation, near the top of the page, and in the footer.
If you don’t have a logo, consider getting one. You can do it yourself or hire a graphic designer. Regardless of the route you choose, make sure you have the proper file types (AI, EPS, PDF, SVG, PNG, JPG) for your logo.
It’s helpful to have two versions of your logo. The primary logo design is used most and may include a wordmark and other detailed design features. Your secondary logo should be smaller and is easier to fit into tight spaces.
A favicon is the small logo icon shown in the URL address bar. A favicon makes your site look more trustworthy and professional.
Here’s a screenshot of our favicon (and secondary logo):
fav

2. Color Palette

Do you have brand colors? If not, now is the time to select a color palette for your brand identity.
A typical palette consists of three colors. The primary color is usually for text and major design elements. A secondary color works well for accents. The third, and usually the most vivid, will be an “action color” for buttons, call-out boxes, and links
This is an example of a color palette:
pal

3. Typeface System

Typefaces (also called fonts) are one of the most underrated design components. A nice typeface can transform an average design into something really special.
The typefaces you choose should align with the brand’s image and work well together. It’s best to choose a typeface with several weights (i.e., bold, italics) because it can be used in a variety of ways.
font

4. Forms

Opt-in Forms
If you want to build an email list or subscription service, you’ll need a form visitors can use to sign up. The form connects to an email service that generates a response when someone joins your list. 1

Contact Form
A contact form makes it easy for people to get in touch with you. To increase the likelihood that people will use it, don’t ask for too much information. First name and email address should be enough. 2

Calls-to-Action
A call-to-action invites a site visitor to engage with you. The action could be as small as clicking on a link to read a blog post or sign up for your email list. It could also involve a much more significant step, such as buying a product. Decide what you want visitors to do when landing on the site and make calls-to-action prominent. 3

5. 404 Page

An error can occur when links break or change. A custom 404 page lets visitors know something went wrong and redirects them back to your site.

6. Theme

A theme is like the website’s foundation. Themes provide design features, layout, and other front-end elements users will see. Once you select a theme, you won’t be able to change it without damaging the site, so choose wisely.

theme

7. Content

Your website’s content consists of individual web pages, such as the home, about, and contact pages. Blog posts often account for most of a site’s content, but images, graphics, and videos count too. It’s essential to assimilate all content before you begin the design process.
Adding content as you design the site is like building a house one room at a time. Developing content first reduces the risk of building a disjointed and confusing site. Make the most valuable content easy to access. It is best to position relevant content on the home page or only one click away.
Once site content is complete, check links to make sure they work. Edit text for spelling and grammatical errors. Grammarly and the Hemingway Editor are helpful tools for writing web copy.

Images make or break your website’s visual appearance. Use high-quality images and graphics that apply to site content. Images with vague meanings often confuse or bore users.Too many images overwhelm visitors. Image-heavy sites also take longer to load, which inhibits the user’s experience. I have discussed about the usage and sources for stock resources below.

8. Footer

This section is at the bottom of the page and usually contains links to contact, terms, and privacy pages. You can also use the footer to help visitors navigate the site by placing key links inside of it. By habit, most users scroll down to the bottom of the page, which means your footer will be highly visible.

footer

9. Announcement Bar

Do you have something important to say to your visitors? Maybe you have a big sale going on or want to share some news related to COVID-19.
An announcement bar at the top of your page will grab attention so your site visitors don’t miss it. ann

10. Responsive Design

Responsive design refers to a website’s ability to adapt to various devices and browsers. The screen sizes of an iPhone, iPad, a Surface, and a Galaxy are unique. Likewise, Microsoft Edge, Google Chrome, and Mozilla Firefox are independent web browsers.
Responsive design enables the site to adjust and provide the optimal viewing experience.

The width of iPhone screens ranges from 4 to 6.7 inches. So, a website’s display may change, depending on the site’s design and the screen’s size. Responsive design is essential for a good user experience. Unfortunately, search engines penalize sites that aren’t responsive.
rd

Connect

If you like my blogs you can support me by buying me a coffee.
Buy Me A Coffee

Discussion (2)

Collapse
lukeshiru profile image
LUKESHIRU

Have some comments about some of your tips, hope you don't mind:

  1. Your example of favicon actually looks shady. Ideally it should have a transparent background and should look good in both light and dark mode to be more trustworthy.
  2. Ideally you should use common system fonts, but if you really want something custom, you should try to choose a single font/typeface to reduce the amount of downloads to make the site finish loading. You should also have fallback fonts and loading strategies so there is always something to read, even if the fonts didn't load yet.
  3. Opt-in forms generally should be avoided because they feel like you're trying to sell something, and contact forms should always have captchas or other anti-spam systems, because a pretty common mistake is to leave those unprotected.
  4. Not only 404 pages, but any error page should be informative enough so the user knows what happened, but that should be it.
  5. The foundation of a site is not the "theme" but the "design". A "theme" is a concept applied to pre-existent layouts/designs. Designs should ideally be responsive and have both a light and a dark theme.
  6. What you refer as "content" is generally called "assets", and ideally images such as logos and icons should be vectors (SVG), and media such as photos and videos should have several resolutions to serve the ideal size in every screen.
  7. Footers are not mandatory, and sometimes when you have an infinite scroll website, you can't even have a footer.
  8. Stuff like "toasts" or "top bars" should be avoided because they generally provide a really poor UX both for regular users and folks using assistive tech (a11y).

That's it. Cheers!

Collapse
abhirajb profile image
Abhiraj Bhowmick Author

great tips! Thanks for the knowledge. Appreciate it!