We are often asked how to get started when developing a new website. This article addresses the key design components when beginning a project with these 5 tips for a better WordPress web design process.
5 Tips for Better WordPress Web Design
Planning is crucial for better WordPress web design when starting a new website project. The mandatory step before development begins is to create a comprehensive layout. To do this, we need to understand the goal of the website. Then we need to establish the typography, colors, web elements to be used, and the sitemap and menu structure, before designing it.
We also simplify the process and use popular WordPress themes that have options for typography, colors, and web design elements. Pre-designed and pre-built layouts that you can apply to your website will further streamline the effort. If the WordPress theme allows you to place the content of your site into custom post-types (like albums, galleries, testimonials, teams, events, etc.), then this will define what the site looks like; its visual design, and its interactions.
The fonts, colors, and design elements used on a website will determine the overall User Experience (UX). Because of this, we follow a design process to create the comp (comprehensive layout) before beginning the web development.
1. Use Typography to Enhance Your Brand
If you haven’t determined what fonts to use for your brand, examine what your competitors are using and consider the same or similar fonts. Use an online tool to find out the font families being used such as Stylify Me. Use free fonts at Google Fonts.
It is wise to limit the number of fonts used and keep things simple for optimum visitor experience. Simplify the work and use popular font pairings for headings (h1, h2, h3 tags) and paragraph (p tag) content. Use a resource like Font Pair for Google font pairing suggestions.
The fonts that are used for the website are just as important as the colors. Make sure to choose fonts that represent your brand and message! Is the message bold and striking or subtle and understated?
Think in terms of what the typeface reflects of the business. For better WordPress web design, keep creativity in check. For example, a digital-related business might have a logo that looks something like a digital alarm clock, but the typeface for the text must be in a more easy-to-read font.
Sans-serif typeface fonts are easiest to read electronically, so for a website, the best bet is to use sans-serif fonts for easier reading. Here are recent lists of some of the more popular sans-serif fonts:
2. Choose the Right Colors
Choose the theme colors based on the business logo or brand. We have heard so many stories of instances where the planning was so haphazard and ideas used by people that had no business in choosing color schemes. For better WordPress web design, it is worth all the downtime to finalize the color theme to enhance your business’s impact.
You want the theme colors to reflect your brand. Notice what the big corporations do. For example, IBM is known as Big Blue—just look at their logo.
If you don’t have a business logo or brand yet, or if your logo is black and white/grayscale use these online resources:
An alternative to choosing a pre-made color palette is to create one for the theme. Use a website like Materials-World to find colors for the theme. Jen Reviews has a guide to understanding colors: Color Meaning, Symbolism, And Psychology: What Do Different Colors Mean.
TIP: Because colors can appear to look different depending on adjusted monitor or device brightness and contrast, we use the eyedropper tool in Photoshop to get the exact color code for development.
NOTE: Colors used for print media may be slightly different than expected based on what is seen electronically. To ensure color fidelity between what is viewed on a monitor and printed material, refer to a printed chart of color combinations of primary Yellow, Magenta, Cyan, and Black inks and PMS (Pantone Matching System) ink color books. Note that the colors will vary slightly depending on the paper color to be printed on and the coated or non-coated paper reflective properties.
3. Use Web Design Elements Judiciously
It is easy to overuse web design elements on a page. Refer to how your top competitors use elements on their pages and decide how they will look on your website (and if they will be used):
- buttons
- boxes (box borders, box backgrounds, border-radius, & shadow)
- dividers
- forms
- and many more!
Experiment using online tools to determine how the buttons should look, such as CSS Button Creator or CSS Button Generator: Create HTML and CSS Button Styles.
If building an E-commerce website, use two accent button colors: one for products and another for informational buttons such as Calls to Action. See how easy the text is to read with each color chosen. Remember that a light or pastel color on a white background is not easy to read. Likewise, a dark color graphic or element set in a dark or black background is equally difficult to read.
When dealing with elements that have an active or hover state, we recommend using monochromatic colors. Use an online tool like Paletton or ColorHexa to help you select the best colors.
4. Create a Visual Sitemap
There are three types of sitemaps that you may already be familiar with:
- Visual sitemaps, which are ideal for planning, are used by the web designer to eliminate unnecessary pages and focus on the navigation of a website.
- XML sitemaps contain URLs to all of the individual pages and allow search engines to easily crawl an entire website and index each page so that it appears in search engine results.
- HTML sitemaps are for the user experience, helping website visitors and search engine crawler-bots to find web pages within a website.
You’ll want to create a visual sitemap of the existing website pages during the design process, where you can include new information architecture, content strategy, and build customer personas. Sitemaps help designers organize the pages into their most efficient use so that the user experience is optimal. If you aren’t redesigning a website, you will need to organize your new content into pages that you can then add to your visual sitemap.
There are several online visual sitemap tools that you can use:
5. Build a Website Wireframe Before Creating the Comprehensive Layout
A Website Wireframe will help visualize the layout of the website much like designing the layout of a home with where to place furniture and fixtures in each room of the floor plan. It is a blueprint of a web page that describes the content, layout, and desired behavior, neat, clean, and fast.
A good website wireframe can show how pages relate to each other and how to navigate between a series of mockups with clickable components, so you can experiment with them until you get the desired experience.
Before computers, a visual was crudely drawn on paper with a pencil and usually underwent many variations (a square box indicating an image goes here, a few horizontal lines representing a title there, some more columns of lines indicating paragraphs of copy down here, etc.) before a final drawing was approved.
A wireframe uses basic boxes, lines, and other shapes to create an outline of the functional parts of a web page without wasting time creating an intricate, refined design like the comprehensive layout.
A wireframe usually doesn’t include any styling, color, fonts, or graphics to influence design ideas. Images are represented with a box with an X through them that simply signifies an image of some sort will be planned for that specific area.
There are several online wireframe tools such as Moqups and Mockingbird. But before you begin wireframing you should have some meetings and brainstorming sessions to discuss business requirements and user needs with other stakeholders. Your team should come prepared with research: analytics data, surveys, etc.
Text copy of the page can be placeholder copy (Lorem Ipsum) or canned copy like generic calls to action such as “sign up” or “buy.” If you find that generic copy doesn’t do your vision justice, you can replace your initial placeholder text with more detailed copy, especially if that copy takes up more space, affecting the layout and other elements on the page.
Question whether the page fulfills its intended goal adequately. Is it communicating what you want?
Wireframes will usually contain some or all of these elements:
- Company logo
- Navigation: upper navigation bar, sub-navigation, sidebars, and breadcrumbs
- Search field
- Page title
- Headings and subheadings
- Body copy
- Call to action (CTA)
- Buttons
- Footer navigation and copyright information
Once the wireframe is finished, it can be given to the web designer and/or graphic designer to create the comp (comprehensive layout), which is a visual representation of how the website will look. Web development can begin after the comp is approved and all parties are satisfied with the new web design.
Final Thoughts: 5 Tips for Better WordPress Web Design
No doubt there are things you like about competing websites and you may want certain elements or styles in your website design. Planning is paramount for better WordPress web design. Even when you believe you have everything the way you want it, you may discover something else you missed, or that appeals to you more after having slept on it a day or two.
Use a technique that advertising agencies have done for decades. Top industry creatives have taken magazine ads they like, tearing them out of publications and placing them into scrapbooks to refer to later.
Take the time to copy the URLs of other sites and specify things you like; it is more than worth the effort and downtime to get what you want your site to look like and how it functions. If it is working for competitors there is no reason it won’t work for you, too!
Need help? Our WordPress Web Design Service is the perfect starting point for small to medium size businesses. Call us at 602-633-4758 for a free consultation.
Nowadays, it is very essential to have a nice-looking and user-friendly website. May new person doesn’t know about it and you explained it in a very manner way. We are also in this business and always try to give the best services to our clients.