Final Project – Website Design

For my final project, I had the task of adhering to design standards, but also trying to create something unique and different. My project was to create web comps on a portfolio of graphic design work I have done and before starting, I researched several different portfolio designs. I have been taught this for a number of years and it still rings true that it is important to sketch out your designs before running to the computer. This especially is helpful when designing multiple pages. My initial homepage draft was created a few weeks ago, but I definitely had to improve on it. Tom Hanson (in the blog Seeking the truth) was the classmate who critiqued my initial drafts and was partial to my second draft, because there were less visuals. I initially agreed, but after sketching out all of my website comps, I wanted a unifying theme…

Homepage

Homepage

First, my edits to the homepage were to have less text. I replaced my first two projects and their rather lengthy text explanations with four buttons (that also have a torn photograph look, falling in line with the rest of the design) with images of the latest projects and a short two lines on my latest work with only two lines of what the project is. After viewing websites (nationally and internationally), the less is more look is definitely more eye-catching (as my peers have pointed out as well). I did not create this site with an international audience in mind (unless this becomes a real, profitable venture…which is a dream at this point), so I did not want to overload a potential customer with too much text for a site intended to be mainly visual in tone.

The General Layout

I decided to stick with a modified version of the first draft. While the website background maybe seem a bit cluttered, that was a decision purposely made. I wanted an organized cluttered feel to it. The reason being is that I like to stay diverse in the designs I make and I want a viewer to know this right off the bat. You only get one chance to make an impression (so the expression says), so I thought why not show off (in a way) all of my work in a montage sort of way. To contrast this theme, I kept each page relatively simple in terms of text as to not overload the viewer. I choose the banner (with my name and the title of each page) to be a bright color to contrast with the black and white montage created on the background. I went with the “Hello my name is” name badge design simply because it is a clear and simple way of “introducing” yourself on the homepage.

For the rest of the pages, I kept this look for continuity purposes, but also chose each color of the tabs to change with the banner. I did this for aesthetic purposes, but to also “brand” each page so there is no doubt in the viewer’s mind which page they are on and make each page unique.

Portfolio

Portfolio Page

On the portfolio page, the first thing I did (on my instructor’s advice), was change the color of the tab layout from white to purple. I initially wanted all of the colors to be primary and then secondary, but settled on the page being purple because it is my favorite color and the most important page (that I would want to draw attention to). This is also the only page I gave a different look to. I had the black background that all of the other pages have, replaced with a corkboard look. I did this because, I personally use it (the one used is actually my board) to tack on quick post-it notes of ideas, sketches, etc. I used the board to showcase various projects on the board. The basic idea is to keep the page clean and simple. When you click (or possibly highlight if it were a Flash design) one of the six squares on the left, that would reflect in the image on the right. For instance, the Voices of Hope graphic (second from the top) is highlighted (as designated by the Outer Glow blending mode). On the right side, the highlighted item would appear with a brief synopsis of what the project is about. I did this because I didn’t want to redirect to user to yet another page to see the work and wanted to keep things simple from a functionality standpoint.

About Us

About Us Page

For this page, I gave a quick blurb about who I am and why I design. I also took a screen shot from a YouTube video I shot for 501 and pasted it in the page as I think it would be great for the viewers to be able to hear and see who I am and what I do in video format. Lastly, I included a post-it note with a link to a pdf format my professional resume.

Services

Services Page

This page is fairly straight forward with a listing of services I would provide a potential customer. While this is fairly simple in terms of content, I don’t want people to really have to dig to find out what services we provide or have it buried in an About Us section. I would have the links of the services be clickable to specific projects in the portfolio for folks to see examples of the specific services. The montage banners are also to serve as small snapshots of work done in branding, print and web areas.

Blog

Blog Page

I think a lot of websites today have this function as it humanizes the website and helps create a personal tone for the site. I used a real blog I wrote on being in a “rut” in terms of creativity and fortunately, I do have a good amount of blogs I have written on the subject of design, so this would be a function regularly utilized on the website. I would also have the latest blogs scroll down from newest to older on the page with a link to archives. I find that I don’t read people’s blogs as much when I only get the first few lines and a click more, so I would post an entire entry. On the left side of the screen, I included menus to the latest blog archives, popular search categories and a link to the RSS feed. The picture of me down below is the same as the homepage button, which is basically used for continuity purposes.

Contact

Contact Page

This page was fairly simple. I had the page consistent of a physical address and email as well as social media icons as other ways to contact and connect with the site. I think it is important for websites to embrace these forms of media and I tend to trust websites that utilize these progressive forms of communication.

Design Techniques

The smart guides and gridlines were a lifesaver for me on this project. This is something that works much better in CS4 and saved me much time rather than just measuring out with ruler guides as I had done in the past. I also tried to tie in many of the design techniques we had used during the course of the semester. One constant theme is depth. The main banner for each page has the torn effect, which is intended to be placed under the black and white layers. Even smaller elements, like the social media icon post-it on the front page or thumb tacks on the portfolio elements use this concept.  In terms of color, I wanted to keep the look simple, yet prominent. I think the banners gave a great sense of contrast to the busy black and white montage in the background. Another big help when creating graphics, rather than creating them in separate files, I would convert a shape to a smart object and then edit its contents. This saved me a ton of time and was able to make edits within the document, rather than having several windows open.

To me the project was a fun experience that I think may have a possibility of actually creating. It was a great trip looking at old designs I had not looked at in quite some time and designs I thought were awesome even a year ago, just did not hold up, so I had to be very picky with this project. While some of my better work was created working for national brands that I could not really showcase, it is rewarding to know that everything on the page (sans the social media icons) were elements that I created. It may sound kind of self-serving to create a project based on things I have already done in the past, but I wanted to create something that has personal meaning to me and I can be passionate about.

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>