Featured

Blog Prompt #7: WEB DESIGN ANALYSIS

For this post, spend some time browsing the Web and identify a website whose look and feel you really like. (Try to find a site that is new to you — a google search for “web design galleries” might be a place to start.) Think about the choices made by the designer (layout, colors, typography, visual concept, navigation, etc.) and write a detailed design analysis of the site. What makes the site “work” for you? How are different components of the site working together to produce a particular feel or effect? What is its rhetoric (ie. purpose, audience, argument)? What might you take away from this site design as you think about your own web design concept? As always, please include relevant screenshots and links for the class.

Colour Pop Cosmetics

I frequently visit the Colour Pop website but I have never truly paid attention to the lay out of the website and how the creators of the website used colors, typography, and shapes in order to capture my attention. Capture

When you first click on the website, you see the bright colors and different shapes that automatically attract you to the different areas of the page. Your eyes lead you from the top to the bottom in a matter of seconds because of the aesthetics of this webpage. You see the beautiful women who’s eyes lead you to different areas of the page. The fonts re not as bold as the colors which is good because they may throw the audience off and cause them to be unable to find a specific place to look at.

2

As you continue to scroll down t homepage, there is still a lot of white space but it is balanced out by the bold colors of the makeup products and models. There are many different areas that you are able to click on in order to direct you. The colors of the website also change with the seasons so if it is Christmas there is a more festive background and may cause the audience to be in a more festive mood and purchase more makeup. I do believe this is a strategic way of marketing that colour pop uses.

Capture 3

At the end of the homepage, you see more photos of models and regular people that may have tagged colour pop in their makeup inspirations. Your eyes also lead you to a search bar at the bottom of the page and ways to follow colour pop on other social media platforms. I love the website because of all the quality makeup for a cheap(er) prices. Go check it out. https://colourpop.com/

 

 

Hello Heco

Screen Shot 2017-03-13 at 11.31.38 AM

When you first arrive at helloheco.com you are met by an endless sequence of rolling black waves moving hypnotically across the screen. The lack of information written on this first screen encourages the website user to scroll down in order to gain a better understanding of what the website is about.

Screen Shot 2017-03-13 at 11.44.22 AM

The website has a background that changes as you scroll down the page which keeps the eye interested and the user engaged. The aesthetic of the site is minimalist which allows the written information provided to really pop off the page.  Links are underlined by undulating squiggles which give each page some dynamism.

Screen Shot 2017-03-13 at 11.33.37 AM

The first page that breaks away from the black and white color palette introduces the partners that are at the head of the design company that the website is advertising. The contrast that this splash of color has to the rest of the site forces the user to stop and really examine this part of the page.

helloheco.com is a website for a design company, so it seems obvious that they would need a beautiful, well-designed website to advertise for that company. The site is incredibly visually appealing and it is a great showcase of the creator’s abilities with design.

helloheco.com

#Blog Post 7

My search for an “interesting” website took me to unexpected and uncharted places, yet funnily enough, it was the page for the Milwaukee Ballet that ultimately caught my attention. I say “funnily enough” since I haven’t been to a ballet in years, but this site does a good job at capturing the “prestige” that the company is clearly going for.

ballet

The most notable thing about the website is its use of video for its main menu. The page immediately comes to life as soon as you enter it, with the dancers magically and gracefully moving across the screen as you make your selection. The prominent font in front of them again adds to the “majesty” the site is going for. This ballet company is very, very important, apparently, and they want for you to know that!

elegant

That level of “elegance” continues as you scroll across the company’s upcoming performances. Everything seems regal and dignified, giving each production a certain level of “class.” The nice photography gives each show a level of sophistication.

menu
Even when we click on the main menu, the website practically seems to explode off the screen with grace and beauty. Notice the color contrasts here! The site is using “white” overwhelming to give everything a clean, almost royal look, and the red curtain behind the dancers emphasizes their importance. If you are planning on going to one of their shows, their website will certainly make you want to see one.

 

Ice & Sky

This website, Ice & Sky, tells the story of Luc Jacquet, the scientist that enlisted in helping research the unexplored area of Antarctica in the 1950’s, and  whom eventually connected anthropogenic activity with climate change. The website is highly interactive, and provides a range of mixed experiences to keep the user engaged. The tone of the site is fairly somber, and reflects the hardships Jacquet faced while researching the Arctic, as well as the seriousness of the current problem of climate change.  The colors are primarily muted, and the scenes with Jacquet himself being interviewed in modern times are in black and white.

Screenshot (3)

The website is highly interactive, and provides a range of mixed experiences to keep the user engaged. There’s a use of animated shorts, life action footage, old photographs, voice recording, and text-based information.  I found this to be a smart tactic used by the creators– with a subject that some may consider not worth their time, it’s important to create an experience that convinces the user to remain involved with the message the creators are trying to illustrate.

Screenshot (6).png

The site also provided links to related documents that would provide the user with further information, or substantial evidence for the statements the website was making.  This easy access to in-depth knowledge on the subject of climate change helps the makers of the website achieve their goal–to persuade the public to become aware of their impact on the environment.  This encourages the user to become interested in the environment using information from viable sources.

Screenshot (10).png

This site taught me the importance in having variety in a website when trying to make a point to an audience.  People tend to remember valuable information more if it was presented to them in an unconventional way.  It also shows that music, color, layout, and content should all work together to form one cohesive tone and message of a website.  Juxtaposition of these within this particular site probably wouldn’t have conveyed the message as powerfully.

If you want to check out this site, and I recommend that you do, here’s the link:

http://education.iceandsky.com/

Be sure to start at Part 1!

 

 

 

It’s Named “The Cool Club” for a Reason…

I found this website after quickly browsing the world wide web. It is titled “The Cool Club.” As the page loads, a white background with large black numbers quickly flow on the screen. Or as quick as your internet connection is. And then this is the home screen.

the cool club

Iconic. In the wake of the 20th anniversary of Biggie Small’s death, his animation is the first to be seen. I assumed there would have been a pattern in the collection of famous people; however, this is not the case. Click on the tab “Discover our products” and you will see an unusual range of famous people. There are different sized posters and decks of cards that can be purchased.

the cool club 2

Sooo cute. All of the people depicted are designed in the same style, creating symmetry. The color scheme is very plain, but it works extremely well with the products they are advertising. A white background and black letters does not take away from the colors of the posters.What makes the site work for me is the lack of clutter or distractions from what the main objective is — the products. Also, the prices are extremely reasonable!! I know the prices are in Euros but it still converts well to our measly ‘Merican money. I was determined  to have some form of alliteration in this post, sorry y’all lol. 

Click on the poster of your choice. I chose Michelle Obama because I love her. She’s so fly.

the cool club 3.pngthe cool club 4.pngNot only does the poster look fairly accurate, it is just outright cute! But if you have noticed, I pointed out the second animation. the cool club 5

It’s an animation of what the poster could look like hanging on the wall alongside another icon. Yes, that is the wonderful Dr. Martin Luther King!! I told you this website is cool, as named. I could promote for them, tbh. They should cut me a check PRONTO.

In my own process of designing a web page, I will definitely make sure I mock how concise this website is. I also noticed that I did not encounter one single advertisement for any other product while I browsed the site. I wonder how the creators made that possible. Maybe that is just how things are done in the Netherlands. This site is composed so well I feel compelled to purchase items from a website I don’t know the certainty of credibility, from an unfamiliar country with very few reviews. A good website must be believable and I must say they encapsulate this at “The Cool Club.”

Go visit “The Cool Club.” https://thecoolclub.co/

Blog Post #7: CSS Conf

Screen Shot 2017-03-13 at 12.12.26 AM

https://2016.cssconf.com/#about

This website is one that immediately jumped out at me because of the bright, flashy colors. This makes sense because the conference it is advertising is one for designers, developers, and engineers that create the most engaging interfaces. It says at the conference they will be discussing the latest technologies, which one can assume is being put to use here on this interface.

Visually, this website is very nice to look at. Is doesn’t leave the eyes feeling bored, and yet it’s not too much and cluttered looking. Navigation is simple and very user friendly. Everything on the website is on the homepage, but if you click any of the three links on the top right corner of the page it brings you to that specific section.

Do you think having everything on the homepage is a pro or con?

I’m assuming this design is not easily achieved, but I think the hard work is worth it. It would make any designer, developer, or engineer want to go to this conference to see how a layout like this one is achieved. The website itself is one we, as a class, can use as a resource when creating our own website because it has YouTube videos posted when you scroll down the homepage.

This website caught my eye right away, proving the people holding this conference know how to design a website that will grab ones attention and lure them in to explore. I want my website to be different like this one, and incorporate bright, bold colors and shapes.

Blog Post #7 Feedmusic

The website feedmusic.com has a very interesting design that immediately grabbed me.

Screenshot (9)

You can’t tell in the background but the blue stuff in the background is constantly moving while on the website which I found very cool as the homepage for the site. There is also a cool quote to instantly drag you in and the text at the bottom left of the site gives you some necessary information about the site that can help someone if they are feeling overwhelmed by the initial graphics.

The navigation of the site is incredibly smooth, as in you can go to any of the pages on the site without having to load the website again. Each transition to another page on the site looks incredibly smooth as the next page glides on top of the current one.

One page in particular, the tech spotlight page, is the most impressive one. Screenshot (11)

As you scroll down the page, more information is added as the graphic to the right of the screen changes.

Screenshot (12)

The colors of the text and graphics also sync up in a very satisfying way.

Screenshot (13)

There is also a bar below the tech spotlight navigation button that fills up as you go further down the page which is pretty amazing.

The site is about technology, so it makes sense that the creators of the website would want the site to be as dazzling as possible and showcase the skill of the creator. It does this extremely well.

The text used in the website always fits well with the various amounts of colors that each part of the website use so willingly.

I really enjoy that the website is all there, you don’t have to load to another page and the transitions to other pages are smooth, but don’t take long either. I will try to make my own website as buttery smooth to navigate as this one if I can.