Building a New Website: Best Practices for Design

Building a New Website: Best Practices for Design
October 31, 2011

Welcome to the blog series on creating your own web presence.

Hopefully, you have identified the purpose of your site (post 1) and you have found the best way to organize your content (post 2).

Now, the focus is on site design.  Google “web design” and you might see terms such as “responsive design,” “adaptive design” or “object oriented CSS”. Those topics are important and if you decide to pursue web design further, invest the time to learn more about each. However, this blog assumes that your goal is to get your website up and running in a short timeframe so here are four primary design rules that can help you maximize the presentation of your content.

1. Layout

Use a grid system to create a basic structure for your site for alignment purposes. Alignment creates flow on the screen enabling visitors to locate and read the content. There are many ready-made grid systems or you can build one using a grid calculator. As you place content on the grid, put the priority information in a logical location. Remember that most people read from top to bottom and left to right. Left-align the text as large amounts of right-aligned text is difficult to read. Consider keeping your site vertical as horizontally scrolling sites are an anomaly. If it’s crucial to your design and supports your site’s goal, then go for it, otherwise, skip it.

2. Typography

Choose your fonts and their sizes carefully. Avoid odd fonts or extreme font sizes. But don’t be afraid to experiment. Create a visual hierarchy through varying font size. Pick one size for titles, one size for description text, and another size for author names or subtitles. Then apply this pattern to all of your content so that users can quickly recognize what they are looking at/for.

3. Color

Monitors can display millions of colors, don’t try to use them all. Use standard ones or pick a small palette of colors to use on your site. Much like you did with your font choices; try to create a visual hierarchy that subtly communicates to viewers what information is the highest, middle, and lowest priority. Choose a background color and a highlight color for text or objects that you want to call attention to. Differentiate titles and callouts from the body text. While continuity is important, don’t let your palette hamper you. Every page doesn't have to use the same colors. Experiment with your palette.

4. Assistance

If all of this seems overwhelming, have someone else design your site. If that’s not feasible, use ready-made templates, palettes, and images. Many common site building apps have templates that can help you quickly achieve results. Also, there are websites offering free templates, HTML snippets, images, and palettes. Choosing this path comes with some pros and cons however and we’ll address those in a different post.  

Hopefully your site is evolving. Remember that if you hit a stumbling block, you can do what many designers and developers do, Google it. Next up, best practices that can help you avoid some common pitfalls as you hone your site.