Web Design Homework Due 9/15/16

first_day_homework

Yeah… yeah… I’m THAT teacher. It’s kind of unavoidable in a once per week class, I’m afraid

This week’s homework is actually a bundle o’ mini-assignments. Although most can be done quickly, give each one at least a little lovin’ attention. Plan to spend a few hours on the homework total. Everything is expected to be complete at the beginning of class on Thursday, September 15. No late work will be accepted.

Homework Tasks

  1. If you haven’t already, join Del’s Digital Classroom via the invite sent to your SCC e-mail account. Step-by-step instructions on joining are located here. If you did not get the invitation, let me know a.s.a.p. and I will resend.


  2. Read the course syllabus for CGA140: Web Design.


  3. Fill out and sign the syllabus questionnaire.


  4. Buy your textbook. You will need it shortly.


  5. Arrange a means for storing your work for CGA140. This can be on a flash drive or through an online storage provider like Dropbox.

  6. elements_principles_websiteComplete the required reading:
    • Go through this website on the basics of visual analysis for design (a site with good written information, even if the design doesn’t practice what it preaches). Read all the links under “Elements and Principles”  (pictured). There are 13 pages total to visit. You will notice that the principles of design listed on the site are not precisely the same as the ones we discussed in class. That is fairly typical, since there is no widespread agreement on what constitutes core principles. Even so, the general ideas are the same.
    • Read this page on the different parts of a website. (optional, since we didn’t get to it in class).
    • Read the short selection from Design for Hackers, by David Kadavy.


  7. Add a comment to this post with a brief 2-4 paragraph visual analysis of one good and one bad website. Visual analysis involves critiquing the appearance of a design according to the the elements and principles of design. As Kadavy points out in the selection you read from Design for Hackers, functionality cannot ultimately be separated from appearance in web design. However, visual analysis is a good place to start, so, for this assignment, we are going to narrow our focus as much as possible to consider straight up aesthetics. Sorry ugly websites…today it doesn’t matter whether you have a good personality… it’s all about looks! Hey… this assignment is kind of like Tinder. 😛

    Begin this process by spending some time looking around the web at different types of sites. Take some time to think about their visual design. What’s looks good? What doesn’t look good? Lines, shapes, textures, spaces, values, colors? Why do or don’t these elements look good? Do they affect the balance, proportion, emphasis, rhythm, movement, unity or variety? Breaking the design down into the elements and principles an help you figure why you are reacting the way you are to the appearance. Performing a visual analysis for two websites of a similar type can also help. For example, if you find a really beautiful website for an online clothing retailer, see if you can discover another retailer whose site is correspondingly terrible. That way you can directly compare.

    As you research sites, take note of the good and the bad. Select the #1 best and the #1 worst of the bunch and paste them as two links in a comment on this homework post. Instructions on making a comment are available here. Then, write your comparison telling us why the good site looks good and the bad site looks bad according to the elements and principles of visual design.


Questions?

questions.jpg

Advertisements

7 thoughts on “Web Design Homework Due 9/15/16

  1. http://www.riversideartcenter.org/index.html
    https://worldofwarcraft.com/en-us/

    I searched for some terrible websites and found a lot, but this one was is the worst I seen. The site is called Riverside Art Center. After the fact, I searched to see what this website pertained, and found out this was a children school art center. First the lines on all off to the left with nothing aligned no unity and no balance. There is this big black box with all kinds of different colors that do not match. I see no value on this website except maybe some orange to this awful yellow. The way it looks the site used this giant black box and then just kept copying and pasting The text looks like someone was using a TRS 80 Green model version computer. The children’s art photos are not lined at all, leaving half the pictures missing. No variety at all, except link after link of nothing. Almost no space is used except the left side. Also there is no top Navigation or footer at the bottom. I am completely confused with this site.
    The next site is World of Warcraft, and this site is spot on. The top navigation is clear and properly aligned with all lines parallel each other. The rectangles from top to the bottom are well balanced. The site uses the whole page, but the variety and unity keep in check. The site covers plenty of different values and colors on the color wheel from green to purple. The site has the proper footer page at the bottom with sharing the link. All the sliders pertain to certain information which is shown. For instance when you click on the game tab, the viewer receives all the information about the game with a beautiful well done drop down box that opens. The drop box is aligned perfectly with the other boxes on the page. This site has so much variety to choose from the lines to the balance of covering the entire page. The text has a lot of San serif which works well with lowercase and capital letters. Also I noticed that the navigation bar is attached to the top of the page, so when you scroll down, the viewer does not need to scroll back up.
    Doug

    Like

  2. While looking for bad websites on a list of the worst I stumbled upon a site for a James Bond Museum in Sweden. When the page first loads you see a large black bar with a blurry graphic depicting the title of the website. The tile is surrounded by random links and the social media accounts for the museum and what I believe is the address. The website has little to no unity, it is a mismatch of different pictures of many different sizes and low quality, a bunch of text in different languages and articles that loosely pertain to the point of the website. There are no recognizable tabs to different sections of the website, though there are different sections but you would never realize this fact because it’s just a mess of links covering the mile long homepage of the website. This makes maneuvering through the website very difficult and finding things ever harder. There is no rhythm or balance to the website it is at some points centered but then as you scroll down some of the sections are to the left of the webpage. They miss the point of the whole James Bond feel, the cool, suave, put together look of 007. There is no color scheme, the background is white and the only other colors is black and the blue of all the links that litter the homepage. The website does not have proper foundation, its over crowded and it loses you as you scroll because you can decipher what is going on. The contact information is not well displayed and the is no emphasis on it so you can find it among all the other information.
    I could not believe how bad that the James Bond Museum website was so I looked it up to see if there was a different one. Instead of a better one for the museum I found the official James Bond website. This website was the complete opposite of the other. The official James Bond website has a clear and clean title, emphasised so you know where it is, with link to social media out of the way to the left and a search button off to the right. Under the title are the tabs to other parts of the website organized in a line surrounded by lines to mark out that it is it’s own thing. All of the tabs are unified as they all share the same James Bond-esque feel but the have the variety as they are not all set up the exact same. Everything is lined up in its own section and has a title so you can easily decipher what everything is. This helps make the website easy to move through and find what you were looking for. The color scheme is also following the James Bond feel sticking to black and white suave feel of the character and the movies. All the pictures are the sames size and are a good quality in the top slideshow and the pictures heading the stories on the website match the stories, have unity in size and quality, and though there are many are set up with proportional space between them so nothing looks cluttered. The webpage’s content is balanced with equal amount of stuff on the left as is on the right. Overall the look of the website works really well.
    http://www.007.com– Good Website
    http://www.007museum.com/– Bad Website

    -Jessica Schmid

    Like

  3. http://www.jamilin.com/

    As much as much as I enjoy total zen and the art of cosmetic soul repair, the above website does make me feel lack lustered and aesthetically violated. Starting off with the massive header, the nav elements seem to be an incredibly small font compared to the giant, non clickable ad. the third, yes the third, row of the menu bar links to other pages in on the site, each page having a different background color matching the previous link.

    Within the landing page, I find it hard to appreciate any spacing decisions. Multiple panels touch and don’t touch. The basic table HTML coding doesn’t help as well. Next, take a look at the “memberships” page on the website. Say I want to sign up for $340/month success map; the link just automatically takes me down the page to an anchored link further below. Resizing is also terrible, things collide and overlap like a shuffled newspaper. Finally, the 12 YouTube videos embedded on the side as well are out of place and do not look appealing for me to click on whatsoever.

    nike.com
    On the flipside, I like to bring attention to Nike. This site really takes whats trending as far as web design and applies it in a very appealing fashion; minimal design that tells alot. A floating nav bar that follows you allows for quick purchasing. Furthermore, its white and minimal design doesn’t get in the way of browsing content and is not distracting whatsoever. Hovers over the menu buttons take just the right amount of time to trigger so you don’t annoyingly flash more options on your screen. Just the landing page in general has a great embedded .gif or webm on repeat that is perfectly dimensioned for desktop computers. Scroll further and you’ll see more proportioned pictures that have few words on each.

    Finally, the color scheme, or lack of, appeals to me the most. Notice the only time there is color on the screen is because of the media imported, not the actual header or footer. To me, this implies a canvas where the art really becomes the attention. There are few distractions between you, the consumer, and the product. San serif fonts with thin streaked lines reinforce the sleek minimalistic design of the website and really drive home the compelling desire to explore the website. Bravo Nike.

    Like

  4. Paige Buza

    While looking online for a bad website , I came across more than I thought I would. There were so many websites that I opened up and immediately regretted. The worst one that I opened up was a site called Vision for Utopia. As soon as you open up the website , you see a whole bunch of bright colors in your face. The colors do not complement one another at all . Your eyes instantly go to the text on the top of the page, which fills with moving rainbow colors . If you look to the right of the website , theres a rainbow text box with different tabs in it. When you select a tab the background of the box completely changes which throws off the balance of the website. The different fonts of the website are very big and cheesy, it doesn’t come off as a professional website at all. If you keep scrolling through the website , you see there is not enough proximity throughout. In my opinion, the website looked more like a junk site that you want to promptly exit. In addition, there is music playing in the background that doesn’t give off the same feeling as the website. It is support to be a religious website , therefore , bright overwhelming colors does not connect to the religious feeling.
    I already had a few really good websites in my mind to use. I decided to pick a website that just got brought to my attention today, the site for Savanna College Art and Design. When you open up the website , you automatically get a good feeling about the school. The balance of the image to the text is great. The white big font really comes out against the black background and catches your attention. The whole accessibility of the website is simple and easy to use. The overall rhythm of the website is phenomenal. I love how on the top right you can quickly hit request and apply without searching around the webpage. This website is without a doubt my favorite.
    http://www.constellation7.org/Constellation-Seven/Josiah/Index.htm-Bad Site
    https://www.scad.edu-Good Site

    Like

  5. http://www.lingscars.com/ Bad Website
    http://www.enterprisecarsales.com/ Good Website

    I got a chance to look at some really bad websites but Ling’s Cars was by far one of the worst. When you first open the website your eyes are bombarded with images and colors. It’s as if you were looking into a kaleidoscope. The background is an array of crazy colors and patterns. The first page is loaded with more colorful and flashing gifs. This is a car selling website and there are random animals crawling around the website. There is so much going on in the first page that it’s hard to navigate and know where to click. As you scroll down the website you start seeing the cars that are for sale.There are various images around the cars that do not allow you to see it properly and are very distracting. on the left hand side you get the option to look for a car and it is divided into the makes and then the model of the car. it takes up a lot of space and could be better organized. The first page just keeps going and going and continues to give you tons of information that could have been better organized in different tabs. To top it all off when you enter the website music starts up automatically with no way to turn it off.
    The Enterprise website was nothing like the other one. You enter the website and everything is nice, clean and well organized. The top menu is easy to read and navigate through. Clicking on the title will take you back to the home page. The car search is simple and easy to navigate through. There are no crazy images or gifs. The cars are easy to look at and they give the visitor enough information with the option to see more. All the information is well organized within it tabs and the reader is not being bombarded with images or unnecessary information. The main color scheme is white, green and black, very simple. It looks completely professional and everything is unified.

    -Yazmin G.

    Like

  6. http://www.suzannecollinsbooks.com

    This website was extremely hard to focus on. I didn’t have a clear understanding of how I was supposed to read the page and there was no way of telling where to start. There was no flow and no unity. Only two colors were present on this page and, I guess you could say the peachy-orange and white were calm for the eyes, but not the kind of colors I would expect to see for someone who wrote The Hunger Games series. A group of lines run across the top of the webpage and make it hard to read. I feel a little dizzy after I look at it too. Not my favorite thing! There was definitely no variety to the page either. I was bored and lost interest almost immediately.

    http://www.corneliafunke.com

    Cornelia Funke is one of my favorite authors since I was a kid and I still have so much respect for her books. I was looking forward to her website because I know how imaginative she is. And of course, I was not disappointed. Her website is an interactive one, but it never loses your interest. It seems as though you are peeking into the room from a bookshelf and getting a full view. The colors are vibrant and complimentary to each other. There are different things to click on to enter a new part of the site. I think it possibly could be confusing, but for the most part, everything is “clickable” and the little individual pages that pop open are really organized and it has pictures and icons to support what the viewer is looking at.

    Like

  7. Bad Website: http://www.gatesnfences.com

    I did not expect to find so many horrible websites! I mean it is 2016; technology is evolving. As soon as I opened this website it gave me a headache. The color scheme is not well balanced. The text is very small which makes me not want to read it at all. Even though users don’t read, they scan. So they tend to search for fixed points or anchors which would guide them through the content of the page. The colors are heavy on the eye and makes them wonder all over the place. Users don’t search for the quickest way to find the information they are looking for; instead they choose the first reasonable option. As soon as they find a link that seems like it might lead to their goal, there is a very good chance that it will be immediately clicked. With that being said, this website had way too many options to click (way too many) where they could have generalized most of it. I feel like a web-page should be obvious and self-explanatory, which in this case it was not. I had too many question marks. Overall, whoever designed did not know what he/she was doing, had no sense of good design and did not know any of the principles of effective web design. It is a very horrible website! Wait until you see it D:

    Good Website: https://www.airbnb.com

    The homepage is gorgeous on its own: it greets you with a full-screen video of beautiful, high definition footage of travelers doing activities as if they are locals, from cooking in the kitchen to buying local cheeses to driving a moped through the streets. It’s very human and authentic. It includes the destination and date search form that most visitors come looking for, right up front, guiding visitors to the logical next step. The search form is “smart,” meaning it’ll auto-fill the user’s last search if they’re logged in. The primary call-to-action (“Search”) contrasts with the background and stands out; but the secondary call-to-action for hosts is visible above the fold, too.

    Like

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s