LaunchPad's Jaron Hendrix – Web Aesthetics Developer – was recently interviewed by Elise Hacking Carr from Print + Promo Magazine. This Q and A session offers great advice for those wishing to get their business on the web.
P+P: Is there a good starting point for beginners?
JH: The best place to get started with web design is with a solid foundation in basic design principles. Learning a little about typography for the web, basic color theory and composition can go a very long way. Having good skills with popular graphic design programs such as Sketch, Adobe Photoshop, Adobe Illustrator, Affinity Designer / Photo, or the GNU Image Manipulation Program (GIMP) will help with the visual side of site design. Excellent organizational and writing skills will help with the content and information architecture.
Designers who want to delve more into the front-end development side of things should educate themselves on the three most important languages used to build websites: HTML (version 5) for markup and structure, CSS (version 3) for styling and display, and javascript for interaction. Every website you’ve ever visited has been marked up in HTML, and every website you’ve seen in this millennia has been styled using CSS. While not every page utilizes javascript, it is one of the most versatile and ubiquitous languages on the Internet.
Designers more interested in engaging with UX/UI (User Experience / User Interfaces) should instead focus on issues of HCI (Human - Computer Interaction) and basic human psychology (many universities offering HCI programs cross-list computer science and psychology courses for these degrees).
There are myriad tutorials and teaching programs available online at little to no cost that can help guide and direct beginners, as well as many online communities. Those interested should be encouraged to search them out and find the ones that work best for them and their goals, as there is no "one-size-fits-all" solution.
P+P: How can a company ensure its site effectively communicates its brand (e.g, colors, fonts, images, layout)?
JH: The best starting point for ensuring that the website for a business expresses the business' brand effectively is to implement a brand style guide, and provide it to the design team before they ever begin work on the visual aspects of the site. A good brand guide should include a listing of all typefaces, brand assets such as logos, trademarks, slogans and taglines, colors (Pantone Matching System codes are often fine, but hexadecimal values are what is most frequently used in web development, followed by RGB values then HSLA. PMS colors will require an extra step to match as closely as possible in one of the other color systems. CMYK is never used for on-screen purposes, as it relies on the subtractive model of color, while all electronic displays rely on the additive model) as well as typefaces, type sizes and so on.
The well formatted style guide should also include rules for use of the company assets (e.g., containing instructions like "Our logo should always be oriented horizontally, with a minimum of .25 inches clearance from other items in print, or 50px of clearance on consumer electronic devices."). By communicating the design language of the company's brand explicitly and ahead of time, the business makes it much easier for the designers to do their job. The business should also be aware that it is not always possible to exactly match a brand's colors, and that the colors will display differently across multiple devices.
Another major consideration is that of the typefaces used in the project. While many different typefaces are available for use at little to no costs through services such as Google Fonts or Adobe's Typekit product, it can -- and often will -- be necessary to purchases licensing for any typeface not available through one of these services, and the costs can be high, running anywhere from $50-$3,000 for a license. In these cases, it is considered appropriate to work with the designers to choose an available font that is similar to the one desired in order to manage the project's budget more efficiently.
P+P: How can a company's website provide an optimal user experience? Any tips for streamlining site navigation?
JH: One of the most important aspects of the information architecture or site structure of a website is the idea of "the scent of information." It is often unnecessary to assign a top-level navigation link (the ones immediately visible in a site's navigation when the page loads) to every section or page of the site. Instead, the content of the site should be laid out in such a way that the user can always catch the "scent" of what they are looking for, and easily progress further into the site. In the past, it has been recommended that all information contained on a website be accessible by clicking on no more than three links consecutively, but as the depth and breadth of websites has expanded, this advice has given way to simply making sure that the user always knows where they're going next.
As far as the visual aspects of site navigation, it is most effective to have all of the site's links aligned to the left of the page, near the top of the screen. Conventionally, users expect that the site's logo will link to the default view, or homepage of the site, which often eliminates the need for having a discrete "Home" link. The most important items of navigation should be furthest to the left, with "Contact" and "About" type links furthest to the right. Additionally, an "About" page should always be labelled as "About Us," or "About [Company Name]" for maximum user engagement. ( Reference: http://www.nngroup.com/articles/about-us-information-on-websites/ ). When designing responsive navigation (intended to be viewed on smaller devices), the links should never be hidden entirely behind what is called a "Hamburger Button" -- the three stacked, horizontal lines used frequently on mobile devices to denote a navigational menu. Instead, the most important links should be present in a tab bar (a horizontal list of icons and labels), with less important links hiding behind the aforementioned "hamburger button." In addition, this button has been repeatedly shown through research and user testing to perform much more effectively when it is accompanied by a text label and styled to look like a button, rather than simply being presented an icon. The most commonly recommended label is "MENU."
P+P: How important is it for a company to highlight its culture? How can a company go about doing this?
JH: Presenting a company’s story to clients and prospects as a primary “call to action” has become an increasingly popular trend. This strategy can work very well if your company’s principal business is offering solutions or services where relationships can be extremely important. These types of internet visitors may be more apt to vetting vendors for longer-term business engagements such as on-going projects and extended sales cycles. Having a clear and present company message will help solidify this for clients in this space.
If your main focus is eCommerce and online stores, relationships tend to be more fickle. It is important to remember that customers are on your site to purchase a product quickly and efficiently. In that scenario you should ensure that your customer’s primary available actions are clearly centered on finding products and placing an order with as few steps as possible. Including your company’s cultural background can still play well in this type of environment, however it should become tertiary to ensuring a smoother eCommerce process.
P+P: What are the most common mistakes that companies make during the design process? Please explain.
JH:
1. Believing that the design is the most important aspect of the site and that this should be the starting point for the project.
This is almost never the case, and the visual design process should only occur after the goals of the site have been evaluated, the end user audience identified, all necessary functionality has been scoped out, and the content of the site has been written and organized. By designing for the content, you focus on what's most important -- the things that are actually of value to your customers, and the things that actually help your site show up in search results. You wouldn't start to write the next Great American Novel by designing the cover, and you wouldn't plan your entire business by designing your office first, so why would you expect this approach to work with one of the most important, efficient and cost effective advertising and informational tools available to you?
2. Assuming that design and development is "quick," "easy," or "something that anybody -- even the boss' nephew -- can do."
Let's put ego and budget aside for a moment and state a simple fact: If you could do it yourself, in-house, cheaper and more expediently, you would. If you're working with a third party, then you've sought out a professional based on their talent and reputation, as well as the quality and value of their work. Treat them as such.
3. Forgetting that they, the client, are not the audience.
It's a hard idea to communicate, but the purpose of your website is not to make you happy. The purpose is to provide a great experience for your customers. Good developers and designers make research based decisions based on best practices and data to provide the best experience for your users, and what's most effective is not always most intuitive. If there's something you truly dislike, ask the team to explain it before you demand that they change it.
4. Insisting on automatically rotating image carousels / sliders on the homepage because you've noticed that "everybody else has one."
Research has shown time and again that these are not effective. Do they satisfy everybody in the business' desire to have their department mentioned on the homepage? Absolutely. Do users actively engage with them? Most often not. (http://www.nngroup.com/articles/auto-forwarding/)
P+P: How can a company make sure its website is easy to view on a mobile device?
JH: The process of creating websites that automatically fit their content to the size of the screen on which they are being viewed is known as "Responsive Web Design," a term coined by one of the industry's leaders, Ethan Marcotte in 2010. As more and more users utilize their mobile devices are their primary means of consuming web content, it has become commonplace to take an approach known as "mobile first design," which begins by showing how the site will appear on a mobile device -- primarily a smartphone -- and adding to this design incrementally as the size of the display is increased. Once this has been done, the design and development team's front-end developers write what are known as "Media Queries" in a styling language known as CSS (Cascading Style Sheets) which tell browsers how to display the content given a particular size display.
Think of it like this: You want to eat a meal outdoors. If you only have a small picnic basket, you only take sandwiches and drinks. If you're going tailgating, you pack a larger cooler and a grill. If you're catering an outdoor event, you set up tables, a buffet line, and provide an entire catering van full of food. The same thing applies when moving from smartphones to tablets to laptops and desktop sized displays. You progressively display more content in a more detailed manner as the space permits. It is important to consider this strategy when writing your content, and designing your site.