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.

Nelson Exhibit

To continue on our education of our topics, we pretended that the Nelson was hosting our artist/ movement's work through a new exhibit. After we learned about the fundamentals and psychology of posters, we were introduced to our new challenge: creating a poster advertising our artist or movement at the Nelson.

Luckily, I had already attained a substantial amount of information about Milton Glaser through previous assignments, so I did not have to spend a lot of time researching. I knew that before I did anything, I needed to get some inspiration, so I searched for Milton Glaser art. As I expected, a lot of what appeared was Glaser's iconic swirls. I knew that I wanted to incorporate swirls in my poster. I

also knew that I wanted to include a shuttlecock because the art museum has giant shuttlecocks out side of it.

I started off by sketching 20 sketches of what my poster could possibly look like. Through the first half of designing my posters, I was on a roll, but after that I started running out of ideas. Many of of my possibilities included swirls and shuttlecocks. I also had some with simple pops of shapes, the silhouette of Glaser's face, and the Nelson building. Looking at all of my roughdrafts, it was hard to choose just one. I finally decided that I would go with the coclorful swirls as the shuttcock with hands holding it.

I thought that creating this poster would be super fast, but it actually went to the last minute to make. I mainly created my poster by using the pen tool to trace out the shuttlecock and the hand. I did this in great detail. Afterwards I started making my swirls. I initially used the swirl tool, but after a long time I decided against it because they werent turning out the way I wanted them to. Instead, I used the pentool to draw them out myself. After I had my swirls, I chose bright colors and filled them in. Next, I used path finder to put my swirls "inside" of my shuttlecock. Lastly, I chose a black background and placed my graphics on top, along with the text.

I am very happy wiht how my poster turned out. I think that it reflects Milton Glaser's work, and I might even consider it to be my best work.

the Effect of Posters

What do posters do?

Posters are more than just pieces of paper. A good poster effectively conveys its message, whether the message is urging the beholder to purchase the latest cool piece of technology or informing the beholder about the importance of brushing your teeth. No matter what the purpose is, posters intend to manipulate our actions. Posters range from economic purposes to cultural ones, as well as political and social purposes; they enlighten and give us information, publicize/ advertise a product, and entertain us. Posters are meant to inform, stimulate, activate, mobilize, provoke, convince, and motivate. 

Poster Design

Posters communicate their message through picture and text, which in some cases is more effective, and in others, not so much. A poster is meant to be eye-catching and so incredible that it is impossibly avoidably. Different posters intend to draw different people in depending on their age, character, level of education, and mood. However, some poster designs are so irresistible to everyone which makes us ask: why? There is no answer to this, for it is impossible to explain design and its effect. However, color, composition, contrast, proportion, quantity, rhythm, dynamics, extension, etc... all contribute to how impactful a poster is.

General Demands

Posters should not be confusing. They need to be easily understood, with the message easily conveyed, and they need to be legible. Posters must be interesting and provoke the person who sees them. Because that's what posters' purpose is: to inspire someone to do something or learn more. A poster designer must keep in mind that a poster needs to be legible from a distance; this means that large shapes should be incorporated. Up close the poster should have detailing that does not take away or confuse from the main idea. In addition, posters should be memorable to the viewer.

Lettering

Lettering combined with picture has a strong effect. Lettering that is inside a picture implies that it is a part of the whole composition. As well as if it is similar in spacing, color, and size. Lettering should be concise and simple to quickly get across information.

Shapes

The purpose of a poster should be clearly executed by shapes. Shapes should produce a well composed surface that is very interesting and easily and quickly readable. Different shapes produce different effects: The diagonal shape and the rythmitzed form produces a dynamic effect, the correct trimming supports the effect, a lapidary shape of the picture can release a strong effect, horizontal and vertical shapes produce a static form, etc... Overlapping wording and pictures creates unity, increases dynamic and rhythmic effects, as well as the impression of depth and elegance of the poster. To emphasize the main point of a poster, it is important to place the main optic point in the center. The purpose of a poster should be erased of any irrelevant or superfluous details because these things derail from the significance of a poster.

Color

Color is an important element off an effect poster. Color expresses emotion. It is innovative, strong, fascinating, and expressive. Color, through its psychology, can clarify situations and evoke different emotions.

My Thoughts

There is more to posters than what meets the eye. It is amazing to see all of the key elements that make an effective poster. It is fascinating how color, shape, and text, three simple things, can be executed in such different ways to communicate a different message and stimulate people to do and think certain things. I will keep in mind that such simple aspects make a huge difference in the overall appearance of a project, whether it's a poster or any other kind of art.

Flash

a common example of a Flash website

the burger moves when hovered upon

Flash is a web-based video, animation, and interactivity software that enables awesome and diverse websites to be created. It consists of small animations coming to life when they are clicked on or hovered above; it consists of sound effects and music. Flash plugin became very popular because it made sure that this incredible content would appear the same for any and every computer and web browser. Despite how amazing Flash is, its popularity is dying. This is due to the fact that it is complex and has gone through many versions, and is hard to preserve for future generations. In 2007, Apple announced that the latest iphone would not support it because of these reasons. Steve Jobs said Flash was "insecure and resource intensive, and its plug in was overly proprietary". Apple shifted its focus from flash to HTML5 and Java script because they were based on open standards that web browsers could easily support. Apple's exclusion of Flash was a big deal because many website games had Flash. Luckily, apps that used Flash were still available. In 2011, Adobe also stopped allowing Flash, and it switched to Edge animate, which, was renamed Animate CC in 2015. Animate CC was announced to be the new web animation tool, and urged developers to abandon flash. By 2015, HTML 5 had evolved and was taking over the web. However, Flash hasn't been completely abandoned. Facebook is Flash's last hope, but it looks like Facebook is also going to give into HTML 5. Google Chrome recently announced that it is blocking Flash by default. Flash has not completely vanished from the web; animations and videos and parts of websites can still include flash, and you can still access it by clicking an opt button. However, not an entire website can be made from flash.

what shows up on flash websites

learn more about Flash here

What's the Big Deal About Tiny Houses?

Home page

For our final in Web Design, we were supposed to combine our skills from previous projects into making a web page about something we are interested in or passionate about. I am very interested in anything having to do with tiny houses, so that is what I decided to dedicate the topic of my website to.

All of my docs

 We were required to include information about our topic in our own words, so this project required a lot of research. Because I am very interested and passionate about tiny houses, I had no problem with spending a lot of my time, both in school and out of school, researching my topic. After all of my information had accumulated, I realized that I had far too much information to make just one sub-category of. I ended up having information on the benefits, designs, and mindset of tiny houses (each with multiple sub categories).

My banner

My graphic

Once I had all of my information on tiny houses, I was ready to design my web page. Luckily, we didn't have to make one from scratch; we had previously made out Real Or Hoax? page that we were able to simply transfer our information to. At first, I had no idea how to design my website, but after making a web banner, I based my color scheme off of it. This brought my website together. The light and dark burgundy, cream, and green colors really evoked a comforting feeling that I wanted to portray through my website. In addition, I made a simple graphic to place beneath my side bar. I made the "H" in houses into a house my adding a roof.

Links page

Next, I had to do all of the technical work. I  linked all of my pages together (which took a very long time considering hoe many pages I have), put pictures on all of the pages, and found links for each page. It was a little bit frustrating having to use the "label for reuse" button when searching for copyright free images because I knew that there were really good tiny house pictures that were copyrighted. Eventually, I accumulated a good selection of pictures. After that, I found multiple links to strengthen my page and to let viewers learn more about tint houses.







Overall, I enjoyed this project (mainly because I enjoy tiny houses), and I think that it turned out very well. See my website here.