This site is a grid layout that shifts between mobile/tablet/laptop/desktop versions easily.
This website features a hero image as the focal point on all versions of the website, which utilizes positive space above the fold. Below the fold, the site utilizes negative space in order to highlight the product line, reviews, an about blurb and a navigation section. This allows for variations in the size of the elements, which include images, texts and call to actions to purchase the product. This minimalist design provides plenty of balance and allows for the products to be featured while minimizing cognitive load. The medium size images of each product on the desktop version also allows for people to view the intricate design of the headphones. The smaller images on the mobile and tablet versions still allow for plenty of negative space, thus successfully highlighting the products.
The footer on the desktop has far more negative space, while the tablet and mobile versions have lines separating the navigation area. The text is quite hard to read in the tablet and mobile versions on the desktop given the small and thin text, and the lines between the navigation are almost too thin.
The user can click on the shop buttons to learn more about the product. If a user wants more information, they can either click on the icon at the top left for further navigation, or they can scroll to the bottom of the page. This call to action is simple and easy to use.
The site was clearly designed with mobile first in mind, and the minimalist approach requires an easy experience for anyone shopping on their phone. The size of the over the ear headphone images on the mobile and tablet versions are cut off, and perhaps reducing the image size would still preserve the integrity of the product while showing the whole image. However, the desktop version almost features too much negative space, and a user may want to learn more about the product without having to click further. Perhaps a tagline of short product description would do in this case.
Also, the blinking e-mail subscription call to action appears after the user is on the site for a few minutes. This disrupts the balance of focusing on the product, and the blinking may alienate people.
Overall, one won’t experience cognitive overload on this site, sans the lines in the footer on the tablet and mobile versions.
The Hammer Museum –
This desktop version website effectively uses space, size and balance by focusing on the museum’s visual art specialties. It is a content heavy website with many navigation points, and the designer has to keep this in mind to simplify many potential points of navigation.
This grid based site uses more positive space than negative space on all versions, and many of the larger feature images for each content section contain photography with a focal point. The focal point contains a hero image of the latest installation that pops out along with the headline and tagline in the desktop version. There is more positive space than negative space on this site, and the images that display visual art gallaries are the bulk of the positive space. However, the images selected range from minimalist – greyscale with a lot of negative space within the photo – to more complex images – full color with multiple objects/people. This gives the viewer some room to breathe while scrolling down the page and provides much needed balance with the heavy use of positive space. The page ends with negative space in the footer that displays simple navigation and key museum information (address, hours, contact information).
On the mobile and tablet sites, the hero image is no longer the focal point. Instead, the logo is the primary focal point with the text leading to further content are the secondary focal points. This accounts for people who may be ‘on the go’ and want to quickly access information about closing times and active exhibits. It also seems like this site was designed with mobile first in mind, and the tablet version has some content that is slightly askance.
The logo at the top serves as a secondary focal point on the desktop version, but the hero image with N. Dash’s work provides an easy navigation opportunity to view more of her work, which is rooted in fabric and indigo coloring. The hero image is slightly larger than the other images, but it appears the same size with the navigation bar at the top and the content navigation page to the specific site. The images below are smaller, yet use the same headline teaser to encourage the user to learn more about Mario Garcia Torres’ or other exhibits that are opening soon.
The images that are roughly half the size of the hero image are for openings that are happening later in the year or for educational programs.
One could argue that there could be more negative/white space. This site may not be ideal for someone who likes lighter coloring. However, I think the headline banners break up the content well and provide useful information for learning more about what is going on at the museum. More white space could be achieved by decreasing the size of the images and text, therefore allowing for the negative space to highlight the images and text. The wrong series of images can easily make this site look cluttered. In addition, the hero image may be underwhelmind to some people, and more white space could highlight the minimalism of M. Dash’s work. The text is also a large size, which works well for accessibility purposes.
Also, one could argue the hero image for the desktop version is too large. Perhaps supplemental imagery or a split image of two N. Dash works of art could be displayed on the homepage to break up the simplicity of the hero image. The large hero image also disrupts the balance of the site, and the negative space below almost looks too clean compared to the vibrant image on the top.
Driving users to the content succeeds with the image heavy teasers. The logo is on the top, which provides easy navigation back to the home page.
Similarities and Differences
Both sites utilize sans serif fonts and display a hero image in the desktop version. The hero image is minimized as the focal point in the mobile and tablet versions. This makes sense, as both sites feature objects, rather than text, to be viewed.
They are vastly different in how they use positive and negative space. The Hammer Museum utilizes little negative space in the desktop version, and more negative space in the laptop/tablet/mobile versions. However, more positive space is utilized than negative space in the smaller screens.
On the other hand, negative space is a main feature of the desktop version of Master & Dynamic below the fold. The mobile/laptop/tablet versions feature
Both sites are more balanced in their smaller screens, and they both use the hero image with corresponding text to draw the user deeper into the site on the desktop version. The Hammer Museum verges on being too image heavy, but it works because the image content 1) differs enough and 2) has insightful text and text overlays (by that, I mean the boxes behind the text!)
All in all, The Hammer Museum site is slightly more balanced as a whole than the Master & Dynamic site given the presentation of content and display of images that is appropriate for each device. However, Master Dynamic uses negative space in a way that gives the user clear call to actions. Both use size in a systematic approach though the site, giving the user a solid sense of hierarchy with the information.
What makes one solution more clear than another?
http://www.kooslooijesteijn.net/category/blog/ (Skip to “Website Sketching Workflow)
Koos Looijesteijn not only utilizes primitives to communicate potential layouts, but he includes different pen colors and text to identify the most optimal solutions for the user. Within this, he includes ideas about user flows within different layout solutions.
In addition, he indicates when pages external from the site should be opened on a new page. Items that require interaction are demarcated in green.
What works about the Design Shack solution is the simplicity of the primitives within potential layouts. This may not explain the process and expectations of the user in detail, but rather provides a final solution for the visual designer to layout materials in more detail. However, these are low-fidelity mock-ups, so further research and details on potential user flows may be necessary. This designer clearly is making a case for thumbnail sketches.
Both sites are geared more towards creating personal websites than client projects. Both argue the sketching process fuels creativity and provides a way start the wireframing process with ideas in mind. At the end of the day, the first solution is clearer than the second solution in terms of communicating why certain wireframes are being created. This allows for any potential questions about potential user flows to be discussed in a larger meeting context. The second solution gets the layout on the page, but the lack of user flows and context is perhaps more for the designer to elevate ideas to the next level.
Connective Cube 
Leave a comment