Summary

In this session, Grace will walk us through the essential elements of engaging websites, and how we can use them to craft better visual stories for our clients. She discusses a site’s goals, positioning, and implementation, and how considering each of these important components will make your websites more impactful, unique, and successful.

Notes:

3 main areas to focus on to ensure you’re creating an engaging and successful web project:

1. Goals: Defining goals for what success looks like
2. Positioning: Visual language as a means of positioning
3. Implementation: The art of execution

‍

Goals

• Define goals for what success looks like. 
• It can be easy to get excited about a project, and jump to conclusions about what the client’s goals are. 
• Ask pointed questions of our clients to better understand their ideal site, and how you can help them get there.
• Never assume a client’s goals. 
• Questions to help understand the site’s objectives:

• Question: What are your biggest goals with the site redesign?

• Why I ask this: It’s a direct way to ask about someone’s goals.

• Question: What are your biggest challenges with the current site?

• Why I ask this: It will help identify the main pain points the client is having with their current setup. 

• Question: When you think of your ideal website, how does it impact your business?

• Why I ask this: We’re giving our client permission to dream about their ideal scenario.

• How does the website fit into the marketing funnel of your company?
• Who is the target audience for the site?
• What is your favourite thing about your business?
• What is your customer’s favourite thing about your business?

Action items:

• Ask your client directly about their goals
• Approach questions from a few angles to better understand the full scope of success
• Reiterate goals back to a client in a project brief to ensure everyone is aligned

‍

Visual language

• How we can use visual language as a means of positioning.
• Just as the written language of a website reflects the messaging of a brand, the visual language does the same. 
• Visual language can be equally as impactful as written language, particularly with conveying overall attributes about a company.

“Design is an opportunity to continue telling the story, not just to sum everything up.” –Tate Linden

• Elements of visual language:

• color
• typography
• imagery
• textures
• graphics
• buttons
• white space
• interactions
• how it all works together

• How to learn visual design:

• Understanding all of the different meanings that visuals can represent really takes time
• A good practice to get into is looking at websites on directories like Godly - go through a site and note what kind of feeling you get as you scroll. Is it playful? Technical? Retro? Why do you think those things? What elements on the page are communicating that?
• You can then reuse and remix those elements in your own projects to align with the reference or differentiate from the reference.
• You need to be careful with this step so as to not copy someone else’s work that you see. 

• Reference is so helpful for gathering elements that convey the same feeling, industry, or message that you want to, but you need to be able to take the reference and remix it into something that you can fully own.

• Examples of visual design

• Cluster - they are a marketplace that helps companies hire highly technical hardware engineers. Their audience is niche, and they came to me with a logo and colour palette, but not much else.

• Dark palette suggests innovation - we often see this with tech companies, so they are positioning themselves among peers
• Image of some sort of technical machine in the background positions Cluster in tech space, reinforcing industry
• Multiple profiles of engineers suggest marketplace
• Subtle glass overlay that is popular in tech industry is used, positioning cluster among peers
• Very clean humanist sans serif suggests practicality and assertiveness
• Blue/Purple is very common in the tech space, positioning among peers

• Yama Vans

• Storytellers
• organic, wise, grounded
• contemporary balance
• Differentiated from peers

• GSEI

• Highly technical engineers
• very precise
• Positioned among peers

• Fluid Events

• playful, fun, but very clean and organized
• differentiated from peers

Action items

• Collect reference that evokes the same feeling you’re trying to achieve
• Make notes about what visuals are communicating
• Remix reference to align with peers, or differentiate from competition

Implementation: the art of execution

“The details are not the details. They make the design.”

• Focusing on the execution of our work is not just about getting something done as quickly as possible, it’s about giving care, energy, and attention to all of the small pieces of a project.
• Execution is the thing that separates good designers from great designers. 
• Good designers have all the right ingredients, but they might not give energy to small details, and in turn the whole project lacks the ‘special’ quality that would make it excellent. 
• Great designers care deeply about all of the little details of a project, because they know that those details are what will bring a magic quality to their work.
• Here are some ways that I try to strive for excellence in implementing my projects:

• Before I tell a client something isn’t possible, I try one more time and often, I find a solution
• Asking myself throughout a project “how can I make this as smooth as possible for my client?”
• Revisiting the project goals at each stage of a project to ensure we are aligned

CONCLUSIONS

Goals: Defining goals for what ‘success’ looks like

• The first key to a successful website design is define what success is
• Rather than guessing, we can ask pointed questions of our client’s to better understand their ideal site, and how you can help them get there

• Share example questions

• When we investigate more into what ‘success’ looks like, we may be surprised by what our client cares about, or where they want to focus
• This essential element makes our website more impactful to our client, by specifically defining what they want to achieve, and narrowing our focus on ‘success’

Positioning: Visual language as a means of positioning

• Just as the written language on a website reflects the messaging of a brand, the visual language does the same
• Visual language can be equally as impactful as written language, particularly with conveying overall attributes about a company
• If we want our website to reflect brand attributes of intelligence, precision, and innovation, we can use visual conventions to reinforce this messaging

• Show examples of websites in different industries with lorem ipsum in place
• Give examples of elements that help position the site

• Sometimes, we use visual language to position a site within an industry to ‘belong’, other times, we subvert the expectation to differentiate to competitors. Knowing how far to take the design is important - we never want the visual language to feel completely mismatched to the audience
• This essential element makes our site unique among peers, by communicating not only through written language, but across the visual language as well

Implementation: The art of execution

• Executing our site well doesn’t just mean building it in Webflow - when I talk about the art of execution I am referring to all the small details that go into getting a site live
• Execution is building, but it’s also client presentations, communication, feedback, efficiency, and support
• How can you make something as smooth as possible for your client?
• A solid strategy and design, executed well, will outperform a poorly executed project that had a fantastic design
• This essential element ensures that our website is successful, because we give the execution of our ideas just as much importance as the ideas themselves

Conclusions

This session is your guide to the essential elements of engaging websites and how to use them to craft better visual stories for clients. We’ve covered defining goals for success, using visual language for positioning, and the art of execution. By considering each of these components, websites can be more impactful, unique, and successful.

‍