Logos

Logos are used for many different purposes. As a result, there are many different types of logos, but all of these logos- as long as they are good- have commonalities. Good logo design follows a few rules. Logos should be easily recognizable, remembered, and recalled. They should be simple and unique in a way that represents the company or goal that it is for. Logos should be portrayed to the intended audience. If a company is for kids' toys, it wouldn't be a goof idea for a company to use harsh, dark colors and jagged lines, or a child might be scared away. A good idea would be to use warm, welcoming colors with rounded edges or even circles. These are good pointers to keep in mind when designing or observing logos. Now lets explore the different types of logos.

The different types of marks

hp is a lettermark

Lettermark:

letters that are shortened from a long name or word or are abbreviated. 

Target is a symbol

Symbols:

a mark without type. Symbols are simple, unique, and should be easily recognizable. 

Cocacola is a logo

Logo:

word or words in type.

Nike is a combination mark

Combination Marks

symbols and logos used together. Nike is an example.

Interesting Facts

Closed Gestalt:

A symbol with an internal vocal point seems safe and inclosed, while a logo that has many different lines going in every direction, is unsettling (this is called open gestalt). 

One Color:

Symbols should be designed to look good in a single color. Colors can enhance a symbol, but they should not be completely depended upon. Sticking to no more than two or three colors is a safe way to go.

Direction:

The idea that the direction of a symbol pointing upward or to the right indicates positivity and moving forward, while direction pointing downward or to the left indicates negativity or moving backwards. It is important to try to stay away from downward and left pointing directions.

Responsive- Photo Composition Site

What is Responsive Design, and what makes it work?

Responsive Design allows websites to adjust to any screen size in an appealing and balanced way. Different devices support different screen sizes, and the original website that was designed for a desk top rarely looks good- or is even readable- on other screen sizes. In order to achieve responsive design, something called a media query is used. A media query is a CSS code that over-rides pre-existing code. It uses specific breakpoints for when to change the layout and position of objects on the screen. These break points are based upon the size of the screen, so when the break point is reached, the website changes its layout design. Different media queries are used to represent specific breakpoints.

media query for tablet sizes

Without responsive design

This is what my Photo Composition site looked like on a smart phone before adding responsive design. It looked a little different before, but I didn't save the original. As you can tell, the text is very small and the main is very stretched. In addition, the menu does not hold all the link text.

Responsive design on a mobile phone

After adding responsive design, the menu panel was moved to the bottom to allow more space for the text at the top. It is a lot cleaner and a lot easier to read. I did this by adding a mobile style as the media query.






'

Responsive design on a tablet

Using the tablet style as seen above, I created the layout for my website that would look good on a medium- sized screen. I added in percentages to allow the main to shrink to the size of the screen so that no information would be cut off. The menu panel is still on the right side because there is enough space for it to fit well.

Responsive design on a desk top

I did not have to change anything for my desk top web site because it was the original layout. This was the longest website that we have created so far in web design. There is a home page and 13 other pages describing the secrets to photo composition. I researched each topic listed in the menu panel, found pictures, and designed the website. If you want to learn about photography and see a responsive site, click the links below.

Check out my responsive site here

Check out my original site here

Quotes & Fonts

Fonts are more important than you might think. They evoke different emotions and can tell stories. Fonts can be serif, sans serif, bold, italicized, thick, thin, big, small, swirly, boxy, welcoming and cautioning. To explore these different characteristics, I made four aesthetically pleasing typed out quotes. First, I thought of quotes that I had a connection to. I wanted my quotes to promote positivity and happiness. After I found my perfect four quotes, I started sketching out my designs, and then I started creating them in Adobe Illustrator. 

I chose this quote because it promotes positivity through a play on words. I wanted my quote to look happy, so I used a welcoming font for everything but the ‘B’ in ‘Be’ and the ‘t’/+, which I used a bold font for. I wanted the ‘t’ to look like a plus sign because it’s positive. First, I made it in black and white- as I did for all of my quotes- and then I added a color scheme. I made words having to do with blood red, and I made the rest white, so they popped on the dark blue background. I used red because, of course, blood is red. 

This quote connects to me because I play the flute, and I enjoy music. I think that this is a cute quote, and it went along with my quote scheme. I wanted to make this quote classy because when I think of music, I think of classical music.  I made words having to do with music, a cursive font, and I also made them the same purple color. All of the other words I used a simple, serif font, which I made the same blue color. I thought that the light blue and purple looked nice together, but as I found out later, there was a better color combination. I made the stem of the ascender of the 'h' into a music note likewise to the descender os the 'y'. I made a swirly measure of music coming off of the 'n' in 'note'.

I like this quote because I think that everyone should embrace their differences. I used simple fonts for everything except for ‘limited edition’, which I used a fancy, cursive font for. I also made the tittle (the dots) of the‘i’s into stars to make it seem good and special. I reflected the ‘r’ in weird to make it look weird. I wanted to make 'weird' look unattractive; I don't think that dark green is the prettiest color, so I chose it. I made 'limited edition' light blue because blue symbolizes purity and goodness. I decided to place my quote in a circle because it brought it all together, and I chose a deep purple for the background color. Now that I look at my color scheme, I don't like the color combination that much. 

This quote is very optimistic. I wanted to portray it in a positive way. I thought that a lot of the words could be represented in different ways. I used a font with arrows to represent direction words. For sun, I used a bubbly font and made rays of sun shine come off of it. For shadow, I used a font that had a shadow. I made the direction words a teal color, the sun yellow (of course), the shadow dark purple, and everything else pink. 

I got to present my quotes to my graphic design class, and they gave me feedback. They said that I could adjust some of my colors. Luckily, our next step in producing our quotes was to recolor them with different color schemes: Triad, monochromatic, primary, and complementary. 

I completely remodeled this quote because I thought I could make it better. My quote is a pun about blood, so I put my quote in a blood drop, and I used a red monochromatic color scheme to represent blood. I like the way it turned out, in this creation, a lot more.

I recolored this quote in a complementary color scheme. The colors really pop together.

This is my triad color scheme. I like how the colors look off of each other a lot more in this creation. However, now that I look at it, I should have made 'weird' in the color I used for 'limited edition' (and vice versa) because green isn't an as attractive color, and gold is like royalty.

I recolored this quote in a primary scheme because of the yellow in the sun. I kept the direction words blue, but in a different shade, and I changed the pink to red. I also added arrows coming off of the direction words to create an enclosure around my quote. 

This is what my four quotes would look like up on a wall. They all go together because they are quotes about positivity. Although they don't have the same colors, the color schemes work well together. 

Responsive web design

What is it?

Responsive web design lets the website that the viewer is viewing to adjust to the size, platform, and behavior of the device that it is being viewed from. This is done in an appealing, balanced, and flexible way.

Why is it important?

Responsive web design is so relevant today because the use of mobile devices has sky rocketed through out the past decade. In addition, there are many different mobile devices that have different screen sizes.

Media queries

A media query is a CSS technique introduced in CSS3. It uses the media rule to include blocks of CSS properties if a certain condition is true. In other words, it is the code that makes responsive web sites possible.

Narrow

 This website, when stretched, has a very symmetrical feel. The menu tabs are all perfectly centered and are very large. It is all one thing after the other: The logo, the title, the menu, and some additional information. It feels very cramped, but it is still attractive.

Medium

In contrast to the narrow layout of the website, the menu tab is at the very top of the page, and it is not as emphasized. The medium layout has more content because there is more space to present it. For example, there are multiple graphics at the bottom of the page. It feels a lot more spacious.

Large

The wide layout (a.k.a the full view) leaves a lot of room to breath. It is spaced out nicely. Because there is more space, more things can be included on the page. There is a register button at the bottom and the graphics are larger. 

Check out this awesome responsive site here.