Do you really need a designer?
If you need a five-page website and you’re happy with the way an existing theme looks out of the box, you don’t need to hire a designer. But honestly, if you’re just creating a basic brochure site that you have no plans to update or expand, you could just go over to Wix or Weebly. A content management system is overkill for that kind of a site.
You might even be able to build a more complex site without needing any additional design work. People who know their way around so-called “kitchen sink” themes like X and Avada or page builders like Divi can create nice-looking sites using what’s already built in. To do that you have to 1) take the time to learn how to use the theme and 2) understand enough about the principles of design not to create a site that looks like Geocities in 1995. Oh, and you’re going to need to source compelling photos to make those layouts work, too.
What kind of designer do you need?
Assuming that you’re not a DIY type, aren’t an expert at Photoshop or Illustrator, don’t think of looking at hundreds of fonts as a form of entertainment, and don’t have a background in graphic design–you need a designer.
It’s possible that you hired a designer in the past, to create your logo and identity system (letterhead, brochures, business cards, etc.). This person may or may not be the right designer for your website. A designer who has only done print design in the past will struggle to create a good web design, because s/he isn’t used to the constraints of web design.
Wait–what constraints of web design?
When you design for print, you organize different elements (logos, photos, pull quotes, text columns) in a certain way, and once the design is finished and printed, everything stays exactly where the designer put it. The designer controls the size and shape of the piece. You might shrink a letter-sized flyer on a copy machine, but you won’t be able to turn a portrait-oriented document into a landscape-oriented document without cutting part of it off. And you can’t grow or shrink the original flyer, only copies of it.
If your website stayed exactly the same no matter what size screen it was viewed on, it would be pretty useless. Half or more of your website visitors will be using phones or tablets to look at your site. You’ve probably heard that your website needs to be “mobile-friendly,” but you might not have thought about what that means for your design. I’ll talk more about designing for mobile in a minute, but for now what you need to know is that website content grows, shrinks, and moves. It’s not going to look exactly the same to everyone.
Fonts and Typography on the Web
Though we’re no longer in the days when your site had to use Arial, Helvetica, or Times New Roman, you can still run into problems with fonts. If your designer chooses a commercial for your logo and print materials, you will have to pay to use that font on the web through a service like TypeKit ($49.99/year for Adobe fonts) or Fonts.com (starts at $5/month for the basic library).
If you don’t yet have an identity system, consider using free fonts from Google fonts, Brick, or the Open Font Library. Creative Market also has many inexpensive fonts that include web formats. It’s a good place to look for brush/script fonts and retro style fonts. Note that elaborate fonts should only be used for large headings–they are very difficult to read at small sizes.
Be aware that even when using exactly the same font, the font might look slightly different in your browser than in the Photoshop mockup. I’ve noticed that fonts look heavier on my Mac than on my PC, even when using the same browser (Chrome). There’s nothing your designer or developer can do about the fact that different browsers render the same fonts differently.
Design ALL THE THINGS
Websites, unlike brochures, are interactive. If the designer doesn’t show what drop-down menus look like when open, or what a button looks like when hovered over, the developer will either pester you for the appropriate design or make something up. Neither is a particularly good solution.
Likewise the designer needs to show headings level 1-6 (font, color, relative size), blockquotes, bulleted lists, numbered lists, and photo captions, as well as regular body text and any fancy styles like pull quotes (which are a variation on block quotes).
Do entry titles look different from other first-level headings? What about widget titles?
What color are active and followed links? Should links be underlined?
Is text in the sidebar smaller than text in the main content area? Do you even have a sidebar? If so, on which pages?
What does the blog comment form look like? How about published comments?
What do input fields look like? Are you okay with the default style created by your form plugin or email sign-up widget, or do you need different outline and background colors? Do you want to show form labels (on the outside of the input field) or only placeholders (on the inside of the input field)?
Design ALL THE SIZES
You’ve probably heard the phrase “mobile-friendly” and you might have heard the term “responsive design.” You may also have heard of “mobile-first” design. These are different ways of saying that your site looks good on all screen sizes, though “responsive design” frequently refers to a design that starts with the full-sized (desktop) layout and adjusts to smaller screens, whereas “mobile-first” sites design for the narrowest screen first and build up from there.
When to go mobile-first
If you know in advance that most people will use a phone to view your site, you want mobile-first design. That means that you ask your designer to begin by arranging the content on each page in a 320-pixel-wide column. That forces you to prioritize the order of different elements, because there’s no room to put things side by side. You can’t put the ads and sign-up forms in the sidebar: you have to put them into the main content area.
(There are plugins that will let you show certain widgets just on mobile devices, if you want to keep these elements prominent on small screens but show them in a sidebar on larger screens.)
There are other things to consider when designing primarily for mobile users. One of them is to make sure that any interactive element, like a button, is large enough to click easily with a fingertip. Another is to put click-to-call links on phone numbers. (These normally show up highlighted in the same way that other links are on the desktop site, but mobile browsers may also add styling.) A third is to be sure that moving elements, like sliders, respond to swipe gestures as well as to mouse clicks.
Your designer may not be able to show swipe gestures, but might design a carousel to show one image at a time on phones, two on tablets, three on smaller laptops, and four on large screens.
Design for ALL THE CONTENT
Remember what I said about templates back in Part 2. For each type of content (blog post, testimonial, portfolio item, team member, product, event, etc.), WordPress creates a single page and an archive page. That means you need designs for the single and archive views of each type of content you have.
If you don’t know what kind of content you’re going to have, your designer can’t design for it. This is why you need to work out your content strategy before you hire a designer. You don’t have to have all your content completed, but you need to know what kind of content you’re going to have.
Suppose your site has pages, blog posts, testimonials, and portfolio items. That means you need designs for a single page (and a second design for the home page if it’s different), a single post, post archives such as category and tag pages, the main blog post index, single testimonials, the list of all testimonials (testimonial archive), single portfolio entries, and the portfolio archive page or list of all portfolio entries. If you have custom taxonomies for your testimonials or portfolio items, you also need designs for the taxonomy archives for those items–or at least you need to decide whether those will look just like the main list of testimonials or portfolio items, or need to be different.
Responsive design comps and wireframes
You’ll need designs for at least three views of your site: phone, tablet, and desktop. You may wish to include more than one tablet view, but three versions of the site will work.
Even if you are following the popular trend of laying out your home page in one long column, you will probably want a few different views to see how things like the header, logo, and tagline are affected by different screen sizes, what your mobile menu looks like and when it kicks in, and whether any of your text needs to be resized for smaller screens.
The designer doesn’t have to put every detail into every screen size, but either the smallest or the largest view needs to be complete, including all the elements mentioned above (expanded and collapsed menus, buttons, form fields, bullets, blockquotes, headings) as well as any other layout elements.
Other screen sizes can be represented by wireframes: simplified drawings that show the position of elements without showing styling. These usually take less time for a designer to prepare than comprehensive layouts, usually known as “comps.” Sometimes a designer will prepare wireframes in advance of creating comps, or your developer may create wireframes for you designer to use in preparing comps.
If it’s too hard for you to imagine what the site will really look like based on wireframes, ask for comprehensive layouts of all content types at all screen sizes.
But that’s expensive!
You’ll pay a designer more for a complete set of designs than for one or two layouts, especially if you go through several sets of revisions. But every view that you don’t have designed increases your development costs and developer headaches. It’s time-consuming to have to go back to a designer and ask for views you didn’t think to get before, and frustrating to have to ask a developer to figure it out and then keep adjusting things until it looks right. In the end, you won’t save any money by skimping on design.
This is when to make changes
Examine all the designs carefully. This is the time to ask for changes such as rearranging elements on the page, adding something new, switching the aspect ratio on your featured images, changing your color scheme, or using different fonts. They are easier for your designer to change than for your developer to change.
Be aware, however, that your designer won’t be happy about doing everything over from scratch a dozen times. Agree on a certain number of revisions that fall within the project scope, and expect to pay for any additional changes.
If possible, give the designer your actual copy to work with for detailed comps. Placeholder copy tends to be a conveniently even length, but you may have some long and some short titles and your content excerpts may not all use the exact number of words. Having a site that looks less tidy than a comp often results from not using actual content when designing.
Respect your designer’s expertise
Your designer has spent years learning about things like white space, composition, color, and things with funny names like “kerning” and “leading.” If she objects when you want to make the logo bigger or use twelve different fonts, she probably has a good reason. Read “The Worst Things You Can Say to a Web Designer” and “How to Talk to Designers About Design: Tips for Non-Designers” for some guidelines on the best (and worst) ways to give feedback and direction to a designer.
Leave a Reply