Design Process: Department of Visual Arts Website
For my Web Design class at school we were asked to come up with a site for our final project. Our first step was to decide what our subject would be for our website.
The first idea that I thought of was more of a commentary on the class as a whole; I wanted to make a site about web standards and good web design practices. If you’ve talked to me at all about the class you’ll know what I’m talking about. In the future I might write about it so everyone can know what we went through (It really was that bad). This idea was actually taken and made into a website with my roommate Jake. Although the site is now stagnant, for the time that we were updating it we had a good time and learned a lot of things.
My second idea was to do a design (well more of a redesign since it was already made, but not put online yet) of the Department of Visual Arts website for the art department at my school. This idea I knew would take a lot of work, and would require a lot of time outside of class for me to get it done, especially since we were assigned our final project about 3 weeks before it was due! As you can probably guess from the title of this post, this is the option that I decided to do.
The process I went through is similar to what is explained in an article written by UXMAG called The Layers of Design: the style layer. In it the article describes the layers of design when creating a website. I have grouped my process into the layers that they described.
Information Architecture
This layer is all about defining what content will be on the site, and where it should be placed so that the user can get to the information that they want quick and without problems. I wanted to have a complete navigation of the site in the footer so that the visitor could quickly jump to any page on the site with a single click. Also, I wanted to have contact info on every page so that the viewer could quickly click on any page to see contact info. To visualize this, I created several wireframes to show how content could be placed on the site. This is the wireframe I created for the homepage.
Interface Behaviors
Among other things, I really wanted this site to “pop” visually. One of the things I did to achieve this was to have a stylized drop-down menu for several of the menu items on the top navigation.
Visual Hierarchy of the Content
For the home page, I decided on putting featured gallery pictures and other important things into a slideshow. Also, older galleries or featured items were placed into smaller, but still visually important boxes. Lastly, the navigation and contact info at the bottom allows the visitor to quickly access any other page on the site, or see how to contact the school. On each page I tried to make it as noticeable as possible that certain things like titles and such were important.
This is the finished design of the home page, which I created in Photoshop. The colors I used were picked to try and provide as much contrast between each other, but without making your eyes hurt! I also tried to use some green in the design, since that is the school’s main color.
Layout
Ever since I learned about grid systems, I’ve been meticulously designing on a grid. Some people might say that a grid is restrictive, but I think that’s crazy. If anything, grids provide a framework that, if used correctly, can really make a big impact on your designs.
Below is the home page with the grid visible. I used a grid of 12 columns, each one 60 pixels wide, and with a 20 pixel right margin on each of them except the last. This added up to make the page a total of 940 pixels wide, which is small enough to fit on a 1024×768 monitor.
Style
The site’s background is almost white, but with a touch of green. I originally planned for the colors of the site to change according to the seasons, and if the site was actually developed I would probably turn that idea into a reality. As I said before, I wanted to make the site’s design pop, but I also wanted to ensure that it was accessible and readable (after all, who wants to read something if it gives you a headache!). To do this, I decided on putting textual content in a white box, and used a dark grey for the text.
In Conclusion
This project took a lot of time, but it’s probably one of the first projects I’ve creating for a class that I can actually look back on and appreciate. I spent a ton of time on it, and I’m amazed that I was able to get it completed in time. I hope you guys like it as well!
If you want, feel free to check out the complete site. If you have anything to say about the site or the process I went through when creating it, feel free to post a comment below!
Great work, now all you have to do is convince them to use it!
Dec 28, 2009 @ 5:17 pm
@twe4ked:
Yeah, especially because this is what they’re planning on putting up.
Dec 28, 2009 @ 8:45 pm
Really nice work, Chris. The finished site looks great! I can’t believe they wouldn’t use your design, especially considering the site they’re thinking about using! Woof!
If you do convince them to use your site, you will want to get some fixes in place for IE, but for the love of the web, convince them to use your design! ;)
Dec 29, 2009 @ 9:12 am
Nice work Chris. I hope you got an A and a job lined up. Regardless they use your design or not, its good stuff.
Dec 29, 2009 @ 9:32 am
wow, i just looked at the site they’re planning to use… your accomplishment is all that much more remarkable if that’s the environment you’re in.
Dec 29, 2009 @ 9:34 am
@Adam: It’s not that they wouldn’t use it, but that it was for a project. I don’t want to get into too many details on here, but the site being put up was done by someone else as a senior project. If, however, for some reason they get interested in using mine, I’ll be sure to make sure my design plays well with IE.
@Mike: Haha…I don’t want to even comment on the environment in fear of it coming back to hurt me. I’ll just say you can get a pretty good idea of what it’s like from the links I shared.
Thanks for the comments guys!
Dec 29, 2009 @ 4:37 pm
This is really great work!
Don’t listen to people that say grid systems are restrictive. Because you’re right, that’s crazy talk! The use of the grid in your design is a bit obvious, but it works.
Again, really great stuff. Hardly anything to criticize here. :D
Dec 30, 2009 @ 8:56 pm
Social comments and analytics for this post…
This post was mentioned on Twitter by cvalleskey: Design Process: Department of Visual Arts Website http://dssurl.com/FD...
uberVU - social comments
Dec 28, 2009 @ 6:31 pm
[...] This post was mentioned on Twitter by Chris Valleskey, jakeshirkey. jakeshirkey said: RT @cvalleskey: Design Process: Department of Visual Arts Website http://dssurl.com/FD [...]
Tweets that mention Chris Valleskey – Design Process: Department of Visual Arts Website -- Topsy.com
Dec 27, 2009 @ 11:20 pm