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.
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 by commenting them out. Once you're done, you have a finished webstile that you could present to your clients and keep it with you to ensure you're going on the right path.
It is a type of design deliverable, heavily inspired from Style Tiles.
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 download webstiles' template, and mess around!
Like it? Tweet it!
How to?
- Step 1: Download the template
- Step 2: Open up its CSS and HTML files.
- Step 3: In the CSS, change the colors. Search for 'tomato', and replace with primary color. Search for 'skyblue' and replace with secondary color. Search for 'midnightblue' and replace with tertiary color. Edit the fonts in the body and headings (search for h1, h2, h3).
Then, change the background colors in color blocks (search 'color'). - Step 4: You're almost done. In the HTML, change the adjectives, and the headings/slogans. Remove any elements by commenting them off (Tip: Included helpful quick commenting. You only need to remove the '-->' after the name, example, <!-- @Adjectives -->, remove the -->)
- Step 5: You're done! Zip it, and put it on your host and send the URL to your client, or start building the actual website!
Helpful? Spread the word!
Hmm… But why should I use webstiles?
Usually, clients require more than 1 concept designs. Instead of creating a full mockup, you can create a few webstiles quickly, and send those over, to judge their mood and reactions. When you think you know exactly what the client wants, you can send over a mockup! BAM!
Webstiles are also useful when doing any type of web design work. They help you bring your idea to paper, and you don't spend a lot of time worrying on details on the final site — they are already finalized in your webstile! (Psst… here's the webstile for webstiles!)
TL;DR Webstiles are a quick and easy to way to bring your idea to life
Why Webstiles?
Webstiles evolved as a personal need. I loved the concept of Style Tiles, but hated PS at the same time (I use complex baseline grids in my web design work), so I took the responsibility of making Webstiles. When came to use it more and more, I realized that other people could benefit from it too, and you can see the result! Webstiles is now available on Github as well!
Features
Webstiles shares a lot of common features with Style Tiles, but has a few key changes, and introduces some new concepts.
One thing to note is that the left column of webstiles largely defines mood, while the right deals with the techinical stuff
1. Colors
Quickly define colors to be used on the site by editing the background color in CSS.
2. Typography
Set the visual hierarchy easily. First three headings + one paragraph with strong, em, and link
3. Form
Decide how forms and buttons should look.
4. Headings/Slogans
Write down a few headings/slogans you think are perfect for the brand/organization/product. This one is related to mood.
5. Adjectives
Write down a few adjectives for the design you have created, and the design you think is perfect for your client. Again, related to mood.
So, as you can see, webstiles use a lot from Style Tiles, but have new ideas and are designed thinking for clients, not for other designers.
Signing off
I now use webstiles in every project of mine — and I strongly believe you should too. Try it once, 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!