Month: June 2014

Project 7 Web Page

P7SusanWallscreenshot

Description: This is a webpage detailing the design process for my logo project. We learned a little bit of HTML and CSS.

Process (Programs, Tools, Skills): I used Notepad++ to do this project. I have used it before and am somewhat familiar with HTML and CSS. I inserted my logo image into the html.  I wrote a paragraph about the scope of the project and the process of picking the colors. I created a bulleted list outlining the steps of the logo creation. Then I opened my logo in Photoshop and used the eyedropper tool to find out what the hexadecimal codes were for the colors. I tried to use the same orange on the background, but it did not look good and detracted from the logo being the focal point, so I found a lighter shade that I think looks nicer. I decided that I wanted to repeat the blue bar at the bottom, so I persisted until I figured out how to change the CSS and make it work. I decided to use the sans-serif font for the body and the serif font for the headings. I liked the white font for the h1, but the instructions said to change it so I changed it to the same peach color that I used for the background (even though I like the white better).  We were given the CSS code and changed various elements in it to customize it. My word count is: 429 words.

Message: The message is about how I designed my logo for the web app that my husband is working on.

Audience: The audience is my teacher and classmates. I really don’t think anyone else particularly cares about the design process of my logo.

Top Thing Learned: I figured out how to duplicate the blue bar at the bottom of the page. It was a little challenging, but I finally made it work.

Color scheme and color hex: Complementary color scheme; #f7cebc and #096895

Title Font Families & Category: Times New Roman, Georgia, serif; Serif

Copy Font Families & Category: Arial, Helvetica, sans-serif; sans-serif

Changes made to the CSS: I changed all the required things: The h1 text color & background color, font colors for the paragraphs & list items, the background color, Font Families and I add at least one css comment. I also changed some padding etc. The main change that I made was to add the footer similar to the H1 background, but change it for the footer:

.footer {
font-family: Arial, Helvetica sans-serif;
font-size: .9em;
font-weight:normal;
text-align:left;
padding: 10px 25px 25px 25px;
background-color:#096895;
color: #FFFFFF;
border-radius: 0px 0px 15px 15px;
-moz-border-radius-bottomleft: 15px;
-moz-border-radius-bottomright: 15px;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
}

I also changed the border of the body to transparent so it would not show.

 

Link to my video displaying my print quality: https://www.youtube.com/watch?v=C6gOdeZYK_U

 

Advertisements

Project 6 Stationary

Letterhead:

P6SusanWall

Business Card (81/2″ x 11″ layout)

P6SusanWall2

Business Card (large layout):

 

bigbusinesscard

Description:

This is stationary with a matching business card using a logo I created for my website.
Process (Programs, Tools, Skills):

I designd the logo first and I thought I read somewhere where we could use a picture, so I did. But then I realized that we can’t use a photo, so I had to redesign it a little. (I will still use the one with the picture on my website though.) I played around with the fonts a lot and ended up downloading the font Great Vibes. After watching the office hours video, I decided to try some texture in the background. I made my own texture using a pattern overlay in Photoshop and saved it as a .jpg file and then placed it in my illustrator file. I wanted to use a brown line underneath for repetition from the table above and I decided that it would look nice to have the text under it. I played around with some different blending modes, but I didn’t like the way it looked with them. I decided that I wanted the text underneath the line to all look the same. I used a bullet for a separator. I added a tag line so clarify what it is about. I varied the spacing on the back of the business card to add a little more interest since the font that I picked had no styles and I didn’t like it in red.
Message:


This is for a website that offers material for computer classes for adults, specifically for the classes that I teach.
Audience:

This is mostly for my students, but I could use it to generate outside interest as well.
Top Thing Learned:

I like InDesign better for choosing fonts, because I can select the text and click the font box and then use my arrows to go down the list  and see what the font looks like in my project. It seems a lot more efficient. I haven’t figured out how to do that in Illustrator. I also saved the logo as a transparent image so it looks on a colored/textured background.
Color scheme and color names:

Analogous: brown, red, gold
(I picked red and gold because most of my students are Asian and those are special colors in their culture.)
Title Font Name & Category: Great Vibes, script
Copy Font Name & Category: Microsoft Yi Baiti, sans serif

Link to my video: https://www.youtube.com/watch?v=Ej5RhxGxO-U

P5 Logos Project

SusanWall-P5Logos

Description:

These are logos designed for a mobile web app that my husband is working on entitled: “Teez the Moment.” People can take pictures of special moments and then immediately order a t-shirt with the picture on as a fun remembrance of the occasion.

Process (Programs, Tools, Skills):

The first thing that I did was to search Google images for t-shirts. Then i used the pen tool in Illustrator to draw a “female looking” t-shirt. I add text and did quite a few layouts. I was excited about some of them and they were pink, black and white. When I showed them to my husband, he told me that it looked like some thing for a breast cancer event and that he didn’t want it to look like it was just for girls. I was discouraged, but went back to the drawing board to try to come up with something more unisex. I found a “male looking” t-shirt and drew one of those. Then I begain playing around with colors. We didn’t necessarily agree on color schemes. I got a lot of feed back and changed some text, colors and a little bit of the design and finally came up with a color scheme that he and I both like.

Message: 

The message is that you can capture special moments and put them on a t-shirt.

Audience:

Those who tend to live on their phones and like to take pictures of the fun moments in their lives. I originally thought this was a “girl” thing and designed “girlie logos”, but my husband didn’t want to discourage males from using it.

Top Thing Learned:

You really got to thoroughly question your client and make sure that you know what it is that they want and it’s hard because sometimes they are not too sure what they want. I didn’t realize the scope of the audience he had in mind.

Three Color Scheme and Color Names:

Analogous: Lime and blue
Complimentary: Teal and Peach (light brick)
Monochrome: Violet

Three sets of Title / Body Font Names & Categories:

Nueva STD: serif/Gills Sans MT; sans serif
Nueva STD: serif/Gills Sans MT; sans serif
Gills Sans MT; sans serif/Nueva STD; serif

Votes on favorite logo:

Top Logo = _7__; Middle Logo = _2__; Bottom Logo = __1_;

At first, most people liked #1, (they didn’t like the original colors I had for #2; My bottom one was different and I liked it and my classmate that did my critique liked it. But then I decided to make the bottom one text only and changed the Title text font etc. Once I changed the colors on #2, I liked it best and so did some of the other people that had voted on. I feel like #2 is the stronger design.

My favorite logo is ___#2___.

The link to my video is: https://www.youtube.com/watch?v=1mkaEubooYs