Category Archives: Web Design

Portfolio Website: Sabotagedesign.net is Up!

sabotagedesign.net

I recently created a wordpress website for my portfolio. This site primarily showcases my graphic design work for potential employers to view. Basically, I created a child theme from the parent theme Swiss Design. These themes are all clean, easy to use, and customizable. I would certainly recommend them to someone looking to create a portfolio site. The one I chose was also free (something I can’t really afford to pay for at the moment). I mainly just edited the CSS and HTML files since I don’t know much about PHP. I didn’t want to break the format from my parent theme, since all I was looking to do was to change the background, add a drop shadow, and create a customized header for my logo (pretty basic web design stuff). That’s why I really liked the Swiss Design theme since I could easily visualize how my site would look.
I may be making some changes to the header, I don’t entirely like how the logo sits in the box, I feel like there is some awkward negative space that needs to be dealt with, but the most important thing for me was to get the sight up, working, and presentable. I will probably fiddle with details later. The typeface I used for the logo I found on FontSquirrel. I use this sight to find many free fonts (again poor). Gladifilthefte was the typeface, I added embellishments to it as well as creating a ligature between the two ‘G’s. Overall, I hope this site will be easy to manage and get me some work in the future!

Tagged , , , , , , , , , , , ,

Event Website for Feeding America

Kids for Kids Website

Mobile Home Page (for iphones and other smart phones)

Our second website for Promotional Design at Maryville University was to create a website showcasing a fictional event for an existing charity. My charity was Feeding America, and the event I devised was a night where children learned to bake in the kitchen with their parents. The treats they made could be donated to a local food bank, and the children could have fun baking cookies and such and enjoy a treat afterwards. Also, donations would be accepted at the event while the charity was promoted.

My targeted demographics were children between the ages of 6 to 14 and their parents. I wanted my website to be fun and inviting but also informational and promote the charity and event. The style I chose was very illustrative. I created many paper cut-out like illustrations in illustrator. Then in photoshop, I added noise to the illustrations to give them the illusion of texture. The typefaces I chose were Patua One (a blocky slab-serif), Londrina (an imperfect cut-out sans-serif), and HamburgerHeaven (a kitschy 1950’s retro serif). I choose these typefaces because they conveyed a sense of fun and light-heartedness, and they fit with the cut-out illustrations I had drawn. The HamburgerHeaven typeface also references food and restaurants alluding to my baking theme.

For this website, I was determined to try something completely different from my usual style and thus break out of my box. This past year, I have been designing more serious pieces for a more reserved demographic. I wanted this website to be fun, colorful, and the typography to be kitschy and loose. I think the style I chose worked quite successfully with my targeted audience. I had a lot of fun designing the website, and found it a refreshing break.

For the layout of the pages, I chose to do one long, vertical scrolling website. When clicking the navigation, the site would slide to the corresponding page. There were four pages total, home, donate, about, and sponsors. I used jQuery for the scroll feature as well as an image slider that displayed infographics about child hunger. I included a twitter feed that automatically displayed content from Feeding America’s twitter page. We also had to design and code the home page to be viewed on a small format such as an iPhone or other smart phones. I simplified the home page a great deal for the mobile version mainly because people viewing the site on their phones don’t want to read a bunch of microscopic type and are usually on the go, so they don’t have time anyways.

Overall, the most challenging aspect of designing this website was the center alignment. I had first organized the navigation in the center of my header, surrounding the logo. However, there seemed like too many elements in the center, so I ended up moving the navigation to the top left. Additionally, some pages were hard to design due to the center alignment. I learned that center aligning type is extremely difficult to do well, and I will be wary about undertaking it in the future. Also, center aligning type often makes the content look disorganized and messy. It is hard to create order. I feel like I did my best by justifying some of the type to create order.

I am very pleased with the way this website turned out. I’m glad I chose a contrasting design aesthetic to my own that will add variety to my portfolio. It was a fun and challenging project to work on. I only had about two weeks to code it and, for the short deadline, it turned out surprisingly well. I feel like I am getting the hang of this web design thing.

Tagged , , , , , , ,

Web Design: Challenges and Triumphs

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.

Tagged , , , , , ,