web design guide

The Beginner’s Guide To Website Design

Whether it’s your first time taking on a web design project or it’s been a while since you last worked on your site, this guide can take you from feeling like a rookie to a rockstar.

This guide packs a ton of great information into a straightforward, easy to consume format, including: A glossary of commonly used web design terms, how to know when it’s time for a redesign, top to-do’s before starting a web design project, web design trends to keep an eye on, what to look for in an agency partnership.

Getting started is the hardest part, so don’t delay any longer.

How to Know When it’s Time to Redesign your Website

Not sure if your website is ready for a redesign? Here are some things to consider.
  

Website Foundational Elements

If your site looks old fashioned, if the layout is overcrowded, or if information is hard to find, people are going to click away after just a glance. Take a look at your website from the point of view of a first-time visitor. Does it offer the following basics?

  • Easy navigation
  • User-friendly layout
  • Visually pleasing graphic Design
  • Quality content

These elements make up the foundation of a good website. If you are not confident about the items above, it might be time to consider a redesign.
  

Lead Conversion
Your website should be one of your most-effective lead generation tools. Are people signing up as subscribers to your newsletter or blog? Are you generating donations via your website? Is your website a good source of new customers or volunteers? If visitors are not being converted to leads, your site is probably missing important functionality.
  

Load Time
If your website has a long load time, website visitors are likely to click away and seek another option. Online, a delay creates the impression that something is wrong. And, let’s face it, the Internet has created an expectation of instant gratification. If it takes more than a few seconds for a website page to load, an update is needed.
  

Browser Options and Mobile Use
Statistics show that more than 80% of Internet users in the United States are browsing on mobile devices. Depending on how long ago your site was designed, it might not function well in newer browsers or on smartphones, tablets, or voice-activated devices. An update can ensure that your site is fully optimized for the current usage habits of your customers, donors, students, members, and fans.
  

Search Results
Search engine optimization (SEO) is another key element of modern website design. Fewer than 10% of people look beyond the first page when conducting a Google search. In fact, most don’t look past the first two or three results. If your website is not designed and written for SEO, it is unlikely that your organization will ever appear near the top of search results.
  

Social Media Links
Links to social media on your website should be displayed prominently. More internet users are finding businesses through social media, and more businesses are incorporating social media into their marketing strategy. If your social efforts and website strategy cannot easily be aligned, it may be time to redesign your site.

Top 10 To-Do’s Before Starting A Web Design Project

There are many things to consider when designing or redesigning a website. Here’s our Top 10.
  

1. Confirm purpose and target audience.
What do you want to accomplish with your website? For example, are you trying to promote a brand, sell a product, build a donor base? Who is your target audience and what will they need from your site? What will disappoint them? What will delight them? These are the types of the questions you should be asking very early in the process, and the answers should drive website strategy, functionality, and content.
  

2. Research other sites that you like.
Existing websites are a great basis for contrast and comparison. Before starting your site, take a look around. What do you find appealing about websites? Why do you prefer one over another? Is it graphic design? User experience? An app or function? The writing style? Gather inspiration from other websites, especially those in your industry, to discover trends, see what’s possible, and learn what you like (and don’t like). Keep track of the sites you visit and start a wish list for your own site.
  

3. Set a timeline.
Don’t underestimate the time it takes to design or redesign a website. It’s a big job. Your timeline should include key check points and steps, not just a launch date. As you consider timing, build in flexibility and make sure that your expectations are realistic. If you’re not sure how long a website will take, talk to an expert. Lastly, before the project begins, ensure that you have timeline buy-in from all involved, including the people you report to.

4. Showcase your brand.
As with all branding, it’s important to be recognizable and tell a consistent story on the internet. Consider branding early in the conceptualization of your new site. You’ll want to coordinate with any marketing you are already doing and, when any page of your website loads, a website visitor should recognize you immediately. Make sure your logo is prominent and clear.
  

5. Stay flexible. Change is inevitable.
Technology changes. Trends shift. So, too, the needs and wants of your customers. Make sure that you are building flexibility into the architecture of your site. Then, work in a mode of continuous improvement. Pay attention to changes. Get feedback. Revisit and update your website strategy regularly. Analyze data. Make adjustments. Add new functionality.
  

6. Content, content, content!
Website content drives search engine optimization (SEO). Good content brings people to your site. Great content brings them back. Develop your content strategy with your target audience in mind. Be clear, intentional, and consistent. Test alternative content to compare responses. Check to see if your audience is receiving the messages you intend to send them. Plan for functionality that allows you to update content often. Fresh content gives your audience reasons to pay attention to your organization over time, helping you nurture leads and build relationships.
  

7. Pay attention to search engine optimization (SEO).
SEO is a vital tool. When someone does a Google search with keywords that describe your organization, you want to show up at the top of that search page. Google’s algorithms search for the most relevant content, based on both short and long tail keywords and their prevalence on your site, including URL, alt tags, meta tags, and page titles. The more attention you give to your SEO efforts in the website design stage, the better your site will perform in searches.
  

8. Invest in high-quality images.
Humans are visual creatures. The brain will process images almost instantaneously, and a person will begin to form an opinion of your website before reading a single word. Make sure that all imagery looks professional, supports written content, and fits into the graphic design of your site. If you are going to develop your own imagery, make sure it looks good on any device and on any screen. Better yet, before starting your web design project, consider budget for stock imagery and/or professional support (photographer, illustrator, graphic designer).
  

9. Always include a call to action.
Think about what it is that you want people to do after they’ve reached your site. How can they get in touch with you? How do you begin to turn a website visit into a valued business relationship? On websites, it’s done through a call to action (CTA). The most basic type is a “contact us” button, but you can tailor CTAs to the user experience. There are many ways to encourage next steps (e.g., blog or email subscribe, downloads, contests). Ideally, your website should include at least one CTA per site page.
  

10. Post about your business.
Many people will discover you and connect with your website via social media platforms such as Facebook, Twitter, and Instagram. Incorporate social media into your website design to turn social media sites into powerful marketing assets that help you expand reach, connect on a deeper level, and build fandom. Focus a substantial portion of your website design energy on social media, and don’t forget to include ways to track engagement on the platforms you decide to use.

Website Design Tips To Consider In The Near Future

Here are some notable trends in current website design.

 

Minimalize your homepage.
Website design is moving toward more simplistic home page layouts. For example, the top half of your first screen might only display a few words. Such a bold, minimalized look can be an effective way to gain attention. Then, more detailed information can be placed below the fold.
  

Simplify navigation.
Include fewer items in your main navigation, avoid over-linking throughout your site, and eliminate sidebars to reduce clutter and simplify the user experience.
  

Try some parallax scrolling.
Parallax scrolling is a design element that creates the illusion of depth on a web page. It is accomplished by having multiple layers with varying scroll speeds. Done well, it can produce a cool, 3D effect and encourage website visitors to scroll farther.
  

Design for mobile users.
Truly, this has become less of a trend and more of a must-do. Web page layouts should be designed to look their best on smaller screens for users on smartphones and tablets.
  

Highlight social media links.
Prominently display links to the social platforms you use. Also, incorporate share buttons that make it as easy as possible for users to post or forward your content via social media.
  

Use videos to tell your story.
Videos are the most popular media tool on the Internet. That make it possible to tell a deeper story, share an amazing event, cause goosebumps, and bring a message to life in a way that words alone cannot.
  

Consider custom typography.
Typography (font design) can be a memorable website element that promotes a unique, memorable look. It can help your site stand out among popular themes and look-alike formats. Explore a variety of fonts or consider have a custom font created for your site.

Next Steps

This guide shares a few of the basic things to consider as you explore website design options. Every organization has unique goals, and every website will bring its own set of requirements and challenges. As you begin, look around, get input from many people, and brainstorm your wish list before settling down to budget and strategize. If you would like an objective opinion, we would be happy to complete a free site audit of your current website and share insights from our team of professionals. If you decide to enlist the services of an agency for your website, consider these factors.

Digital marketing experience
Look for an agency that has plenty of current experience with website design and website development along with the capability to build your site as the center of a comprehensive online user experience.

Compatibility
In addition to finding people you enjoy working with, consider the compatibility of your business goals and mission. Does the agency have similar values to your own? Will your success matter to them?

Business size
It is generally best to be one of the bigger fish in an agency’s pond. You want a group that is big enough to handle your business but small enough that your business will always be a priority.

Industry expertise
Talk to agencies that have extensive experience in your industry or similar industries. A strong understanding of your target audience and how you do business is vital to a fast start and an effective long-term strategy.

 

DuBose Web Group implements progressive website design and inbound marketing solutions. We offer the services you’d expect from a top digital marketing agency, and we have the expertise to help you succeed. We also strive to have a positive impact that goes deeper than the bottom line. That is why we choose to work with community-focused organizations — so that, together, we can have a positive impact on the world around us.

Web Design Glossary

Alt Attribute Text
Alt (short for alternate) attribute text is used within HTML to describe an element, such as an image, that would not be recognized by search engines or blind users.

Call to Action
Sometimes abbreviated as CTA, a call to action is something on your website that instructs and encourages a user to take the next step (turning a site visitor into a lead). Examples are contact forms, download opportunities, and blog/newsletter signups.

CSS
CSS is an acronym for cascading style sheet, which is a standardized set of text tags that communicate style attributes to a web browser. CSS works in conjunction with HTML to control visual presentation (colors, fonts, graphic design).

CMS
CMS is an acronym for content management system. This might be referred to as the backend of the website. It is a password-protected interface that can be accessed to make edits and updates without needing to know programming or coding.

Drop-down Menu
Sub-navigational links that appear when you click or hover over main navigational links. Drop-down menus can also be used other places on a website to provide choices; for example, in a contact form.

Exit Page
You might see this term in website analytics. It refers to the last page a website visitor looked at before leaving the site.

Flyout Navigation
Flyout navigation refers to a website menu that appears containing multiple links. (You’ll often see these on department store websites, displaying each store department.)

Header
This is the top-most section of each web page. Generally, this area is consistently designed on every page and includes key elements like your organization’s name and logo and navigational links to the rest of the site.

Hero
In web parlance, the hero is the main image on a home page or landing page.

HTML
HTML is an acronym for hypertext markup language, which is a standardized set of text tags that communicates structural attributes to a web browser. The tags are set off within brackets. For example, the bracketed p and /p in this definition would be used to indicate the beginning and the end of a paragraph.

Image Optimization
Imagery can make or break a website. Images need to be large enough to look good on a variety of screens but not so large that they slow down page load time. Image optimization refers to sizing a graphic element to make it ideal for web use.

Landing Page
A landing page is a stand-alone website page created for a promotion or advertisement. It is the page a person would land on after clicking on an ad. Sometimes, landing page is also used to refer to main navigational pages, where you land after clicking on a link in a site’s main navigation.

Link
On your site, any element (graphics or words) can be turned into a clickable link that directs to a new page/section.

Navigation
On a website, navigation refers to how a person gets around on the site. Main navigation (primary subject menu in your header), sub-navigation (secondary menus), drop down menus, and buttons are all part of navigation.

PHP
PHP originated as an acronym for personal home page but now stands for hypertext preprocessor. PHP is a programming language that works within HTML to insert dynamic data (e.g., date and time) into a web page.

Promo Area
A section of your website that is changed frequently. This helps keep a site more dynamic and is generally used for things like events, announcements, giveaways, polls, or other timely information.

Rollover
This is an effect that appears when the website user scrolls over an element. For example, when you scroll over text and it changes color, that generally indicates that the text is clickable.

Search Bar
A search bar is usually represented by a magnifying glass icon with a blank space in which website visitors can type a query. Generally, a website search bar offers results from within your site only.

SEO
SEO is an acronym for search engine optimization. It encompasses a variety of activities that can be done to improve your website’s position in search results on sites such as Google, Yahoo, or Bing.

Title Attribute
This is pop-up text used as a title for a graphic element, such as an image, that appears when a user scrolls over it.

UI
UI is an acronym for user interface, which encompasses anything and everything that allows a user to interact with your website.

UX
UX stands for user experience, which encompasses more than just UI (user interface). It also includes user-friendliness, functionality, and the emotions that your site produces in your target audience

Wireframe
Think of a wireframe as the basic blueprint for your website. It is usually a set of black and white drawings with no graphic design (no color, no imagery, no text). It is a good first step in the process as it helps you focus on the elements required rather than the style.

so what’s next?

Ready to start a project or really curious about our process? Drop us a note or give us a call; we’re happy to answer all your questions.

Work With Us