“A great SITE design is only as great as the time it takes for a visitor to get to the content they want.” – Patrick Hess (me)
A website in 2021 should be much easier to create with the multitude of simple point-and-click tools available on the internet for beginners. While these tools make the coding of a website less a burden, they may not provide the flexibility to create a unique visual experience for the visitor. On one hand, template based software for creating a website already takes into consideration the habits and common experiences of site visitors as well as the device they use to view the site and the most used browsers. This alone may be a large advantage and save some frustration for visitors who are used to seeing sites have layouts that are commonly experienced during web visitations. However, it may also leave them feeling less than impressed if your product or service appears in a cookie-cutter format without some visual stimulation to help them remember you when the time comes to possibly buy a product or service like yours. This is why form and function is extremely important to consider when creating a positive user experience.
For reference, website graphic design is referred to as the User Experience (UX) of a website. The website design industry has many titles for employees that incorporate these kinds of acronyms, but for the sake of this post, let’s just call them a website graphic designer. This role’s task is typically intertwined with another important role’s task of designing the User Interface (UI). While both may seem to be saying the same thing, there is a difference. While the UI is more in-depth involving navigation, overall content, etc. the UX is more about the aesthetic of how the UI is achieved. Imagine the UI is the handlebars, frame, wheels and seat of a bike and the UX is the reaction a person has when being able to ride the bike.
Knowing these two website graphic design aspects (UX and UI) can make a difference in how you design your own site or how to help an outsourced web designer follow your goals.
– 1 –
DOES THE DESIGN SUPPORT THE BRAND IMAGE AND PURPOSE OF THE COMPANY?
In order to fairly and intelligently answer this, let me identify what I tell a customer is the goal of a brand. Simply, a brand is the visual, textual, and idealogical representation of the PURPOSE of a company. It’s not just a color palette and font or logo, it’s more about the philosophy of the company. It ultimately results in the company’s reputation in the marketplace. It may be hard to equate a visual design to that broad of a topic, but in general, a company will want to keep their imaging (anything visual presented publicly) consistent across all their advertisements and publications, etc. Using familiar photos, logos, colors, phrases and monikers, product images, staff members, facilities, etc. are all ways to keep the design familiar to the brand.
I want to be clear that at times a company may want their website graphic design to have a campaign concept which isn’t long-term, but may be more short term for a specified season or era. Maybe the site has a seasonal motif like Google does for certain holidays by modifying their logo to appear participatory in the occasion. Perhaps the site needs a facelift during new product launches or to modernize layouts to be more friendly for mobile devices. It isn’t a handcuff limitation to be more creative, but more of a litmus to ensure you’re not losing your identity in a way that return visitors are lost on how to find what they’ve become accustomed to locating with ease in the past. We’ll talk more about familiarity further in this post.
“Design adds value faster than it adds costs.” – Joel Spolsky, creator of Trello
– 2 –
DOES THE INITIAL PAGE LOAD QUICKLY AND PRESENT THE MOST IMPORTANT CONTENT ABOVE THE FOLD?
Some sites are very elegant in their appearance and some look as though the website graphic design person was panicking to cram everything into a very busy layout. Balance of where to place the most important content and ensuring a fast loading time is very important.
SITE LOAD TIME
This is a key factor when a person is tasked with website graphic design. It’s such a delicate balance between being too generic and having very little eye-candy to make the visitor sweet on your company, and the search-engine scrutiny that determines whether your site is worthy of a higher organic ranking with load times as an important index. Elements like graphics and images are the easiest to identify as site-loading challenges. However, unseen code-only files needed to load the page (like CSS and Java) can also hinder site load times. What’s more, a lot of clever plugins creating cool visual effects on WordPress sites, for example, may need to be diverse enough for broad audience use and can contain a lot of extra lines of code that your particular site may never really need for the visual effect you’re creating. Compound that by styling with CSS (fonts, colors, lines, etc.) and while significantly faster than jpeg or gif file sizes, CSS sheets and Java scripts can also make a hit on reasonable site load times.
I recall when first designing websites in the late 90s and early 2000s, FLASH was the visual euphoria all website graphic design staff wanted to master. It was certainly faster than animated gifs in some instances but definitely created overhead for load times and required the visitor to have the plugin on their browser. It was always fun to see how Flash sites used visual vector images to create stunning UX delivering the content, but the tradeoff of site speed was always a factor in that balance. Nothing has changed about the reality of wanting to create a visually stimulating site design, except bandwidth speeds have increased so much that load times are almost non-issues for basic jpeg and png images nowadays. As an avid user of Dreamweaver for years, there was a little dropdown box that allowed me to see how long the page I designed would take to load at different connect speeds. Yes… even the old 56k dial-up speed. The rule at that time was less than 8 seconds at 56k was optimal. The rule now is less than 2 seconds at high-bandwidth is optimal. Tremendously faster, but still difficult to achieve with the weight of unseen scripts and style sheets also eating up load times.
As I’m typing this blog, the cloud based software I’m using takes about 8 seconds to just load the editor and I’m averaging about 300mb per sec connect speed. So speed can be relative cause the editor is just a simple text box like MS Word or Google Docs. The main issue with load time is primarily with mobile browsers and possible slow areas where fast data streams may not be consistent. If your primary target demographic is in an area where 4G LTE or 5G LTE is widely accessible, your site design may not be as hindered visually since the load times will be easier to access. However, the down side is that if a user is accustomed to news sites and larger traffic sites that have budgets to invest in much beefier code streamlining, any delay past 3-5 seconds with your site loading can become problematic and frustrate the visitor. Hence the all important balance. Google analytics, for example, provides you bounce rates which essentially advise if people stuck around to let your site load. A high bounce rate may indicate your page load times are too long even though the content layout and design may be worth the wait.
ABOVE THE FOLD
Referring to the old print layout reference for a newspaper which traditionally folded in half, this principle is transferrable to website graphic design layout in terms of the initial screen load before you start scrolling vertically. This is the critical first impression of the visual but also for less patient visitors, the one place they will want to find either easy to see navigation or some callout box of what you deem most important about your product or service being offered. Finding a way to leverage that all important real-estate of the initial page above the fold is helpful in increasing visitor conversion rates (sales).
Almost all popular websites use a slideshow on the landing page of their sight because it allows the visitor to see multiple important content callouts in the same area above the fold. If each has a quick LEARN MORE type button to let them click to a fuller presentation of information, it will help them save time. The slideshow may also be designed to require significant load times if the visuals include a video automatically playing or being used as a background. Keep in mind that every element on the page has to preload or load while the visitor’s browser is trying to quickly display the content. So while a print graphic design role may have the freedom to put whatever they want visually to stimulate the reader to learn about your product or service, the luxury of that is not possible when considering multiple devices like a desktop, tablet or mobile device being used. Real estate on each is dramatically different and what may work on a desktop visually may not perform or appear the same on a mobile device. So a website graphic design team member may need to think in a different approach in order to make a user experience (UX) more appealing.
“While content is still king and text-copy is SEO critical, a user wants to quickly find information. Long fluff filled paragraphs aren’t necessarily good for the UX.” – Patrick Hess
– 3 –
IS THERE A CONSISTENT THEME IN ASSETS BEING USED?
Some website graphic design uses clever fonts and a lot of nifty effects to make the site seem cool. However, the K.I.S.S. approach is still as applicable as it’s ever been. When navigating, are the fonts in the <H> tags consistent. Is the usage of <H> tags consistent and in proper SEO hierarchy? Colors should be restricted to that which supports your brand but also which is central to conveying the relative content on a particular area of a page. This seems basic, but having a single or at most, two fonts being used can keep the design clean and consistent. The colors within design should always be within the theme palette choices.
One of the pet-peeves I come across are websites which have decided to be unnecessarily clever with their navigation terms. Instead of using commonly understood words that visitors likely know from being web users for years, some website graphic design and UI personnel choose to introduce use synonyms just to be different. Instead of the easy to understand ABOUT US page, they may use COMPANY INFO or some other similar term. While there’s nothing wrong with using synonyms in theory, consistency with brand AND consistency with user’s internet experience overall plays into consideration. If a familiar term can be used, why not use it and be consistent?
There are some common layout features that all websites tend to use on each page. A header and footer are nearly always consistent in layouts. Whether the header or footer are sticky, fixed or relative to content is one of the variables some site designs include. But the commonality of a header with a navigation bar and likely quick links to social media or company contact information is consistent with most website designs. Replicating the navigation in the footer is very common and a good practice for UX. Visitors are likely to recognize the end of a page’s content when the footer layout seems familiar and helps them realize to stop scrolling. Again, some of this is common sense, but you’d be surprised how some sites abandon intuition in their design and some site visitors can become frustrated to find what they’re looking for with relative ease. I’ve been to major corporate sites and struggled to find very common content that most sites would have because they decided to bury it in layers of menus. Think of the frustration of simply finding a phone number for customer service. This seems to be a very common goal for some visitors but may not be easily achievable because the company chose to create pages of FAQs to avoid allowing the user to simply contact them by phone. It may be a poorer example compared to some other content layout decisions, but this type common sense should be considered in having a consistent design.
“Beauty is in the eye of the beholder, but an experience is what they will remember after the emotion fades.” – Patrick Hess
– 4 –
WHO IS THE VISITOR TO THE SITE?
It’s a simple question but sometimes hard to remember when designing. When I work with a new client and we talk about branding or marketing, I try to remind them that the advertisement or logo or website design is supposed to be attractive to the targeted consumer. Many business owners, especially entrepreneurs who are attached to their business like it’s their child, find it hard to separate the visual imaging from their own personal tastes. Sometimes it’s not about what pleases the company staff or personnel, but what pleases the consumer they are trying to reach. This can make the job of a website graphic design person quite difficult. They are impassioned by the research of competitor sites or the latest design trends of websites overall. They themselves spend a great deal of time knowing their field and what’s working and not working in the areas of UX and UI. Then a well-meaning management member or owner likes to put their fingerprints into the visuals of the site.
I had a client who hired my company to design a new logo for them. The one they had built the company around was very outdated in design (think bevels and drop-shadow outdated) and they felt it needed to be updated to refresh their image in an industry that was quite old and many companies were shutting down due to foreign competition. We presented several designs using their vibrant competition’s logos and even some very large corporate logos as references. In the end, the owners were frustrated and hated all the options because they weren’t ready to truly refresh their image or brand. They were hoping to maybe have a new color of their old design but keep the bevels and drop-shadows. We did our best to not offend while explaining but in the end they decided to keep what they had. They were passionate about what they liked and wanted (which they are certainly entitled) but in the end they didn’t really consider their target consumer’s potential view point.
Age, gender, culture, geography, economic status, etc. are all important to understand when designing a website to target your preferred consumer. If they are under 30, for example, chances are they are mobile device dependent and less likely to use a desktop to check you out. If they are older and white collar executive types, desktop layout may be the main focus with mobile being secondary. So designs should cater to the intended visitor.
– 5 –
IS THERE SUFFICIENT WHITE SPACE?
Volkswagen has an infamous ad from 1959 that was a perfect example of the value of white space. Never be afraid to let the eye of the viewer skip the white space to focus on your primary content. This is a strong trait of great design if you can “think small” where less is more.
CONCLUSION
Website graphic design will always be attached to emotion and some psychology, but a good balance between creativity and intuitive interface will help your website stand tall against competition and also provide better SEO results when following a strict strategy from start to finish.
