All posts by aliciamarietan

Blog 6: Urban Influence

Screen Shot 2015-04-27 at 2.06.59 AMUrban Influence is a design and creative strategy company. Their website contains a lot of cool CSS and jQuery features. The “work” page allows you to hover over multiple components in the grid, and it gradually changes color in an overlay and has animation with the line under the title. I decided to see what the code was for the hover effect, and it is applied in the CSS with the following code.The #c5a47e gives the yellow-ish color.

Screen Shot 2015-04-27 at 1.58.59 AM
.overlay,[class*="overlay"]{position:absolute;height:100%;width:100%;z-index:5;display:block;top:0;
left:0;z-index:2;background-color:rgba(0,0,0,0.6);-webkit-transition:background-color 1s ease;
-moz-transition:background-color 1s ease;transition:background-color 1s ease}
.overlay.overlay-alpha,.overlay-alpha{background-color:#c5a47e !important;opacity:.7 !important}

Blog 5: NPR’s ‘Planet Money makes a t-shirt’

Screen Shot 2015-04-01 at 6.34.12 PM

NPR decided to follow a shirt around the world through production, exploring the cotton, machines, people, boxes, and wearers that are involved in the making of a shirt. The piece incorporates text, photos, video, and music within the videos. Each element of the story has text and video. It’s very interactive, but it’s easy to navigate, and the site organizes all of the information well. The audience is anyone who is a consumer, which is pretty much everyone. The point of this story is that one normal shirt has an entire world behind it, and this multimedia piece deconstructs that. The design and colors are simple because there are so many elements. I think it’s a good design because it makes it easy to navigate and doesn’t distract the audience from all the different parts of the story.

I just really love this package because it shows that the digital and multimedia aspect of the story was there since the very beginning. It wasn’t thrown together online at the very end. The plan and organization was planned out so that the reporters could get video and text and photos for every single section. I think that I can borrow the navigation bar for each chapter that the website has at the bottom of the page that you can hide and show easily.Screen Shot 2015-04-01 at 6.34.29 PM I think I can also the heading, subhead, and button they use for the top of each story section. When you click the button, it shows the video, which is really clever because it acts as a heading for the text as well as hides the video underneath, making sure to think about space and layers in a really smart way.Screen Shot 2015-04-01 at 6.40.57 PM

Blog 4: New York Magazine, Fashion Week

Screen Shot 2015-03-09 at 1.20.26 PM The Cut is the fashion, beauty, and lifestyle department of New York Magazine. They covered New York Fashion Week extensively by uploading a variety of content online, and it’s very easy to navigate. The very top of their fashion page is an interactive box that lets you scroll down a list of different designers, and there’s a cutout of a runway photo to accompany each designer. There are tabs so you can look at the latest shows, top shows, and a full alphabetical list of the shows. It’s simple and engaging and is an easy way to include photos. The cutouts immediately grab your attention when you visit the site.

Screen Shot 2015-03-09 at 1.17.55 PM

Below that is a column of the latest posts related to fashion week coverage. Each of those consists of photos, a headline, and a subhead. It’s quick and easy to see what are all the possible stories you can read. You can click the link to read the full story.

Screen Shot 2015-03-09 at 1.18.08 PMOn that page, there’s a navigation bar above the headline that lets you scroll through the top shows. So that allows for more entry points to go to other pages within the fashion week coverage.Screen Shot 2015-03-09 at 1.18.16 PM Text, images, and coding (Scroll bars, navigation, etc) combine to make the site more interactive and engaging. It’s simple, but it works. Because there’s an entire section on The Cut related to Runway, it makes it easy to aggregate all of the content related to Fashion Week.

Blog 3: CSS technique

Screen Shot 2015-02-23 at 11.33.05 AMSagmeister & Walsh is a design firm in NYC. Their website is really cool, and though it seems simple, the coding behind it is complicated, and there’s also a lot of it. I particularly like their page for the projects they’ve done. It’s a four-column grid, and each photo for each project is actually a mini slideshow you can click through. And then you click the photo, and it leads you to the project’s page so you can learn more about it. Because it’s complicated, for the purpose of this assignment, I’ll focus more on how the coding divides the CSS as opposed to the individual style tags they use for everything since that would take a while. The stylesheet uses multiple divs and classes to define a single element in the grid. First, there’s #work, then there’s mini-slideshow, mini-show, t-prev, t-next, thumb history, and thumb-img sources. Those are all contained within the class for col-inner and iso col col-25 col-pos-1, which outlines which column the element is in. The stylesheet is broken down as much as possible, and some of the styles are attributed to other classes. For example, you can see that .t-prev and .t-next are together. It’s complicated, but in short, the stylesheet breaks up the columns into grids and works within the grid to create hover effects, slideshows, and links.Screen Shot 2015-02-23 at 11.23.34 AM Screen Shot 2015-02-23 at 11.14.59 AM Screen Shot 2015-02-23 at 11.12.04 AM Screen Shot 2015-02-23 at 11.07.00 AM Screen Shot 2015-02-23 at 11.02.43 AM Screen Shot 2015-02-23 at 11.05.21 AM

Blog 2: Refinery29

Screen Shot 2015-02-09 at 1.09.21 AM

Refinery29 is one of those sites that I enjoy visiting often. But a lot of the time, the website’s design can be overwhelming and distracting. The home page does a good job of showing hierarchy with a Today’s Hot Stories section, then a Today’s News section, followed by Videos and Editor’s Picks. A sidebar with the Most Popular stories is further down the page, next to the Today’s News section.

There’s already a lot going on on the home page. First, I think the Most Popular stories section should be higher up – it shouldn’t be buried so far down. Although the sections are clearly defined, the news section is a bit chaotic in my opinion. There are a ton of links and photos, and it’s hard to figure out where my eye should go or which article I should read next. I would keep maybe the five most recent links with the featured photos, and only put the links to the rest of the stories, so that there aren’t too many visual elements to try and focus on. They could do something similar to the scrolling news column on Pitchfork’s website.

Screen Shot 2015-02-09 at 1.03.48 AM

So overall, the website doesn’t exactly minimize noise – though it manages to do so in the Videos and Editor’s Pick sections – so it doesn’t successfully make it obvious what’s clickable.

The other pages within the site have similar problems. The fashion page is really busy, and unlike the home page, it’s really hard to see any clearly defined sections. The news and politics page is the cleanest out of all the pages. The other pages have a similar layout to the homepage with the hot stories section at the top, followed by the most recent stories, and then videos.

I think there should be more hierarchy, less clutter, more sections that are clearly defined, and more white space to help ease the audience into the site.

Blog post 1: Panda Bear

Screen Shot 2015-01-26 at 8.14.28 AM

When we were assigned this blog post, I immediately knew which story I wanted to write about. I had just read Pitchfork’s feature “The Wanderer” about 36-year-old musician Noah Lennox, better known as his stage name Panda Bear. A decade ago, he left America for Lisbon, Portugal, where he now lives with his wife and two kids. So Philip Sherburne visited him to capture the essence of the European home and its influence on Lennox’s music.

The layout is very clean, simple, and easy to navigate, but there are multiple layers and elements that are cohesive and eye-catching as you scroll down the article. Before you even begin reading the story, there is a music player so that you can enjoy the sounds of Panda Bear while reading about him, which makes for a very immersive music story experience. The top of the story begins with the title painted across a moving image, a GIF of Lennox walking on the shore of a beach toward the water. Various GIFs are interspersed throughout the story, in addition to a few cinemagraphs, which are similar to GIFs but have more isolated movements layered over a video still.

Quotes in script typography are layered over some of these images, which adds another layer to the story and gives sort of a three-dimensional illusion. These images and text really add to the story because it illustrates the mood and paints a picture of the musician and his environment, which is exactly what the story is about.

There is one image where Lennox is at a soundboard, so you can assume he’s a musician, but other than that, someone who isn’t a seasoned music nerd might not know what this story is about if he or she didn’t know what Pitchfork was. Someone might argue there should be more photos of him playing music, but I think that would be too boring and easy. With music features, it’s more interesting to see musicians in a different perspective because there are already countless images of them behind their instruments or on stage.

At the end of the story, Lennox is walking away from the water toward the camera, which loops back to the first image of the page, giving a complete circle and end to a multimedia story. The images are beautiful and the order in which they appear are strategic and effective.