Think about all of the things you look at everyday: websites, movies, billboards, menus, youtube videos… Your eyes and brain are constantly absorbing information. All of this visual content is influencing your frame of reference.
Some streams of images are more powerful and persistent than others. Take for example your computer, you could easily have looked at the same UI for the past 5 years. This constant exposure has an impact in your familiarity with design patterns like modals, scrolling, shadows, and tabs. This full immersion could help to explain why Mac and PC users don’t mix. They have totally different visual frames of reference.
“The themes in WordPress drive a lot of design trends. You make a theme, and suddenly it’s on hundreds and thousands of sites.”
– Matt Mullenweg
Ok I know what you’re thinking… What does this have to do with responsive web design? Well, I think it is important for every designer to know and understand design trends and how they can shift over night.
The most recent example of this is the release of ios7. Instantly shifting from skeuomorphism to flat design and bright gradients.
But why was the shift so drastic and widespread?
The Power of Influence
Because Apple had the ability to send a push notification to millions of people to update their phone. Within days people’s visual frame of reference changed. At first some resisted the change but overtime it became familiar and appealing. Visuals are now judged through a whole new frame of reference.
Apple is just one source of influence. The internet hands the keys of influence to those with the largest following or user base. Instantly code updates can change your Facebook wall. Or if a new music album comes out the artwork is pushed to iTunes, Spotify, Pandora, and YouTube influencing your frame of reference because it is everywhere you look.
Below are some major influencers
- Websites (Google, Facebook, Amazon, etc.)
- Media (music artwork, books, movies, magazines, etc.)
- Operating systems (iOs, Android, Windows, etc.)
- Web platforms and frameworks (WordPress, Bootstrap CSS, Foundation)
The reason I tell you this is because you could spend a ton of time to complete a website that your client or boss loves. Then 3 months down the road they ask for a redesign because they want something “fresh”. This is the danger of trends. They can come and go so fast. For some, this is ok because the redesign is more work and more revenue. But I believe it dilutes your expertise as a designer to know what is appropriate for your client’s business. The last thing you want is the decision maker to drive your design. You want them to trust your eye because you understand the important role visuals play… in telling a story.
I believe it is good to be aware of trends but use them when appropriate. The last thing you want to do is use a trend just because it looks good. Every design element should have some rationale for using it. If someone asks you, “Why did you use X?” You should have a strong reason to back it up. This demonstrates your thinking and deep concern for their business.
The best way to reach an appropriate design is to ask a lot of questions. Each question you ask yourself will push you to dig deeper and consider all options. Before I present any wireframes or designs to a client I always have them review and sign off on a design strategy. The strategy brief is a few short paragraphs outlining the best approach to achieve the business goals and effectively serve the site visitors. You first outline the criteria or things you will consider when coming up with your solution. Then after you think through your research you write a short paragraph outlining your design solution.
1. Design considerations
The things you considered when coming up with your design strategy. Below are some questions you could ask in your research.
- What are my site visitors current visual frame of reference?
- What can influence them the most?
- What websites and operating systems do they use?
- What do my competitor sites look like?
- Any patterns?
- What do my site visitors expect to see?
- What will throw them off?
- How do I want them to feel when they use the site or app?
- What is their primary goal visiting the site? What do they want to know or do?
2. Design strategy
A design strategy is nothing more than a summary of what you plan to do. Taking in all of your research and what you know about the business, design constraints, user goals, etc.
Here is an example for a manufacturing business
- Majority of site visitors use older browsers on desktop
- Goal of the site is to get more phone calls
- Visitors are not very web savvy and frequent other industry blogs that use muted color tones. Very industrial looking sites
- Most of the sites they visit use sans-serif fonts
- Customers are often in a hurry because they need a repair urgently
Since most of the users are in a hurry to get help the site will have a prominent phone number and live chat. To differentiate from your competition, we will use a brighter cool color palette to have a calming feeling. Since most visit on desktop we will need to hire a professional photographer to capture quality images of your facility to demonstrate your credibility.
If your design solution aligns with the strategy above it will be harder for your client to change it in the future…. because it is based on research and is appropriate for them and their objectives. You are able to block out the noise and say that’s cool but probably not appropriate for my audience.
If something in your design is ornament for ornament sake… ask yourself is it really necessary? Will they miss it if it’s gone? ■