close

Shelley Bassett

Menu

Close

Beginning Web Design - Build-Along Tutorial Series

Styling the Project | Beginning Web Design


May 23, 2018

Styling the project is a big part of creative design. But being able to present those styles is equally important. This is an easy way to create some variety and pitch it to a client.

We’ve unpacked a client brief and done the preliminary research. So now it’s time to start putting together our designs for the project. But before we can dive in and work out some layouts, we’re going to need to start by styling the project.

Like most stages, the final style will need to be signed off by the client before we can continue development. The best way to achieve this is by creating some style guides to present to them. Style guides are just a visual representation of what the project might be. They include fonts, icons, colours and images that a representative of the project, be it a document, website or entire brand.

Our project is client work, and the style will need approval before we can begin designing the final site. This step can be merged with several other to crate a full pitch, but we’re already working closely with our imaginary client and are presenting to them piece by piece. By creating several styles guides in a similar vein, we can both provide the client with the illusion of choice, while guiding the project in a direction that we are confident in. The Futur have an excellent video on how to pitch ideas in this way.

Styling the Project

Our project, on Melbourne’s theaters, could be presented in a number of ways. When creating our styles, we need to be mindful of the requirements of the brief. Our client has specified night-time photography, but not much else. This both gives us a sound starting place, as well as plenty of creative freedom to bring our own flair to the table.

While incorporating the buildings at night, we should create 3 style ideas to give the client some choice. Although it’s nice to experiment, be prepared to commit to any options you present. It’s a good idea to have these guides display a spectrum of design, pick a key theme, then create one board for either end of the spectrum, and one somewhere in the middle. These are my suggestions for this project.

Stylescape 1

Stylescape 1

Stylescape 2

Stylescape 2

Stylescape 3

Stylescape 3

By using this three-pronged approach, we are presenting the client with an opportunity to visualise several options for the project. They can compare and contrast, taking different elements from each, or simple just approve one straight away. This is why we must be able to back any of the designs we present. Sometimes a client will just say “that one”, and that’s the one we go with.

Receiving and Applying Feedback

The feedback you receive for styles is going to be totally subjective. Style, aesthetic or artistry, they’re all opinions based on our personal preferences. Something that we might love, the client thinks is “meh”. They might also outright hate one or more of our suggestions. This is all valuable feedback though. Remember that we’re creating something for them, not us. The client had this feedback about the boards I presented him:

I love the photo you chose. It captures the vibrancy of the building at night, which is the time I love the most. I’m not sure about the pastel tones though. They don’t really say theater to me. The dark one is beautiful. It feels like night. I don’t like that purple though. Maybe use something like the teal?

Of course, their decisions might change once they see a mock-up or prototype, but for now, that’s a great start and will really help us get underway with the design process! Our final styles will probably look similar to this, although like the client, you might choose to go in a different direction.

The final styles

The final styles

If required, you could send this final layout back to the client for approval. Take all feedback on board, and get creating!

Leave a comment

Advertisement

Leave a Message | No comments yet

Leave a Reply

Your email address will not be published. Required fields are marked *