While snooping around in the code of a couple different websites, I ran into something interesting. I was looking at Si digital‘s site and liked how as you scrolled down, the text would appear.
I attempted to find the source behind this. This whole site is very user-oriented. It looks nice and is extremely interactive. That made it kind of hard to tell what was what when I looked through the code.
Something that I did find interesting was the webkit-font-smoothing tag. I originally thought that had something to do with the text showing up as you scrolled, but after doing some more research, I realized that this was a way to make text look smoother and more appealing.
-webkit-font-smoothing: antialiased; was used often in this site, so I decided to look into it further. This site explains what exactly the difference is when you use this tag. It just adds a higher quality of font type if your particular font is not easy to read.
Ultimately I didn’t really find what I was looking for, but I still found out something interesting along the way.
I chose this website not for the content, but for the presentation of that content. Bienville Capital Management is an investment firm, but their site is very clean and simple. Even though it is not a news site, I could see an interactive storytelling site use a design similar to this.
Their landing page has a cool gif background with a simple headline. It’s very clean, yet engaging and interesting to the user. But their lies a problem I think in the website. Navigation didn’t seem obvious to me at first. I felt like I was suppose to scroll or use the arrow keys in order to get to the next page. Actually, you have to click on the sidebar to left, which reveals the navigation. I wish their navigation was more obvious, so that is something I would work on.
Once you actually find the navigation, it is very easy to go back and forth between pages. Their are only four pages, so they are very brief. If the audience is still interested and needs more information, then they can contact them very easily. I think that is their goal, to peak the interest of the audience, and then get them engaged.
I like how on most of their pages they used a background image instead of just a plain background. The image isn’t overwhelming nor does it take away from the text, which is important for readability.
I do wish they would use more color either with typography or other elements. Some teal was used for accent colors, but I think they could use more color to liven up the site. The typography for this site makes sense, which big bold words to attract your attention. The sans-serif type continues the sleek and simple look of the whole site.
The Verge offers breaking and long-form feature stories about science, technology and art. I think the user experience for this site is very good. Right away you see about seven lead stories with different colored backgrounds. I believe this engages the reader and catches their eye. There is a nice hierarchy of headlines to let the reader know what is most important.
I do think the site is aesthetically pleasing, but the page overall can be a bit confusing and overwhelming. There are a crazy amount of stories on the home page with no clear categorization going on. There are little tags above each story stating what category they belong to, but as you scroll along, it’s not easy to determine what’s what.
Navigation does appear to be pretty simple. Tabs along the top get straight to the point. There are quite a few of them, but I think that they accurately represent what the website consists of. Each tab has a pulldown bar, which shows some of the leading stories in that category.
As far as their reporting and story telling, they use a lot of different elements to increase user experience, especially in long-form. Large photos, videos, links, and special type fonts can be found all throughout their long-form stories. I think those are the best elements of the website and they do it very well.
Their intended audience would be a younger crowd interested in entertainment, technology or science. Also, I think their reporting is tailored more towards people who are a little more interested in the subject or have more time to read their long-form stories. In today’s world, a lot of people don’t have that kind of patience and want to read something shorter.
I’m not sure what this website is or what it’s trying to do because I believe it is in German, but it did have an element that I liked. http://www.hundertgrad.de/ I’m interested in the use of CSS on photos, so I was hoping to find out a cool technique for photo movement or something like that. This website doesn’t exactly have photo movement, but when you hover over the photos, a dark tint is put over them and text is brought up.
I think this is a good way to streamline your design, and avoid out of place text. Only when the user moves the curser over the photo does text appear, and that is when you really need to see the text. The photo is also a link that will take you to another page on the website.
I’m not entirely certain how it all works, but from looking at the code, it seems to have the photo there until the curser is over it. Then a preview image, which is just a transparent black photo with text on it, moves over top. It’s not too dark that the can’t see the image, but it’s dark enough that you can tell it’s the preview. As you can see in the code below, they have the original image and then the preview hover image:
<div class=”type-portfolio_flex kachel large” data-small-left=”30″ data-small-top=”80″ data-medium-left=”280″ data-medium-top=”90″ data-large-left=”370″ data-large-top=”80″ data-xlarge-left=”592″ data-xlarge-top=”128″ style=”left: 370px; top: 80px;”>
<a href=”#walter-ag-imagekampagne” class=”teaser is-portfolio_flex” data-id=”229″ data-type=”portfolio_flex” data-layer-footer=”true” data-layer-nav=”true”>
<img alt=”” src=”http://www.hundertgrad.de/wp-content/uploads/2014/06/Hundert-Grad-Kommunikation-Walter-AG-Imagekampagne-01-hover.png” class=”preview-hover”>
<img alt=”” src=”http://www.hundertgrad.de/wp-content/uploads/2014/06/Hundert-Grad-Kommunikation-Walter-AG-Imagekampagne-01.jpg”>
I like how the text appears over top of the photo, so that all the photos can fit nicely together. I would have liked to see some movement on the photos, such as increasing their size when hovering over them, but we practiced that in class so I think I would be able to do that on my own.
I chose to critique The New York Times‘ website as a whole. We all know that they often publish amazing interactive stories, but their website as a whole is also well designed.
Right off the bat, you see their iconic New York Times masthead in bold blackletter. Underneath are all the different sections of the website, of which there are many. Also, on the top left of the page, there is a pull out with all of the sections as well as the sub categories within those sections. This can make navigating their large website much quicker.
At the top of the home page they have a few of their lead stories running pretty big to grab attention. As you scroll down, the lesser or older stories are also listed under their sections. They have photos running with most of their lead stories to draw the reader in. They change up their type faces a lot depending on what type of story it is and how important it is. I like this because it makes it easier to tell the stories apart from each other.
As for Krug’s five guidelines for capturing reader attention, a visual hierarchy is created by the placement of the story, the size and font of the headline, and the size of the photo. The top of the page can become rather jumbled up because they are trying to fit so many stories in one area at the same time. From their standpoint, I’m sure they just want the viewer to see their story right away and click on it, but it can get confusing what is what. They don’t break up the stories into sections until the bottom of the home page. Of course, if you knew what you wanted to read, you could go directly to that section and you would know what you were going to get. It is very clear was to what is clickable. From what I could see, all of the links were bolded, drawing the eye there and making it easy to distinguish what you can click on. There is a lot going on, but I think their particular type is clean enough that it is readable. There aren’t too many ads, and for those reasons, I think that noise is kept to a minimum.
Overall I think that the page can be quite overwhelming because of all of the stories at once, but once you take some time to read around, it because clear what is what. The large bold headlines point out what are the important stories. Navigation to particular sections is very easy and convenient. Photos are used well to give some context to the story before you even read it. I think the design doesn’t deviate too far from Krug’s guidelines, which makes it an effective page.
I didn’t really know where to start with this so I literally just searched for interactive storytelling websites and ended up finding a pretty cool one. This one is done by Pitchfork which is a site for music news and reviews and things of that sort. This particular piece was about Daft Punk and how they grew in popularity.
This was at the very top of the page and as you scroll down, the background moves and different photos come in. The story itself is interesting because it shows how Daft Punk are real people and not just some mysterious robots that make cool noises. It even explains why they wear their gold and silver helmets.
As far as usability, I thought it was executed well. There is an option to go full screen which doesn’t sound like a big deal, but I think it makes it much more of an experience and not just reading a story off a page. The flames that you see in the photo actually move in the background which gives it a cool effect as well.
They talk about a time when Daft Punk was about to unveil their brand new outfits and helmets during a photo shoot with all this fire, but they were worried that people would see them and take a picture and post it for others to see before they were ready. So the flames on the page kind of tie everything together.
Everything flows well as you scroll down. They do something interesting when you’re between segments, though. They add quotes from Daft Punk and, as you’re reading, the letters change to 1s and 0s like binary code because they’re supposed to be robots. It’s a really cool effect except that It makes it extremely hard to read. Otherwise it’s a really cool concept.
Overall I thought the they photos and the interactive scrolling made the story very interesting. It also has a standard version, which is not interactive, if you just want to read straight from the page.