Skip to content

Category: Favorite Web Designs

Use for homework after lesson 13: analyzing the design of a favorite website

Published on

I chose Rotten Tomatoes, because reading film reviews is one of my favorite ways to kill time. The site's homepage emphasizes the featured articles, as they implement the biggest photos and therefore draw the most attention. Under these photos is a white headline amongst a black background, clearly standing out. The search bar is also very accessible, lying front and center toward the top of the page. As we scroll down, the website is mostly white with black wording, but it's very easy to navigate, and it doesn't read as bland thanks to the tiny tomato pictures accompanying the film titles. It all feels like my eye is meant to travel from top to bottom, as everything is presented in a list form with long narrow columns. And the bright, neutral colors evoke a calming feeling, which is ideal because scrolling through film reviews should be a leisurely, rather than intense activity. I would assume the designer chose to feature articles at the top of the page to encourage visitors to click around the site more. There are more articles listed at the bottom, but I assume they're less important or not in dire need of clicks, otherwise they would be more prominently displayed. I had never used the developer tool in browser before, so I was surprised to see what a jumbled mess the wesbite looked like behind the scenes. To be honest, I can't work out yet what the different fonts and colors and ordering mean, but I'm curious to find out.

Published on

My favorite website is Popjustice.com. It is a website for news, music, and culture all surrounding the UK music scene. I primarily visit this site for new music recommendations and reviews. The layout features a pink header at the top which bears the logo for the site. The main feature of the site is their weekly "New Music Friday" article which is positioned as the largest image and blog post. These "New Music Friday" articles most likely get the most hits because they contain a short review of all of the British pop songs that have come out over the course of that week and gives them a short review. Above the feature article and just below the logo, there is a menu bar that shows all of the different types of articles included on the site, The Briefing, News, Music, Vids, Interviews etc, and Forum. This website serves many purposes besides news, but only really hardcore music fans will want to participate in the forum. The articles begin on the left side of the site with a substantial border and continue toward the middle. There is always a right hand side bar on every page of the website reminding visitors of their list of the best albums of the year and other options like a mailing list. The contrast on this website is primarily achieved by the black text on a white background, but the site also includes elements of pink for further visual interest. Some of the text in the headlines and paragraph headers appears in pink for further emphasis. The site is aligned along the space used for the major article space, with every other link seemingly optional. Popjustice does a good job of grouping the interests of readers together. Similar songs and articles of interest appear along the sidebar to entice readers to visit different pages on the site. The padding and the margin of the site make it more easily readable. Overall, I think this website is well presented in terms of formatting. It presents its information in a concise manner and maintains enough white space so that it is not overwhelming.

Published on

The Notorious Entertainment website emphasizes the name of the company front and center as well as the logo in the top left corner. The organization of the home page involves a scroll downwards, which is ushered by the downward facing arrow. As you scroll, it is revealed what the entertainment company offers as its main 4 features: DJ, Lighting, Entertainment, and Company. These features are not just listed, but appear one after another through a smooth transition, over a darkened picture representing that aspect of the company. The picture gives a shadow-like feel indicating a sense of depth and curiosity to learn more about these key features. The order in which the features are listed (in order above), is pretty accurate in terms of what is usually in highest demand and what is most popular for Notorious to offer. Contrast is offered through the use of white, Sans Sarif, crisp text on a solid black base background. This really emphasizes the bright text and vibrant images beneath the titled features. The feeling that is evoked is a sense of modern, edgy, forward-thinking vibe that would be wanted for an entertainment company. In terms of alignment, there is the scroll down on the first page of the key features as well as the menu bar which includes Home, Music, Live, Media, About and Booking pages. When the window is made more narrow, the menu bar disappears on the page and one must click a drop down menu in the top right corner to access the other pages. Because the page contains a lot of black blank negative space, the little text that appears on the home page is inviting enough to allow users to easily read and navigate the webpage. In other words, there is not a lot of clutter on the home page, which makes it easier for viewers to find their way around the website without being overwhelmed or confused.

Published on

I chose Netflix because I am on it a lot, but also I have noticed over time that they change their website design quite often. Their current website is definitely more visual based, trying to let the shows/movies speak for themselves. Netflix emphasizes their logo at the top in red letters over black, the big image featured in that viewing, and of course (because it is a business) their Netflix originals by making them appear first and the biggest. Then shows and movies are sorted into categories that all are separated by a small white header and then a horizontal line of different images. In each row of each category, all title images of the show/movie are all the same size and all lined up perfectly in a row. No image (except the Netflix originals) are bigger than that one size. Even the category headings aren't that big because the page is more important the images, but those titles do still stand out because they are aligned on the left side of the page and are written in white capital letters over a black background. All the colors on the page are very vibrant and glossy. Netflix keeps their website design simple so that we spend most of our energy looking at the movie titles and images instead, which each have their own individual ways of trying to catch our attention. To keep from the page looking cluttered, you have to click on each show/movie for more information about it. read more

Published on

For lack of a better website, I chose to look at the Urban Outfitters site since I frequently shop there. What grabs your attention the most when navigating to the main page of the site are the giant images of the featured clothes and any sales. The first thing that caught my eye was a large panel advertising 30% off all rompers and jumpsuits, rather than the actual navigation bar which appears above the panel in smaller, plain font. It is particularly interesting that the Urban Outfitters logo is very small and minimal on the page as well. read more

Published on

The website theeverygirl.com is an online blog platform to inspire the career driven female.  It is essentially a lifestyle guide for the everyday women.  The webpage emphasizes minimalistic design choices.  White background with black sans serif text create a striking webpage with similarly simplistic with colorful images lined across the screen.  Blog entries are arranged in blocks two to three wide across the page.  Their is a small navigation bar containing all of the topics as well as social media and contact links, but the page is more suited to scrolling as it is arranged chronologically.  Blog titles are in serif font and their larger size as compared to the titles in the navigation bar as well as the title of the website and logo draw attention to the content. read more

Published on

I chose to review one of the most commonly visited websites from my computer; ESPN. Going behind the scenes of the code, I quickly realized how organized this HTML/CSS can really be. We discussed in class this idea of adding code as you go that will override the most recent command, and this code looks like all of these revisions were made ahead of time, due to the lack of redundancy across commands. They also made use of a color coordination system that made navigation must more fluid, and allowed me to recognize some of the commands we covered in class on Tuesday. Overall though, reviewing this code terrified me. The simplicity of the website layout made me feel like the coding would be totally approachable, and I found it to be the exact opposite. Even with a simple layout design, the large number of Links that ESPN relies on made the code three times as long as I anticipate. At least now when I begin to do my own website design I will have some sense of the workload going into it.

Published on

I chose to inspect Google Play Music's site for this activity. The sight is minimal in organization and background color. The theme for Google Play Music that distinguishes it from Google Play Movies/Books/etc. is the color orange. Important links, prices for music, and the logo are all orange while the rest of the background is white and grey. This kind of calls back to the reading we did earlier in class where a piece of advice was to use a grey color for the font instead of black to make it easier on the eyes to read. Album and single cover art are largely displayed on the page with the titles, artist, and price located directly below the art. The user can navigate to their library or the store on the left tab and, while in the store, can navigate to the top charts and new releases in the top tabs. There is also a genre filter located next to the top tabs. Account settings are located in the bottom left corner. The left tabs and account settings stay where they are if the user tries to scroll down the page to look at different songs. Bringing your cursor over to the album cover art causes it to darken in hue and bringing it over to the title or artist causes the text to underline indicating a hyperlink. read more

css.php