Visual browsing

The Morning Post has an interesting aspect that I think would be cool to involve in my future websites. It allows you to visually browse stories. This means when you click on it, you are able to look and choose stories based on thumbnails of the video of picture. It is a nice clean design with a black background and white writing but includes the blue in certain areas to match with their brand. Also, not all the stories are the same size. This not only gives visual appeal when looking at the page but allows the reader to understand the more important or possibly newer stories on their website. Finally, the large arrows at the top make it easy to navigate between pages. I thought this was an interesting concept that I hadn’t seen on any other website before and allows for the more visual readers a chance to gather news a way more tailored towards them. Visit the website:


Blog 5

Screen Shot 2014-10-24 at 11.27.19 AM

The website that I like is I discovered the site from app store. I like the app very much because it is clean and easy to use. Basically you swipe from article to article and scroll up and down to read the article. The website is very easy to use as well, it is very simple and clean, it has a nice amount of visual elements that come with story. In addition, it tells you how long does each article takes you to read.

The intended audience is general audience on social media, and the contents are created by them and for them. The color scheme of the website is black, gray and white, it is very simple and non-distraction. The typography has a clean and smooth outline.

The pictures on the website are also interactive, so they are clickable and can lead you to more similar stories and give you more contexts and details about the article. You can also click on the author to go to their profile, so you can read more articles from the author.

the upshot

Screen Shot 2014-10-24 at 10.46.47 AM

I took a look at the Upshot, because I love their design. It’s so clean and organized looking. They really use white space well, dividing content with only a thin black line. The photos are borderless and they even give a small photo of the author which I like. It’s a very easy site to navigate.

The upshot works with a lot of data, and what I love about them is that they share their data sets and source code. They have a Github here: So if you want you can look through the code they used for their stories, or even run your own analysis on the original dataset.

If I was going to steal a piece of their website layout for my own, I would take their sticky navigation bar. It’s really nice looking, and it is responsive. Although I did notice it kind of breaks when your browser window is between 1250px and 1650px wide. It cuts off the login button. But still, it works very well.

Consequence of Sound

Screen shot 2014-10-24 at 10.41.49 AM

I feel like I have used way too much for these posts, so I’m going to use the Consequence of Sound site instead. Ha ha!

I really like the bold, sticky header that shows everything in regards to news, new music, films, music reviews, features, and staff lists. There is also the CoS logo in the top left corner, attached to the navigation bar, which is the “golden” spot and the first place a viewers eye goes to. This logo also takes you to the home page.

I want to utilize the drop down menus on my own site, too. I would have done it for our True/False site, but I didn’t think I used enough content to justify employing these drop down menus. I also like how there is a cluster of images on the left of the page linking to stories and how there is one photo more dominant than the others. I think this is a common practice in website design, but I think it is helpful to determine what is either the most popular, or recent, story. Hopefully I can get a grasp on CSS grids so that I can better use this method of grouping.

Overall, the site is super clean with a white background. Since designing the True/False page I’ve really come to appreciate using a white background and I think it does help draw attention to the actual content of the site.

Coldplay’s website

For this week’s blog, I focused on Coldplay’s (the band) website. The website provides a lot of information but does it without overwhelming the reader.


The current theme of the website is Ghost Stories, which is their upcoming album. To that end, the colour scheme of the website is ethereal with the blue, black and touches of white.

The header of the page remains consistent, as does the font style. The only page that is different is the oracle page.

Another thing the site does well is a small text box they have on the right hand side of the news page. It shows all the different tags on the stories, so you can search for whatever topic interests you.


The only page of the website that needs a little organising is the main archives page. The blogposts are titled with dates. The interviews are not grouped.


For all the information on the website, it is designed quite well. The navigation is simple. It is easy to find your way around. On a scale of one to 10, I would give the site an 8.

One Design Company-Clean and Consistent


I have been dreaming to work for this Chicago based private design company, One Design, for quite awhile. It’s getting harder to find such a design company that sticks with their design principle and keep it consistent on every single platform they involved. Here, for instance, is their website, consisting their work portfolio, company intro, staff and contact information for job openings. It’s undeniable that most design companies tend to have a decent looking website as the trend pushes them to go digital and treat their digital image as the most essential.  One Design makes things even better as they notices the importance of linking the website with company’s design language.  The whole site keeps the blue color head to toe and all the elements stay in a similar taste that is simple, visual-heavy and straight forward, even the team member info. All the navigation works perfectly.I always know where i am and what to do if I want to go to another desired place.  I just can not express how much i love the opening animation on landing page, not just because of its smoothness but the overall design which, unsurprisingly, still plays under One Design’s iconic style. It’s such a great move to include the company message into this animation.

I really want to learn the transition effect when hoover mouse onto the portfolio images.  I’m not sure about if this effect can only be achieved by java or not but definitely worth to learn. The 90 degree rotation on the MORE WORK button also looks neat and it seems CSS can make that happen.

Blog 5: Preserve

Screen Shot 2014-10-23 at 6.02.33 PM

This Blake Lively’s lifestyle website, Preserve. She displays clothes, recipes and some decoration accessories.  It’s a combination of a personal blog and a shopping website.

The first thing coming out in front of readers is a slide show comprised of a dedicated set of pictures. When you scroll down, the navigation bar is always on the top, making sure you won’t get lost. But it might take a little bit too much space of the whole web page if you are using a laptop like mine. After the slideshow, there are stories shown in the same format, a wide screen picture followed by some abstract. The format for each story is consistent. And on the left side, if you notice, is the shopping link related to the specific story. It reminds you that it’s actually a shopping website.

Screen Shot 2014-10-23 at 11.02.50 PM

Furthermore, there is a “Top” sign at the right bottom, making the navigation even easier. And the shopping link follows your scrolling inside the story page as well.

Screen Shot 2014-10-23 at 11.07.49 PM

The tone of the pictures, the background texture, the text fonts and color match one another very well. A typical story will start with pictures and some text. Some stories come with videos, too. I think it can be used as a good example if you want to design a personal blog.

The intended audience for the website is mostly young people who admire Blake Lively. As she herself wrote in the blog, it’s “a home out of pixels, light and imagination.” That’s one of the reasons that they apply so many beautiful pictures, featuring tasty food, elaborate arrangement of ingredients, sports, clothing, youth, and lively scenes such as Spring and picnic.

Vogue describes the site as “Part digital monthly magazine, part e-commerce venture, part video blog, the site will seek out and celebrate people all over America who are making things – food, clothes, pillows, dishes, dining-room tables – with their hands.”