Contour Contemporary Furniture Store Site
Currently, I’m enrolled in Web Design II at Maryville University, and our first project this semester was to create a website for a fictional business of our choice. This included brainstorming and conceptualizing the business itself, and creating their identity and visual style. We even filled out a design brief and included a bit about their background to better understand the targeted market. Overall, I thought these preliminary steps were necessary in order to better understand our business and create a strong design.
I named my company Contour and envisioned it as a modern and contemporary furniture store that focused on creating furniture for the urban dwelling middle and upper class. An important aspect I wanted to stress was conservation of space through design by creating a very clean and modern look and also by using thin sans-serif typefaces like Raleway and Helvetica Neue. Through the images I chose, I tried to convey functionality, cleanness, and compactness. Some things I wanted to avoid were bad connotations associated with modern design such as coldness, exclusion, and a lack of humanity. I wanted my website to be inviting but sophisticated, so I chose a warm color palette with brown, tan, yellow, and a rusty-red. I was lucky to find a lot of great photographs on flicr that were large enough to stretch across my entire page and had some of the same color tones in them. My next step was to create a comp in Photoshop, and then get started on the design.
Because I was on spring break and I did not have dreamweaver (and I had already used my 1-month free trial), my professor Jon Fahnstok suggested that I use a program called Coda to design my site. This was new to me, I had never used the program before. It took a little getting used to, and my flow changed a bit. I felt like I was looking at the CSS page a lot more than I do in dreamweaver, which helped me understand more about the process. Overall, it took a little more time to design, and I had to test a lot more, which wasn’t a bad thing. But in the end, I got the hang of it. I was able to lay out the basic structure and get everything into the html that I wanted, but once I returned from spring break, I was glad to switch back to dreamweaver to do the jQuery portion of my website. I created an image slide show that showcased furniture with a second slide show that had about a 2 second delay with descriptions that faded in, describing the different pieces of furniture. I expected the timing and overlap of the two slide shows to be more challenging and code heavy than they actually were. With a little playing around with the timing and absolute positioning, I was able to get the slide show working correctly.
I think the most challenging aspect of this project was the positioning. I wanted the contents in my header to be centered and inside my grid, but the image slide show was to expand to 1080 pixels, larger than my 960 grid but remain centered. For a long time, I struggled to get the slide show to center correctly so the viewer could grow and shrink the window and the slide show would always be centered in the screen. Then Jon showed me that I had to create a container for the contents to live in and set the margins to auto, so I could absolutely position the box and have the contents centered within them.
One thing that I know I need to work on is to use less div tags, and to have my css styles work for more than just one tag so I don’t need to create a new one for each additional piece of content. I think this is easy to understand, but hard to carry out because when I started designing, I knew what my home page was going to look like, but only had a vague idea of what the supporting pages would be like. So when I decided I wanted to have a light background on my supporting page because the images looked better, I couldn’t use a lot of the css styles for my paragraphs and headers because they wouldn’t show up on a light background well. Another thing I struggled with was the layout of three columns I had on my home page. There was some awkward space that had been created next to my small images and a paragraph describing the business. I tried many different ways to resolve this, but in the end, I eliminated the paragraph and replaced it with a big tagline under the image “Contour- innovative design for urban layouts” which I felt described the business well enough, and combined with my images, seemed sufficient.
Overall, I am happy with my website, and I feel like I was able to successfully convey the company ‘s vibe and reach my target market. I feel like I learned a lot, and I am more comfortable with html and jQuery. I feel like I can proudly put this website in my portfolio, and hope it will successfully show off my knowledge of web design.