Components of Designing for the Web

by Melissa Mision

Design

web design

With so much focus on the various components necessary to

construct a website

, details can easily be missed.

For example—the preview, or the “brief snapshot” of what your website is all about. When people come across your website on Google search before clicking onto the URL, they’re introduced to its meta description—a summary of what your website encompasses.

When coding a website, we can manipulate that description with this snippet:

<meta name=”description” content=”Web description here.”>

For websites built with Wordpress, the process is cut and dried—it’s simply listed as the “meta description” field. Formatting this description is crucial to driving traffic to your site— you want this section to be concise but also informative, so it drives users to access your website.

Additionally, a bit of code that goes directly under the meta name for the description in the <head /> tags is the <meta name=”keywords” content=”Key words go in here”>.

The “keywords that go in here” should be the keywords that best describe your website and what it does, or who or it serves, in particular. Keywords are what helps convey the content of your website to search engines (i.e. Google) and enables to find your website after end users enter in specific keywords to subjects they’re looking for. If the wrong keywords are identified in your meta data, you will attract the wrong target audience—and that doesn’t benefit anyone!

There are multiple ways for people to find your site. Beyond search engines, another path is through social media channels.

For social channels, formatting the description and preview image to your website correctly is critical. Why would you spend the time to construct a perfect website, and then blow off how its preview displays for social channels for your target audience? It’s akin to building the most efficient car possible, but then forgetting that the doors to get into that car need to open. It looks great, sounds great, but access is difficult (or impossible). As a result, your users will not open it.

If it still doesn’t seem like formatting your website’s preview for social channels is that important, here’s another analogy— there’s an event listed on your website coming up that’s driven a high volume of traffic to your site. As a result, a user has tried to share it on their personal social media platform. That’s great—but instead of getting more shares and recognition from that user sharing it to their audience, it goes nowhere.

This scenario results when that one user shares your site’s promoted event, but it’s not formatted properly for that social channel. People breeze by the post on their newsfeed because it is lacking a preview image, the preview image is distorted or unrelated, and/or there’s no description highlighting the specifics of the event or who’s sponsoring it. When you spend so much time crafting a website to attract business, give the same amount of attention to how your brand is represented on social channels.

Taking all of this into account, is your website properly set up for the various social media channels? If not, what’s holding you back?

Pushing Boundaries & Buttons

With so many components that go into making a website, it can be easy to overlook some of the most important components that make your website stand out against others in this digital age. From personas, information architecture, content and design, to SEO optimization, a website really can act as a portfolio of your business’ unique skillsets and processes.

With so many components being blended together, who would have thought that by simply styling the buttons on your website in a clever way, it would help your site stand out? The attention is in the details, and in this case, the buttons. You can have the best content possible, but if it’s styled like every other web page out there, it’s not going to stand out at all.

For visual example, which of these button styles looks more engaging?

It’s a trick question, because aside from the unattractive button style of the first option, the other buttons all work well. But they all work well for different industries and purposes.

The second, third and fourth button styles work well for corporate sites. The fourth, sixth, seventh and eighth buttons work well for industries like retail and/or landing pages with a button coercing users to click on it. You may notice some of these buttons’ edges range from curved to straight edged. This is done through manipulating the border-radius in the Cascading Style Sheets ( CSS for short) website coding. It’s a great way to stylize and help your buttons stand out. These are just some examples of button styles and colors for them—the horizon is really unlimited for ways to style and animate buttons.

Some reasons why the first button style is ineffective—the button text is utilizing a serif font, versus a sans-serif font—most users are used to seeing a sans-serif font for button styles, as it is easier to read at a glance. You can definitely utilize a serif font, but you want to do so with caution. Additionally, the color combination makes it difficult to read the text on the button, and the drop shadow being applied makes it look dated.

Would you as a user personally want to click that button, or would you be worried you’d get a virus from doing so? The first thing your website should establish to your target audience is a sense of security and trust, and without properly styled buttons, it’ll be hard to convey that.

By the way, all this information about button style applies to designing for digital advertising, as well!

RELATED:
BRANDING & CORPORATE IDENTITY: USING CORRECT COLORS

Contact Me Forms

Contact Me forms are a great way to drive your target audience toward becoming potential clients or obtaining information crucial to building your business. However, it serves as a double-edged sword, in that a poorly conceptualized form can have your user leaving the site faster than they clicked into it. There are a few factors into building a successful Contact Me form, which varies, depending on what industry they are directed toward, and who those forms are intended to serve.

The fastest way to have a user leave your site is to have too many required steps for them to fill out on an online form. In the fast-paced and “instant gratification” society we live in, people do not want to spend unnecessary time filling out a form that they may already feel wary of filling out in the first place.

To Opt In, Or Opt Out—That Is The Question

Because of the history of misuse of people’s personal information on the web, most forms that request a user’s information to opt into a service or subscribe to something, are going to have to have some sort of verbiage to address security concerns (i.e., a “what we are going to do with your information”) or an “opt in” or “opt out “feature to subscribe to certain things.

After addressing security concerns, the layout and “look and feel” of the page has to be considered, in order to get users to fill out the Contact Me form and/or opt in. There are many ways to phrase your questions—do you want the questions to appear so the user has to focus on one question at a time before proceeding? These types of forms are best for opt ins that have minimal information requests. It’s best to limit the amount of questions in this format, because not many users want to, or will click through a lot of questions one at a time. This style of form may not be preferable for business users who are on the clock and need to quickly get through what information they need to fill out.

There are other more straight-forward and simple design possibilities ,such as the example here, which is modern, well designed and straight to the point.

In the next example, the decision on whether to proceed to the “Contact Me” form is left up to the user. If they want to contact the company directly, the information is readily available. If they’d like to submit a form online, there’s a hyperlink allowing them to do so. This is great to address two types of users—the “I need the info right now” folks, and the “I want more info first” individuals.

The next example is designed in a slightly different way. Instead of a hyperlink dropping you down to a contact form, the form is in-line for immediate accessibility.

Contact Me forms may seem like an afterthought of any website design, but they’re a large part for why the website was created to begin with. Your website is built to help drive traffic, and to convert those visitors to loyal customers.

So, considering this is one of the most important areas on your website, how much thought initially went into its creation? Is your Contact Me form working, or do you even have one?