Stylescapes: What Are Stylescapes & Why Use Them In The Web Design Process

I don’t know if you’re like me but sometimes, this scenario plays out:

‍

1. A client comes and says ‘We want a new website!’
2. After asking some questions, it becomes clear that they also want to change their website’s brand identity but they want to keep their logo and elements of their current identity.
3. The client doesn’t want to pay for a full rebrand and they have an ambitious time schedule which wouldn’t allow for it anyway.

‍

I haven’t worked out the best way to approach this type of client since it seems logical to me to focus on a rebrand first separate from the website rather than trying to fix both with one shot in a short space of time but alas, I digress.

‍

What I do find though is that to get clarity on brand identity direction, it’s extremely useful to use stylescapes. You can quickly get a strong idea of a cohesive new brand direction for a client which, if you have time, can then turn in to a short brand style guide for the client. This in turn means the new website will be quicker to design and build if the stylescape phase is done right.

‍

ps. Everything I learnt about stylescapes comes from the Futur’s excellent course so if you want more info, I highly recommend checking it out.

‍

pps. Everyone’s approach to guiding the client to a new website process is slightly different. I’m not saying that stylescapes are THE THING you should do - it’s just helped me make the client process more frictionless. You need to decide what works best for you. Hope this provides some value though.

‍

Alright - let’s get in to this.

‍

What are Stylescapes?

Stylescapes are curated moodboards where you can quickly capture words or feelings in to visuals. You can quickly capture a look and feel through typography, colour, texture and imagery to present cohesive different ideas to a client. The series "Building A Brand," goes in depth on the relationship between what the client says they want and transferring those in to visuals.

‍

Why Use Stylescapes In Web Design?

‍

1) Alignment

Chris Do (if I got a quid for every time I mentioned that man’s name, I’d be on a yacht in the Bahamas right now) talks about having “perpetual alignment,” with your client. As the person responsible for translating ideas to visuals, you are guiding the client from the “familar to the new,’ as Chris says. If you go straight from talking about visuals to presenting a homepage design with a new brand identity, it might be overwhelming for the client and cause more friction than anything else. The client may then want to try and manage the project themselves since they worry you can’t understand what they want. Having alignment throughout the process with this stylescape step can alleviate that friction and help alignment.

‍

2) Time

Rather than designing a whole home page which can take hours, I have found putting together 3 different stylescape directions defines the broad, compass direction of where we are going together before actually setting off on the journey (of wireframe design).

‍

3) Focus

Once the stylescapes are done, you can then focus on the lo-fi wireframes without needing to also focus on stylistic decision making too much. You already have a good idea about how the pages will look because hopefully, your client will have chosen one stylescape which they want to pursue for their brand identity. I find that if the stylescapes are done well and the client likes one of the directions for the new brand identity, the wireframes are far easier to execute. The client is on board on the design direction and isn’t shocked or surprised at any design decisions. This makes a massive difference on sites with a lot of pages.

‍

Are Stylescapes A Waste Of Time?

I have found that in the past, when I have jumped from talking about refreshing a brand identity to presenting a possible brand identity on hi-fi wireframes without enough context about the visual direction using something like stylescapes, the process slows down dramatically because the client may have lost trust in the process. I find it’s better to take an interim step using stylescapes - I have found it’s quicker in the long run and also ensures the client feels listened to and heard.

‍

How Do You Make Stylescapes?

I used to make stylescapes in Adobe Illustrator but for the last couple of times I’ve done them, I have just made them in Figma. I find it’s helpful because after presenting the stylescapes, it’s easy for the client to comment on the boards. The other thing is that I’ve found editing on Figma doesn’t slow down my computer nearly as much as using illustrator. Honestly though, it’s fine to use whatever tool you’re comfortable with.

Steps and sizes I used are these (but use whatever size you think works best):

1. Make a frame (1920 x 1080) to have a contrasting background colour
2. Make another frame (1920 x 645) for the actually stylescape itself
3. Add elements on top and I find it’s great to constantly duplicate the frame to try out different directions without messing up the original

‍

My Current Process: Where Stylescapes Fit In

I feel like I’m stress testing this process out each time I work with a client but currently, I would recommend pursuing this approach:

‍

Kick Off

Although I ask a lot of brand identity questions during the kick off meeting, the final question 'If you had 3 adjectives to describe your new brand identity, what would they be and why?' These visual adjective will help inspire the visual directions for the stylescape. The reason why I find it's helpful to present 3 stylescapes is because the words "exciting, fresh and young," can be interpreted very differently visually depending on who is saying those words.

‍

Show Screenshots Of Different Websites And Ask Client To Provide Examples

By showing different screenshots, it's helpful to quickly guage the flavour profile of the brand identity. Does "exciting" mean colourful with large, blocky fonts and maybe illustrations, or "exciting," like a sleek Tesla website which has engaging videos, minimalist sans serif fonts and less colour but more vivid photograhy.

‍

3 X Stylescape

Every stylescape has to have a clear different visual direction so that it is easy for the client to differentiate and choose a clear brand identity direction to follow. Otherwise, there is little point in making different stylescapes at all. However, they all need to be clearly linked to the key adjectives, the target audience and have clear justifications for being shown!

‍

Refine 1 Stylescape

When you have one direction that the client wants to pursue, they may want to have particular elements changed or parts of 2 stylescapes to be brought in to one. This can be the hardest part refining something that was an independent cohesive board but needs to be pulled together in to one. However, this help define the brand direction going forward and is essential to get sign off from the client.

‍

Next Steps

Sitemap → Gather content → Lo-fi Wireframes → Hi-fi-wireframes

‍

Do you use this process or something similar? Let me know here info@jackredley.design