Implementing Style Sets in My Design Process

Implementing Style Sets in My Design Process

Website Design Process

Style Sets (often called “style tiles”) have really helped to streamline my visual design process. When working with clients on website or mobile app design projects, I’ve found that it can be difficult to establish the starting point for the creative direction of the design. If you ask a client the very broad question, “What kind of styles do you like?” they will often respond that they like this or that, but without a specific reason as to why they like it or a cohesive rationale. With thousands of great examples of nicely designed websites and apps to reference, they will like a wide variety of designs and have various definitions of what “looks good” to them. This, of course, makes it difficult for designers to decipher what the client wants and expects to see, and therefore difficult for us to know where to begin with our design!

Utilizing Style Sets parts the vast sea of design options and provides an efficient way to filter what “looks good” down to what “looks great” to the client. I typically create three different artboards that set the mood and feel for the creative direction of the project. Each artboard includes design elements of the particular project and are laid out in a cohesive design mood. I then guide the client through each board and ask them to select what they like and don’t like about the elements, which really helps focus the direction of the final visual design. I’ve elaborated on this process below!

As I continue to grow as a designer, my design process is constantly evolving with the new research and methods that I discover. This is what my current process looks like for now.

My visual design process begins after I have the wireframe of the website or mobile app already complete.

Initial questions that I ask clients before creating style sets:

Describe your brand in 3-5 words.
What distinguishes your company/product/project from your competition?
Which, if any, outside brands would you associate with your brand?
What colors and tones resonate with your brand? (side note: Their answer to this question doesn’t necessarily weigh incredibly heavily in the Style Sets because I like for clients to open to different color palettes. However, it certainly helps to know whether or not the client’s brand conveys light, dark, bold, or subtle tones)
How I make Style Sets:

I pick out a few project-specific elements from the wireframe. For example, the form field, the product display page, the gallery page, etc. In addition to these elements, each style set will also include the essential elements of a website or mobile app such as buttons, a few examples of icons, color swatches and typography.
I collect visual inspiration, research what’s out there, and screenshot what I think looks really good and could work for the specific elements of the project; interesting ways to design form fields, cool designs of buttons, unique displays of gallery images, etc. Pinterest, Behance and Dribbble are great resources for this research.
I place these screenshots in a document (I use Sketch – I’ll write a blog post about my love for Sketch in the near future) and then I begin to start grouping the screenshots by element type. While doing this, I’m also thinking about how the different styles of the elements can come together in 3 different creative directions.
Creative direction, to me, is what links a Style Set together. It’s hard to explain in many words, but it is the “feel” that ties different elements together. Clean and minimal, novelty and highly detailed, geometric and sharp edges, the use of overlays, the interaction between text and space, outlined versus filled shapes and icons. How you decide to group the styles into the three individual creative directions is pretty subjective, but as long as you have confidence in your reasoning, you’ll be able to have an effective discussion with your client about what sets each artboard apart.
Once I’ve gathered the inspiration and grouped them into the different directions, I then start designing out the different elements for the project onto 3 separate artboards. I use the inspiration strictly as inspiration, and I make sure not to just copy styles. Customize and tweak the styles to fit the client and their brand. Make sure that the design fits the context of the project and is not a carbon copy of what’s already out there.
style set, style tile, concept design, web design
For this Style Set, I went with a clean and conservative aesthetic.
style set, style tile, concept design, web design
This set is more contemporary with the use of geometric shapes.
style set, style tile, concept design, web design
For this set, I went with a design style that carried a skeuomorphic theme, an organic feel, and the use of fine and novelty details.
Next steps:

Here is a brief synopsis of what happens next in my design process. I’ll write future blog posts to go into more detail about them.

Meet with the client to go over the Style Sets. I talk to them about the themes and moods that distinguish each one. I ask them to tell me what they like and dislike about elements on each set. I DO NOT push them into picking any one set. If they prefer to, I allow them to mix and match different elements across the sets – this provides for a truly customized style and I can worry about making it cohesive during the draft design phase. Remember, Style Sets are to help set the creative direction for the project and can be tweaked as the project progresses.
Once settled on the creative direction, I start the draft design phase by designing out full pages of the website or app as laid out by the wireframe. This becomes much easier because some of the key elements have already been designed partially designed in the Style Sets!
The client has opportunities to provide feedback on the draft design before the final design is done.
I hope this gives you an idea of how Style Sets can introduce a new method of sharing conceptual design with your clients (and your team!) I love making improvements to how I work, so if you have any recommendations, please comment below! How do you start your visual design process?

Leave a Reply

Your email address will not be published.