http://mediaweb.rmu.edu/~aczst161/gifs.html
Objectified Response
Most of the designers were of the opinion that design should always have a purpose, regardless of what type of design it is. I agree with this to an extent. I think that some kinds of design should always have a purpose. But I think there are times that it’s okay for design to simply be pretty. Things that are nice to look at but do not otherwise have a purpose are not necessarily pointless. It’s important to people to be exposed to visually appealing things. Sometimes just looking nice is a design’s purpose. Others may disagree with me about this, but whether we all admit it or not, we all enjoy things that look good. Many of the things we do in our everyday lives revolve around this desire for things to look nice. Everything from brushing our hair to cleaning our houses reflects this need for our lives to be visually pleasing.
The way the people in the video talk about design didn’t change the way I think about it too much. To me, design is something that either makes you think or makes you feel something. My opinion hasn’t changed since watching the video, but I do think it has made me aware of more types of design to include in that definition. I am so used to thinking of design as something that happens on screens and on paper, and the video was a nice reminder that design extends to things such as furniture and tools. Purpose is definitely more important in those types of design.
I think design’s level of purpose varies among different types of design.
Demo: CSS Dropdown Menu
I chose to create a dropdown menu using CSS. The menu should have a list of links that appear when you hover over the parent div. You can make the menu have as many links as you like. When you hover over each option, the background color should change as an indicator of which link you are about to click.
HTML
Make a parent div to hold everything- the main button and all the links that will appear when you hover over it. Mine is called “dropdown”.
Inside that div, make a button that will contain all of the links. Mine is called “menu”.
Also inside the parent div, but not inside the button, make a div that is the parent of all links that appear when you hover over the button. Mine is called “dropdown-content”.
Inside this div, create as many links to other pages as you want using .
Close all divs by using two
tags. This is all of the HTML needed.
CSS
Start your CSS with an id for your button. In this case, mine would be #menu. Use an id because it is unique. This is the only element that is visible at all times. Style it with background colors, changes to the text, and any other changes you like. How the button looks does not impact the functionality of the dropdown menu.
Next in your css, make a class for the div that holds all of your links. Mine is .dropdown.content. Add display:none to hide all of this until you hover over it. Add a width and background color.
Add .dropdown-content a. Adding “a” means these declarations will only affect links. Style the links however you want, but be sure to add display:block. Adding text-decoration:none stops the links from having an underline or color change when clicked.
Next, add the rule .dropdown-content a:hover. This will only make changes to the content when you hover over it. You can add a color change here so that each link’s background changes when you hover.
The final rule will be dropdown:hover .dropdown-content. Add the declaration display:block. Without this, the dropdown menu does not appear on hover.
Website Review #4
I chose to review the website of Breads Bakery in New York City. It is a small café that sells many types of bread, pastries, and desserts. This place would be competition for my group’s restaurant because we also focus on food like this instead of large meals. They are trying to achieve the same type of feeling as we are. A page of their website says “It fills us with satisfaction to feed and to host. Much thought is put into this – making it comfortable, pleasant, appetizing, aromatic, satisfying and abundant.”
Their website is a little dull for my tastes but it’s also quite busy. When you first go to it you aren’t sure where to look because there are so many things competing for your attention. Their logo at the top center of the page is one of the things that stands out the most since it is bright red against a light tan background. The only texture is in the photos of their food throughout the site. The dominant colors are the tan background and the same bright red that is used in the logo. Red also appears on their “passover menu” and “order online” buttons. It seems they use that color to draw attention to whatever services they are featuring at the moment.
Their contact and location info is at the top of the page where it is easy to find. Their navigation is simple and easy to read- they use a horizontal menu near the top of the page, and when you hover over each word, a drop down menu appears.
One thing that stands out to me is the success of their menu page. They did a great job of fitting all of that information into one page while also keeping it uncluttered and easy to interpret. There is texture on this page that makes the menu look like a real, physical menu. It’s light green and stands out from the rest of the page.
The only thing I don’t particularly like about this website is the business of the home page. I don’t think it’s necessarily a bad thing, though. Its format reminds me of a blog with photos and text throughout. It does make the page interesting, but it could be distracting to people who are looking for a specific thing on the site.
I think my group could consider doing a menu page similar to this. We have been having a hard time fitting all the information on one page, and this might be a good format.
Website Review #3
I chose to review www.no9park.com and www.peterallens.com, which is where the bravofranco.com link takes you. The No. 9 Park website is very clean and elegant, and it gives you the feeling that this is a very fancy restaurant. The color palette is simple, but the flat dark background and sophisticated light blue serif font work very well together. Overall the site is very well balanced, although the home page is a little odd for my taste. I wish the image on the top right were a little lower, and the text on the navigation bar on the left a bit higher. It seems like each of those elements are pushed too far to the top and bottom of the page. Everything on the page works well together and creates a nice sense of unity. I think there’s a bit too much emphasis on the images and not enough on the logo. I would make the images a little smaller so that the logo doesn’t compete for attention. The layout is very well done and easy to navigate. There is no unnecessary information or clutter.
Www.peterallens.com is very different. You immediately get the feeling that this restaurant is not as fancy or expensive as the first. The page is busier and is more colorful. The page is mostly consumed by a large animated gif that instantly draws your attention. On top of the image is a big chunk of text that you don’t really want to take the time to read. Their navigation is simple and effective. The site is relatively balanced, but it would be better if the logo were smaller or the image did not move. You aren’t sure where to look because of the animation and prominent logo on top of it. The site uses the principle of unity well, but when you scroll down to the bottom of the home page everything changes and it almost looks like another site. Like I said, there needs to be more emphasis on one element of the page and less on another. Their navigation is successful and easy to understand.
Krug stresses the important of creating a clear visual hierarchy. Both sites are decent at this but could use improvement because of the competition between the images and logos. Other than that, all of the elements have a clear hierarchy.
He also says to take advantage of conventions. Both sites do this. We have seen countless websites in these layouts before and they are nothing out of the ordinary. The user recognizes where things are and understands how the sites work.
Krug says to break pages into clearly defined areas. The No. 9 Park site is much better at this because it just has a simple navigation bar and an image on the right. On the other hand, the Peter Allens site is still broken down, but it is definitely more squished together than the first.
The next important thing is to make sure the user knows what is a clickable link. The user is sure that the No. 9 Park navigation links are clickable because there is not much else on the page to click, and it just seems like it would make sense. The Peter Allens site is pretty successful as well, and some of the links change color or produce a drop down menu when you hover over them.
Finally, Krug says to minimize noise. The No. 9 Park site is better at this because of its incredibly clean design. They only included what is absolutely necessary, and the colors and even lack of textures contribute to this. The Peter Allens site is noiser and busier and could use some cleaning up. But maybe their site works for the “image” they want to achieve as a less fancy, less expensive restaurant.
The No. 9 Park site is more effective in my opinion. Although the Peter Allens site is busier and may be more attention grabbing to some, to me the elegant minimalism of the first site attracts me most.
Website Review #2
Site Review #2
The site that stood out to me the most on onepagelove.com was http://arielbeninca.com/, which is the personal website of a graphic and web design student named Ariel Beninca. This website appeals to me because of its minimalistic qualities and how clean it is. When you first arrive to the site, your screen is filled with a black and white image with black text. There is no color and everything is very smooth. When you hover over the image, which is of Ariel, she moves around a little. You move through this site by scrolling down, and as you do so, you come across some color.
As you scroll down the page you see various examples of her work. These are all in color, but she still keeps the modern, clean aesthetic. There is no texture anywhere except in the images. Just as with the picture of herself at the top, each of these wiggles around a little when you hover over them. When you click on one, a box slides down from the top of the screen with some information about the project. Everything is very simple and easy to read, and there is an “x” at the top to close it. You close it and are right where you left off.
There are other various graphics on the site, such as a few background images, that also do that moving thing when you hover over them.
There are many design elements that make this site easy to understand and navigate. The sleek design and simple buttons are the main contributor, but it also helps that there is no extra “junk” to clutter the space and be distracting.
You can scroll through the site from beginning to end without clicking anything. But you are also given the option of clicking a button at the very top of the page that creates a drop down menu of each section you can visit. As mentioned in “Don’t Make Me Think”, Ariel created a very clear hierarchy and separated the elements appropriately so that it’s easy to understand.
I think this site’s design is very well done and effective. I find it very attractive and its simple layout could be used by virtually anyone. There is nothing that requires thought and it is pleasing to look at. Ariel gets her point across as well as proving that she has a definitive style and is excellent at what she does.
Website Review #1
The website I chose is nastygal.com. I do a lot of shopping online but have not used this site yet. When I first arrive at the homepage the first thing I think is that is looks pretty. The aesthetic is clean and modern, with just the right amount of color here and there to direct your attention to the most important places. Most of the screen is taken up by an image of a model wearing their clothes. The image’s background is a simple yet pleasing light pink-to-purple gradient.
Their logo is at the top left corner, and to its right are buttons to take you to pages for “new”, “clothes”, “shoes”, “accessories”, etc. When you hover over each link, a drop down menu appears with more specific categories. There is also a search bar at the top right. I am going to look for shoes, so I type “heels” into the search box.
I am immediately shown a list of many different heeled shoes. For each product there is a visually pleasing photograph, an item description in a clean, sans-serif font, and then the price. They also give you options to refine your search, and you can narrow the results by color, price, size, and more.
Upon scrolling down the page and hovering over one photo, I find that the image switches to show you a different view of the product. I click on a pair of shoes I like and it takes me to another page.
The page for these shoes is nice to look at and very easy to understand. Most of the screen is taken up by an image of the product. To the right, there is the name of the shoe followed by buttons with each available size. The unavailable ones are gray, and it is very clear that these sizes are not in stock. I select my size and a large black “add to tote” button appears. I click on it and then on the “view tote/checkout” button that appears.
I am brought to a page with my “tote” items on it as well as suggestions for other things to buy. The checkout process looks like it will be easy (there is a big black “checkout” button to the right), although I don’t know for sure because I can’t afford $110 shoes.
Overall, nastygal.com is exactly what I look for when shopping online (except for the prices, that is). I love their clothes and their aesthetic. It is clear that they know who their typical shopper is. It is very well constructed and does not make the user think at all. A part of “Don’t Make Me Think” focuses on how people don’t really read websites, they scan them. This website is designed for that- there are very few words, and you don’t need to sift through information to find what you’re looking for. They make it easy to glance at the screen and immediately know what to click next. I think pretty much anybody could use this website, even those who are not used to using computers or the internet.