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 , , , , , , , , , , , ,

Saber: Street Artist

One of my favorite street artists is Saber. I think he makes many valid points about the health care system and how we’ve really come to a crossroads in our country. We’re so divided, that progress is at a stand still, and we need to do something and come to a compromise. We need more people: artists, designers, and educators to challenge the system and make their voices heard. His piece reminds me of Jasper Johns’ American Flag.

Tagged , , , , , , , , , ,

Magnolia Fine Arts Magazine

Magnolia Facebook Page

Magnolia Web Page

So this year, I was on the Magnolia staff, Maryville University’s fine art’s publication. It was a rewarding experience, but also hectic. I worked on the layout and cover design with Sarah Kidwell. We had about a week and a half to design the whole thing and get it to the publisher, Midtown Printing, in Saint Louis. They did an excellent job; this year we chose to foil stamp the cover design. I had never worked with foil stamping before, so I was a little wary about the delicate type and serifs getting messed up . . . but the cover turned out great, even the printing on the spine is legible.

Magnolia, Maryville University's fine arts publication.

Magnolia, Maryville University’s fine arts publication.

This photograph I took doesn’t do the book justice, but I just don’t have a good camera right now or good lighting. I’m planning on taking much better photos once I’m back in school and have access to all the equipment. But for now, I’m posting these images to give you guys an impression.

Inside cover of Magnolia

Inside cover of Magnolia

I’m really excited for next year, I can’t wait to work on the next publication. But I want to start the layout early regardless of if the submission deadline gets pushed back. It would be nice if we don’t have to pull a bunch of all-nighters again. But even with all the work, it was a great experience and I liked working with our editors and other staff members who were all very cool. The magazine wouldn’t be anything without all of them, it was definitely the success of a team effort.

Tagged , , , , , , ,

Graphic Design Capstone Ideas

fuseproject: Blog.

One of my main interests is sustainable and reusable packaging. Fuseproject is the studio that developed the clever little bag, a shoe bag instead of a box for Puma. It uses 65% less material. For my capstone next year, I want to focus on reusable packaging, and this is what actually sparked my interest. I actually bought a pair of Pumas that came in this box and still have and use the bag.

Clever Little Bag by Fuseproject

Clever Little Bag by Fuseproject

I really enjoy packaging and the idea that its life does not end when the consumer throws it out. Packaging can have a much longer life, and I’d rather that it not be in a landfill, but in a home providing utility. I have just started brainstorming about ideas for my capstone project, but I feel like this is the direction I am heading in. I want to come up with a package that is useful after the consumer buys the product, and thus not discarded. I ordered the book Cradle to Cradle By William McDonough & Michael Braungart which was recommended to me by my design professor, it’s on my summer reading list. If anyone else has any ideas or sources about this topic, it would be great to get some other opinions!

Tagged , , , , , , , , ,

National Blues Museum Windows

This slideshow requires JavaScript.

This project is something you do once in a lifetime, it a very unique opportunity to be a part of.

Recently, my graphic design class at Maryville University participated in painting the windows of the soon to be museum for the National Blues Museum located on Washington Ave. in Saint Louis, Missouri. The window mural is about a city block in length and 11 feet tall. The goal of the mural was to incite a sense of liveliness and energy in the area and for the future museum. The windows are creating a lot of buzz and interest in the museum. The blog documenting our class’s work and progress can be found here.

We were also featured on KPLR Saint Louis, here is the link to the video.

I helped come up with the concept and design for some of the windows. Below is the section I designed.

section of the National Blues Museum Windows I designed and partly painted

Planning the concept for the National Blues Museum’s window mural was a project that was unlike any other I have had in school. First of all, I was surprised at the creative freedom we were given in planning the design for the windows. There were very little requirements other than the logos for The MX District, The Laurel Building, and The National Blues Museum that needed to be included. I found it a challenge designing for such a huge scale. It is hard to imagine how your work will transfer once it has been blown up to scale.

This was my first time working on a project with real clients. I had imagined they would be much more demanding and strict, but in reality, they were very friendly and provided us with lots of information on the project and building.

The whole project still didn’t seem real until we were at the site and started prepping the windows and drawing the outlines of the shapes. While working on the windows, it finally came together in my mind that this project was actually happening. Up until that point, it still seemed like a fictional class assignment. I was excited to finally see our concepts put into action.

Overall, I had a lot of fun working downtown on the windows. Many pedestrians were curious about the project, asking questions and taking pictures of us working, which I believe will really work in favor of the museum. I think that with the attention we are receiving for just the basic window prepping, when the actual painting is up, people will really be excited and curious. Overall, I found the work very engaging and challenging because we were transferring a drawing from an 8.5” by 11” sheet of paper to windows measuring 5.5’ by 11’. This project is something you do once in a lifetime, it a very unique opportunity to be a part of.

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 , , , , , , ,

Portfolio

This slideshow requires JavaScript.

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 , , , , , ,