Index Website

Previous Index Page

         This past few weeks in web design, we have been working on updating our index website to where we used one of Dreamweaver's templates. This is my previous index page:

          This page was very basic and it just had my elevator pitch from last year and links to websites that I had created. I had the background a repeating sky theme which I though personalized it and made it differ from others in the class. Looking back on this website, I'm definitely glad that I upgraded it. My new index shows how much I have advanced in web design, even if it is not as good as the professionals, I have improved this year.

The New Index 

           This is my new index website. It was made with a Dreamweaver template and is also responsive which means that it adapts to whatever device you are viewing it on. I created my own logo for it as well. I used light/pastel colors. I also rewrote the bio because the elevator pitch was too cheesy for me. This website doesn't only include my websites, but it also includes some of my graphic design projects. 

          

          The image to the left shows how my website is responsive when the size of the device is changed. 

Genius Hour

This blog is going to be different from my normal e-Comm blog. My chemistry class has been working on this "Genius Hour" project almost all year. The main objective of the project is to make something "better" in the world. My partner, Ariella, and I chose our subject to be how our cell phones impact our sleep.

 Research Plan

Sleep is an important aspect in living a healthy life, but cell phones and social media are preventing people from getting the sleep they need. Teens are known for being on their phone right before falling asleep and even though they lose sleep they continue to be on their devices. This causes many problems since the blue lights and sounds on their devices keep them awake. When on any electronic device that emits blue light, the light restrains the production of melatonin. Melatonin is a hormone that controls a person’s sleep cycle (Sleep Science). When your brain is focused on social media it makes it much harder to fall asleep (Sleep Science). Sleep is known to lower stress levels and make your immune system stronger (Nimalasuriya, Kshamica). Sleep is also known to help memory by allowing us to remember what’s important and forget what’s not (Max, D.T.). In this project we plan to create an app that will help people fall asleep faster while on their phone.

    In this project we are going to bring together science and animation/graphic design. First we will discover the sciences behind what causes a person to fall asleep. We will collect data on what elements allow people to fall asleep quicker and get a more sufficient sleep. We will use senses such as sight and hearing to help relax your body enough for a more adequate sleep. Using these methods we will then use graphic design and animation to form the app. The app will include games, sounds, pictures, and gifs to relax your senses enough for you to drift off. We will have 14-45 year olds testing this experiment. This experiment requires all ages who would have a smartphone or any electronic device.

    There are really no safety precautions or risks that come with creating this app. The point of this project is to make the world healthier by making less people sleep deprived. The app will turn off the blue lights in the device that cause the restraint of melatonin production, ultimately helping people fall asleep faster. We will analyze the data by testing it out ourselves and seeing if the app causes us to become more tired. We will test it multiple nights, then collect any data afterwards to see if our results can make a difference.

Graphic/Icon

Bibliography

Max, D.T.. Secrets of Sleep (2007). National Geographic.

Nimalasuriya, Kshamica. Is your smartphone keeping you awake at night? (2013). Natural News.

Scary Ways Technology Affects Your Sleep. National Sleep Foundation.

Marks and Symbols

What I learned...

Symbols and logos are also known as marks (or trademarks). Both symbols and logos need to be simple and easily recognized. They are representing a company so the symbol or logo needs to show that it is connected to that certain company through a memorable, simple, and timeless design. 

A Logo

A logo is a word (or words) in type that identify a brand, company, group, or project. It can be a unique way to promote and it also makes it easier to recognize the company, brand, etc. 

A Symbol

A symbol is a mark that has no type in it. It is used to identify an agency, corporation, or institution. It is also another unique and simple way to give a quick impact. There are many key factors in creating an effective symbol. It should be clean and have a good flow. To make your symbol memorable, it needs to be simple and have heavy marks, that way it stands out.

Typography

For the past few weeks, my graphic design class has been working with typography. We had to find quotes or lyrics that somehow connected to us and meant something to us. I chose all of my lyrics from my favorite band, Twenty One Pilots. The band Twenty One Pilots is made up of two artists, Tyler Joseph (the lead singer, plays multiple different instruments, and raps) and Josh Dun (the drummer). Their lyrics are very inspirational and meaningful. I felt that their lyrics would fit perfectly for what my "vision" was. I chose song lyrics that would make sense in a certain format that I wanted. These are the four designs that I created and how I personally view each song. 

Lyrics from Kitchen Sink

          These lyrics are from the song, Kitchen Sink. The song is about helping you to defeat your "demons" that are inside your head. The very first lyric of the song is "Nobody thinks what I think" and in the second verse, the first lyric is "Nobody thinks what you think, No one, Empathy might be on the brink of extinction." I chose this lyric because it is, sadly, becoming true in this day and age. People are judging others before they even know each other. The empathy for technology is greater than the empathy for each other. For thefts, I wanted "EMPATHY" and "EXTINCTION" to look as is they were deteriorating. For the background, I used an image that had smoke on it and I thought that it fit with the lyric and style. 

Lyrics from Forest 

          This design was inspired by the song Forest. It is about living off of emotions and how they effect life, how we are afraid of what will come next. We live in fear and are restricting ourselves from living our lives to the fullest because of it. In the chorus of the song it says "Down in the forest, We'll sing a chorus, One that everybody knows. Hands held higher, We'll be on fire, Singing songs that nobody wrote," what this is saying is that we need to live in the moment and forget about our fears together. I chose the lyric "I don't want to be heard, I want to be listed to," because there is a big difference between being heard and being listened to. For example, if you multitask and work on homework while playing music in the background, you are only hearing the music, you are not paying much attention to it. When you listen to a song by itself and really understand the lyrics and what they are saying, I would call that listening. I chose this specific lyric because I think that every single person can relate to it in some way. 

Lyrics from Screen 

          This lyric is from the song Screen. It is about hiding who you truly are behind this metaphorical "screen." A lyric in the song that really sticks out is "We're broken people," and that is repeated multiple times, it means exactly what it says, there are people who try to act like everything is fine in their life when they're actually trying to hide the fact that they're "broken." I would have chosen that lyric, but I had an image in my head about the specific lyric that I chose. The lyric by itself may not make sense exactly, but if you know that song, the line right before it is "While you're doing fine, There's some people and I, Who have a really tough time getting through this life, So excuse us while we sing to the sky." What this is saying is, you might be enjoying life and you're okay, but that does not mean that every one is like that. There are people out there who are struggling but hide it behind their "screen" so that no one can see their pain. I wanted my graphic to look as if you were looking up at the sky so I made the font a cloud shape with a sun in the center. 

Lyrics from Lovey 

          The final lyric is from the song Lovely. The song is sort of like a message to whoever is listening. The chorus is "Won't you stay alive, I'll take you on a ride, I will make you believe you are lovely." Tyler (the lead singer) is saying that he believes that you are worth it and wants you to believe it too. He tries to stress "Stay Alive" is a lot of his songs, he wants to show that he cares and knows what people can go through. The song is about trying to make you believe that you are worth it and to stay alive because it will get better. I wanted to make the font give off a "lovely" tone so I chose a flowery font and a cursive font. I chose this lyric because I think that everyone should feel lovely and if they don't, I want to make them see just how beautiful they really are.

Responsive Web Design

What is responsive web design and why is it important? 

Responsive web design is the design and development of a website responds to the user's behavior, screen size, and platform/orientation. It consists of grids and layouts with an intelligent use of CSS media. A website needs to look good on all platforms (laptops-iPads-iPhones).  It is important because many people use their cell phones now to look online and if your website looks good on a larger laptop screen but not on the phone, your website will be overlooked.  

What are media queries and breakpoints?

Media queries is a CSS3 module allowing content to adapt to the screen that you are viewing the site on. A breakpoint are the point at which the content of your site will respond to the platform with the best layout.

Example of a Responsive Website

This website works in all sizes of platforms. It works on the laptop and also on the phone. The images and text look good in both platforms. With this website, there isn't that much content, it focuses more on the images and animations, but when there is text, it looks great. 

Saul Bass Poster

Why Saul Bass?

         In my graphic design class, a while ago we were asked to choose from a list of graphic designers and movements to research and create a power point about. From the list, I chose the designer, Saul Bass. His art was unique and different from what you would normally see and that really caught my eye. The way that he made his art his own was inspiring. His graphics are easy to recognize and are always interesting to look at. This week, we were asked to create poster in the style of our artist or movement, promoting their work at the Nelson Art Museum. One of his works that really caught my eye, was his posters and covers for the film The Man with the Golden Arm. In his arts for the film, there is this arm that is almost like a signature for the film and Saul Bass. Every time I hear Saul Bass, I think of that arm so I decided to put that in my poster.

Research

          To make sure that my poster looked the best that it possibly could, I had to research what the importance of a poster is and what makes a good poster. The main idea of a poster is to get inform others about a certain event in the simplest form possible. You want all of the necessary information on the poster without making the poster look too busy. I researched some of Saul's posters and also tired to make it look like something that he would create. I looked at multiple fonts and found the perfect font to represent Saul's style (Viktors Littl Creepy Horror). I found Saul Bass's works usually used dark colors to portray a cynical feel. I tried to create the same kind of feel by using the colors that he used (dark, warm colors). 

20 Layout Sketches

          In addition to the research, we had to create 20 different sketches of ideas for our poster. I knew that I want "Saul Bass" to be the first thing people saw when they glanced at my poster. I made different sketches of how I could portray Saul Bass through this poster. I had to think about where every piece of information would go and how large I wanted the details to be. I then started to add certain graphics and fonts that I thought would represent Saul. I settled on one of the first sketches that I drew. Going into this project, I already had an mage in my mind of what I wanted my poster to look like, it was just a matter of where to put everything and how to make certain information to pop.

The Process in Illustrator 

          When creating this in Illustrator, I knew that I wanted "The Arm" to look as if it were placing "Saul" onto the poster. I made sure to use the same colors that Saul used. The most difficult part of all of this was trying to get all of the information on the poster without making it overwhelming. I think that with a little outlining I successfully got all of the information that I needed on the poster. I tried to outline the whole poster with harsh, jagged lines because I have seen some of Saul's works outlined in that sort of way. It was challenging to try and create this in Saul's style while trying to make it my own.

Conclusion

          Overall, I enjoyed creating this poster. There were few challenges and going into this project, I already knew what I wanted it to look like, which made it easier to create. I feel like I did a good job at portraying Saul Bass in the poster. If I could change anything, I would probably try to find a more readable font. Other than that, I like my poster.

Topic Site Reflection

What was this assignment and what was the process? What did I learn?

          In my web design class, for our final, we were asked to create our own website about a topic of our choice. My topic was the Olathe Northwest Soccer program. I used the html coding and css styles that I learned from previous projects, I was able to get a good starting layout for my site. I had 5 tabs/pages, Home, Boys Teams, Girls Teams, Coaches, and Records. I was unable to fill in all the content due to timing and trouble with the layout. I was trying to center the links but I had to get help from my instructor. I also had to put a minimum width so that the banner would fit in the div.  I learned new css styles and html tags to help customize my website.

What would I do differently? What would I do the same?

          I would probably change how I large I made the banner because it made it hard to work with div. I also probably would have changed how I did the tabs, I think that it looks ok and I like the style of it, but I did something that made them difficult to work with. I defiantly would not have changed the layout of my site, I like the way it is set up with the links across the top, right under the banner. 

Thoughts?

          Overall, I enjoyed this project. I wish I had more time to work on it. Because making the layout had so many difficulties, I did not have time to put in barely any content. But I did enjoy not having to follow a tutorial and trying to figure out certain things for myself, even though I did have to ask for help on a few things.

Here is one of my pages that has a little bit of content: