Rauch Digital - Web Principals Blog Hero
Michael Rauch

Michael Rauch

Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on print

Primary Elements of Web Design

The Primary Elements of Web Design take shape via eight key ingredients: develop a strategy, define your audience, use intuition, leverage whitespace, keep out clutter, adhere to best practice, consistency is key, & clear call to action. Learn more about how these come to life...

The emergence of social media and it’s intersection with business has been nothing short of remarkable. In a relatively short amount of time, platforms like Facebook, Instagram, YouTube, LinkedIn & Twitter have redefined how businesses market to the consumer. With this emergence some have begun to speculate that an organization can do away with their transitional website.

But when we dive further into the consumer behavior, according to a Stanford University Web Credibility Research, 75% of consumers judge a company’s credibility based on their website. So stop to think about your own behaviors. If you are looking to work with a new firm or buy a new product, would you expect them to have a solid website?

Well this is all well and good, but there is a difference between wanting a good website and having one. So let’s dive in to Rauch Digital’s perspective on the primary elements of web design.

Rauch Digital’s Primary Web Design Elements

  • Develop a Strategy
  • Define your Audience
  • Use Intuition
  • Leverage Whitespace
  • Keep out clutter
  • Adhere to best practice
  • Consistency is key
  • Clear Call to Action
Rauch Digital - Primary Elements of Web Design

Develop a Strategy

Understanding the different needs of a brochure site, eCommerce site or Catalog site will start your project off right. If you are looking to tell a story or provide info about your brand, using a brochure website design is your best path. Utilizing a strong layout on your homepage, beginning with a hero image, headline, subheading and CTA buttons is a great start. After the hero image, showcase your services with icons and short text. Finish it up with a clear Call to Action (more on that later).

In contrast, when you are creating an eCommerce site (selling your products) or a catalog site (similar to eCommerce without the purchasing infrastructure) placing the ability for a user to view featured products immediately when landing on the home page is key. Also ensuring your search functionality, and your categorization is logical are fundamental elements to creating a great user experience.

Define your Audience

Discovering how your customers connect with your brand will create a site that not only attracts but engages. Is your product or service very technical? Are you marketing Business to Business (B2B)? Or Business to Consumer (B2C)?

Creating definition of your audience will ensure a clear, concise, but also engaging message to your users. Spending the time up front to create user personas is a great way to validate alignment of your message to your intended consumer.

Use Intuition

Attempt to lead the customer in the direction you’d like them to take by placing key content on the top of the page. If a user has to search around your site to find what they are looking for, it is likely you will lose them. Users stay on a page for an average of only 15 seconds. Therefore keeping key elements at the top of the page is crucial.

Leverage Whitespace

The human eye is adept to focusing on individual elements & users are more comfortable now than ever with scrolling. Gone are the days of cramming all your content in small areas. Utilizing margins and padding around elements creates guidance to the users eyes when they consume the content on your site.

Also with the new mobile friendly web, the user is adept to scrolling to find content. Therefore when designing for your mobile experience, layout your content vertically with space around elements and allow the user to consume while they scroll. Don’t worry about a “long” listing of your content on mobile.

Keep out clutter

Crisp, concise messaging will attract search engines & keep customers engaged, draw them in with only what they need. When creating your key content, go from two sentences to one if you can still convey your message. Also moving to the model of one excellent hero image, instead of the multi-slider will better connect with your end users.

Another tip, unless you are a new company or your “story” differentiates you, keep that info to secondary pages instead of a section on the homepage. The users who want to consume this info will seek out and find it. Those that see it on the homepage will likely not engage with it.

Adhere to best practice

Page speed is an increasingly important factor in retaining web traffic & the first line of defense is adhering to development standards. HTML and CSS lay out guidelines for best practices. Likewise, Google Webmaster Tools (when setup) will crawl your site content and inform you of any issues that are identified.

On top of following coding standards, ensure simple items such as image re-sizing is utilized when possible. Another best practice is to use tools like SEO Site Checkup or the LightHouse extension for Google Chrome. These help check your site against utilization of best practices.

Consistency is key

Consistent header and footer, the same padding and margin around similar elements on different pages – all goes a long way. Your viewers want to know exactly where to go, on each page to find things such as navigation. Similarly when the user starts on your about page, then goes to your contact page a consistent content width helps with continuity.

An estimated 25% of web traffic viewing occurs on a browser with a resolution of 1366 x 768. Another 20% on a browser with a resolution of 1920 x 1080. With these items in mind, a recommendation of a range between 600 to 900 pixels is optimal. Factors such as letter spacing, line height and the type of content (blog vs catalog vs brochure) can all adjust this range.

Clear Call to Action

If you are lucky enough to have a user stay with you past the avg. 15 seconds, make it clear what action you’d like them to take. If my readers are still reading, hopefully they will take this last peice of advice. Make it clear at every step of page consumption what you want the user to do.

At some places on a website, you will want the user to fill out a contact form. Other places you may simply want them to head to another page for more information. The key is, don’t force the user to think about what action they should take, if you were lucky enough to hook them in.

Summary

My hope is that this lays a framework to evaluate your site. It is true, not every site will hit each of these criteria. However, if you have questions about how to leverage these techniques on your site, send a message and ask Rauch Digital for a little help.

Share this post

Share on facebook
Share on twitter
Share on linkedin
Share on print
Share on email

About the Author

Michael Rauch

Scrum Master by day, digital marketer by night.  My hope is that I can share my experiences and give readers a different perspective on the topics I cover.  I am constantly learning and trying to improve, so come along for the journey!

Rauch Digital Marketing - About Page