What is a Webstile?
Webstiles is a template to help you prototype in the browser, to quicky define colors, fonts, and the overall mood of a website.
It is a type of design deliverable, heavily inspired from Style Tiles.
You download the template, open up its CSS, set fonts and colors. You then open up the HTML file, and change the headlines/slogans and adjectives, and optional, remove any sections not required. Once you’re done, you have a finished webstile that you could present to your clients or share with your team.
Webstiles tell the mood of the website, by defining typography, colors, layout and buttons. They help communication between the designer and the client, and are a step before full-fledged mockups, but one step after wireframes.
Feel free to check out the demo, download webstiles’ template, and mess around!
Like it? Tweet it!
How to?
- Step 1: Download the template
- Step 2: Open
var.stylunder thestyl/partialsdirectory. - Step 3: Change variables to modify colors, fonts, and other typography.
- Step 4: Compile
style.styl. I use gulp to compile. - Step 5: Edit index.html to change 'adjectives' to something more suitable, and the footer line to include the name of your project.
- Step 6: Done! Host it and share with your client or team.
Helpful? Spread the word!
Hmm… But why should I use webstiles?
Clients might require more than 1 concept design. Instead of creating full mockups, just create a few webstiles quickly and send them for feedback. Once you've got a better idea of what they want, move on to making the actual site/mockup!
Webstiles are also useful when doing any type of web design work. They help make your idea more solid and real, quickly.
Finally, since webstiles is a web template, it gives your client a much better idea of their actual website. Webstiles is responsive, so it would work on mobiles and tablets as well.
Why Webstiles?
Webstiles evolved as a personal need. I loved the concept of Style Tiles, but disliked designing in Photoshop, so I took the liberty of making Webstiles. When I came to use it more and more, I realized that other people could benefit from it too, and here we are!
Signing off
I now use webstiles in pretty much every project of mine — and I believe you should too. Try it once, take a look at the demo, download the template. Once again, thanks to Samantha for her amazing concept of Style Tiles.
Don’t Panic!
Like it? A tweet would be awesome!