Do you have a rulebook when it comes to website design? There are some rules that apply to pretty much every web design project—let’s call them the “web design commandments”.
No matter how large or small the website, these rules are the foundation for good design. If you follow along with these basic guidelines, and make them part of your thinking for every project you start, you’ll avoid many of the pitfalls that designers can stumble into!
Consistent design is easy to use and understand. User engagements and actions, as well as visuals, should be similar in look and use throughout a single design.
This means that buttons are the same color and use the same hover states to help users know how to interact, headlines are the same size and use the same typeface throughout the design, and elements such as colors follow a palette that is identifiable and associated with the brand.
Other visual elements should also follow a consistent style as well with a style and usage plan for elements such as icons or photography, video or illustrations. The design should have a voice that is used for copy blocks that matches the overall aesthetic.
All of these elements of consistency contribute to overall usability, making the design as easy as possible for users to interact with.
There’s no need to cram every single element into space above the scroll. Use whitespace to establish rhythm and flow, create visual hierarchy and help users move through the design.
If the content is good, they will scroll.
And whitespace can actually help encourage that user action by pulling the eye down the screen.
Whitespace is even more important as screen sizes get smaller. Additional space around elements can help create separation and make them easier to read. (Think about how beneficial a little extra space can be when it comes to tapping buttons with ease.)
Not sure where to include whitespace in the design? Start here:
A grid is the foundation of user experience. When you design with a grid, the final website is more precise, consistent and elements are placed in an order that makes visual sense.
Grids are both horizontal and vertical, although the most well-known web design grid might be the 12 column vertical grid of columns for aligning elements.
The grid is something only you see in the design process and if you have trouble finding placements for elements or creating an organized outline, a grid can be a total life saver.
Users do things in a certain way and expect specific things from your design. In order to have as much success as possible, the design should use commonly accepted user patterns (recurring solutions to design problems) so that people know exactly how the design functions.
Common user patterns include:
UI Design Patterns has a long list of user patterns for all types of design situations.
Every element in a website design should work like every other element of the same type. These elements should also have a visual identity so that users know what they are and what they do at a glance.
There are so many user interface actions that can be built into a design that abiding by the Gestalt principle of similarity is a must. Grouping of visual elements and actions so that they are visually identifiable will help create a better overall experience for users.
You don’t have to be a master typographer, but it definitely helps.
So much of what constitutes good design is rooted in readability and legibility. And those concepts depend on how you choose and use typefaces.
When in doubt, opt for simple typeface pairs such as a serif and sans serif. Step back from the design and see if the lettering is easy to read from a distance. Then look at the lettering on a small canvas, such as a phone screen to ensure it is easy to read at a glance there as well.
Try to use type in a high-contrast environment, such as light type on a dark background or dark type on a light background, so that every word is easy to read.
Even the smallest screens can render elements and images with near pixel-perfection.
You need to consider how you will handle images, icons, and other elements so that everything renders beautifully regardless of screen size. When possible, using a vector format can be the ideal solution, which is one reason SVG is growing in popularity all the time.
If you don’t have an image that has the resolution to fit common screen sizes, don’t use it. No picture at all is better than a bad or pixelated image.
Your design should be true to your small business, information or brand and transparent in what you do. Don’t steal a design or image, don’t stuff with false keywords to drive traffic and be true to who and what your content is about.
With so much web clutter, users want to interact with designs that are authentic. Tricking users into doing something or signing up for a product or service or just misleading them about a topic or information should be against your personal code of ethics. Don’t take on projects that expect this from the design.
The web should be usable by as many people as possible. And while it might sound difficult to ensure the design is accessible, it isn’t as complicated as you might think.
Google has a great guide to website accessibility, which it defines like this:
Broadly speaking, when we say a site is accessible, we mean that the site’s content is available, and its functionality can be operated, by literally anyone. As developers, it’s easy to assume that all users can see and use a keyboard, mouse, or touchscreen, and can interact with your page content the same way you do. This can lead to an experience that works well for some people but creates issues that range from simple annoyances to show-stoppers for others.
Accessibility, then, refers to the experience of users who might be outside the narrow range of the ‘typical’ user, who might access or interact with things differently than you expect. Specifically, it concerns users who are experiencing some type of impairment or disability – and bear in mind that that experience might be non-physical or temporary.
Many of the principles of good design, such as size, contrast, and space, contribute to overall accessibility.
WebAIM has a checklist, as well as other tools, to help you determine if your design is accessible. The checklist covers four areas as they pertain to accessibility: Is the design perceivable, operable, understandable and robust?
It should pretty much go without saying in 2018, but your website must be responsive. That includes every element, from text to images to buttons to the overall framework.
Every design must work on every device. Period.
A solid set of rules can help you get into a design project faster and work more consistently. Note that none of these commandments tell you how a project should look; they are rooted in the theory of how you outline and create each website.
Do you have additional web design rules to add to these commandments? Let us know what they are on social media. Just make sure to tag Design Shack!
How many times have you heard stories of people who hired web firms to design and develop their web sites and either got substandard sites or the developer ran off with their money? Or what about the entrepreneur who “hired” his nephew/friend/daughter to design the site for free, and the results were disasterous and this small business owner didn’t feel comfortable offering much constructive criticism on a job done for free?
As a small business consultant, I’ve heard these stories so many times. And I go back and forth between feeling heartbroken and really angry on behalf of my clients, for what they endured before finally seeking help. That is why I decided to write this series of four articles on web sites for small business. Today, in the third article in this series, I’ll share with you my best tips for hiring a web design firm.
When you hire a web firm, your job as a savvy consumer is to make sure your web firm has the right components as well as the answers to several questions before you give them your hard-earned money. Here are some things to look for and questions to ask, as well as a few red flags to watch out for:
Your web design firm should be a real business. That doesn’t necessarily mean that they need a big office and overhead. What it does mean, however, is that you should probably avoid hiring your family members, friends, and “that guy you know from church” as your web developer. You need a business relationship with your web team for many reasons, including so that you can feel comfortable negotiating, providing honest and critical feedback, and being straightforward if there’s ever a time when you aren’t happy with your firm’s work.
Don’t be afraid to ask for references. You should be able to get a couple of client names and phone numbers so you can talk to real people and get a solid feel for what it’s like to work with this team.
Your web firm should have a web site — a good one. It doesn’t have to be designed in a style that you like, but generally speaking, it should have the components I talked about in my last article. Don’t let any web firm tell you that they’ve been so busy working on clients’ projects that they haven’t designed their own site. If they don’t know that a strong web site is the calling card for their business, they probably shouldn’t be designing a web site for your business.
Further, you need to see a portfolio of their previous work and it should be easy to find on their web site. Most of the porfolio sites should still be live. However, if you come across some sites have changed or that are no longer live, don’t necessarily hold that against the developer. In this economy, companies are going out of business right and left. Plus, companies often re-design their sites and may or may not use the same team to do it.
If your web firm starts to answer this question without asking about your business, consider that a pretty big red flag and run the other way. There are some general components that most business web sites should have, however when you’re working with a web firm, they shouldn’t answer this question unless they know more about what you do, what industry you’re in, and what you want your web site to accomplish for your business.
A strong web design firm will design an original site for you. They won’t send you a site design that looks generic, or that is based on a pre-fab template. Price can be a good indicator for whether your team is using templates or original designs. If the estimate for your site is under $1,000, it’s more likely that you’re not getting an original design. However, I’ve seen several firms charge what I consider a ridiculous amount of money to provide a pre-fab template site.
Why is a template bad? You want your web site to stand out as original and distinct. Your site should be designed to carefully reflect your brand. How much can a template design represent your brand, if others around the world have the exact same web site that you have? What distinguishes you from them? Smart investing in your business makes sense, and for most businesses, investing in a solid web site that incorporates at least the elements I recommend, as well as embodies your branding, makes for a strong ROI.
When you ask this question, if all they do is talk about meta tags and keywords, that’s a big red flag. If a web firm is serious about their business, they should know and understand principles of SEO and how these principles apply to the code, the copy, and all of the content of your site.
If they talk to you about using Flash for your site, ask them if that will cause any problems getting your site content indexed. Take note of how they answer this question. The actual answer is murky and complex and they shouldn’t just say, “Flash isn’t a problem for Google.”
The best web firms often have business consultants on staff or have a relationship with small business consultants who can work with clients on developing business concepts that may not have been addressed previously. For example, if a client wants a web site that reflects his/her brand, but that brand hasn’t been fully developed, it helps the web team create a better site if a small business consultant is involved.
But beware: the wrong consultant can muddy the waters, while the right consultant, one who understands both sound business principles as well as technical jargon and web lingo can often bridge the gap between developer and client, making the communication smoother and providing key contributions that make the end product much stronger.
In fact, you may want to look for a small business consultant first, before you hire the web team. A good consultant should have a relationship with designers and developers s/he’s worked with before. This is a great way to get the benefit of working with someone your consultant has already vetted, and your consultant can get better pricing than you’d get on your own. Plus, if you choose the right consultant, you can have him or her working with you and your web team as an intermediary, and s/he can head off any potential disasters, keep your team accountable, and manage the project for you so you can focus on your business.
Just like any other industry, there are those who will overcharge and those who try to undercut the competition. Your challenge is to find the pricing balance. If you pay too little in terms of the dollar amount for your web site, you may pay more in other ways.
Several experts suggest that you can outsource your web design to overseas developers to get a fabulous web site for a very, very low price. While there are cases where this strategy can work, you must be cautious. There are many unseen costs associated with this kind of overseas outsourcing.
First, if you don’t know how to find a reliable, high quality team overseas, you risk giving your money and/or sensitive personal information to unscrupulous vendors.
Second, when you work with overseas vendors, you may experience language barriers that are difficult to overcome. This can result in disaster for your web site. Don’t get me wrong — there are some phenomenal web firms around the world, and you can get a good price, but road to finding these firms is littered with firms that will provide shoddy work or worse.
The best solution is to work with a reputable firm with references that will take your budget into account and find high quality solutions that fit what you can afford.
If you want to manage your site yourself without learning HTML or Dreamweaver, ask your web team if they can develop your site using a content management system. Within this framework, you should be able to manage your site, including editing, adding pages, deleting pages, and more, from virtually anywhere in the world that you can access the web via a browser.
Your contact at your web firm should be able to talk to you in your language, but also be able to easily converse with the programmers. You need someone who can explain things that you don’t understand without being condescending, and make web principles you should know accessible. Customer service is paramount in the web industry, and you want someone who will return your e-mails and phone calls in a timely manner.
Keep in mind that while the design responsibilities fall squarely on the shoulders of your web design firm, you have some responsibilities as well. Next week, in the last article in this four-part series, I’ll talk about how you can help your web design firm create a phenomenal web site for your business.