Interaction Design

style guide

My style guide was created in a simplistic way that tried to show the website in the most creative way while effectively showing off portfolio pieces. The most difficult thing that i found was just describing the way i made my decisions. A lot of times in my creative process i make quick decisions and then try to justify them later.

Okay, it’s bad. Really bad.

But not because I can’t make it well. Because I ran out of time (which I know is my own fault) and as I feverishly began creating the style guide, I realized that there were so many things I wanted and needed to say. I was able to do at least a portion of what I wanted to do to every element at least once to one element. Did that make sense? For example, I want to section off pieces of the site separately and have a whole page or more that focuses on everything for that one element. So, show the height, width, color, padding, margins, images, typeface, type size, etc. But I also think you could be just as effective doing it the other way and having a page with all the type, a page with all the colors, etc.

Any ideas of what you like better?

This is a current PDF of my  Style Guide for my Portfolio site.

Making a style guide for a website is an interesting challenge because by definition a website is constantly changing.

In my style guide I included the purpose and goals of this website, basic structures, typography, user interaction, colors, dimensions, and more. Even though this is something that will change, it is important to create and update for a couple reasons. Reason number one is that a new designer could manage the site and maintain the integrity of the brand. Reason number two is that a programmer could understand the designers vision of how to implement the design in the final product, and reason number three is so a potential employer will see the level of website knowledge the designer has.

I’ve learned a lot from putting this assignment together. The style guide truly helped me realize how much goes into a site, and how much we can miss.

Here is the style guide PDF. My Complete Style Guide

I went through a lot of trial an error, as most of you probably did, but I think I found a happy medium. The Photoshop mock-ups were my greatest strength and get me out of a lot of rough spots. I couldn’t have gotten to the place I am now without working on them. I wanted to put my work in to WordPress, and tried hard to get it up. I got my main page posted on WordPress, but in order to fulfill the requirements of the assignment, I did the rest in Dreamweaver.

Here is my WordPress link to my homepage. www.paradigmredesign.com/wordpress

On the other hand, I want you guys to see how the links work. Here is my site that you can mess with some links that will work. (note: not all the links work yet, but enough to see how the site flows) www.paradigmredesign.com

I’m gained a better understanding of web design in this day in age and I have learned a lot from people around me. You have truly given me a higher respect for the industry and I’m excited to progress in this field.

While the page is far from finished, I think I’ve finished the requirements for the assignent.

Here is my style guide for those interested:

Download my style guide.

And a link to my live website. Thanks for looking!

clockwrk.com