SpaceBander© Web Design Style Guide | Skillshare Projects



SpaceBander© Web Design Style Guide

This course has truly helped me decide on a very productive workflow for my projects.

I had started this project last year, when my client requested to start with the logo of a medical product that was being designed at that time.

I had a logo and a color palette that i was not entirely happy with, i thought it needed some tweaking. But i had to choose at least the main colors because the product itself was going to need some color.

This was the rough color guide i made with the Pantone color values.


I will be working on the website design with a developer, and I have a very short period of time to design the website, send to client for review and then send all aprovals back to the developer so he can build the site up in Bootstrap.

I have been working with style guides before, but i was not using it as a "live toolkit" - like this class shows, and it actually didn't help me communicate better with the developers. Also working with Illustrator, has helped me work faster. I used to work in Photoshop, with a 960 grid and the vertical margins were always different.

Working with Vertical Rythms has been the best way for me to organize and focus on the branding. It makes the design more cohesive, and working with the grid and making it work along with your type, totally makes sense and brings peace!!!

This style guide system is a great toolkit for me to build pages faster, it will improve the workflow with the developers, and will definitely help my client understand the visual language of the website as a whole.

I'm so happy I took this challenge! I made this project faster than I thought i would, and I love the results!

This is the style guide I created:


and these are the sample pages - the first one with the guides:


And this is is how it looks without the guides


Then i started tweaking the spacing and adding more features to the homepage:



Please sign in or sign up to comment.