Fast Company Homepage This ad is very distracting and grabs the viewer attention more than the logo and navigation. It could cause the user to overloo

Similar documents

Good Publication Design

Typographic hierarchy: How to prioritize information

Strong signs your website needs a professional redesign

Design 101: Dress for the Job You Want

THE 18 POINT CHECKLIST TO BUILDING THE PERFECT LANDING PAGE

2/1/2016. Discuss website usability essentials Explain principles of design Critique a website in terms of usability and design

The Path to a Successful Website

Designing Research Posters. College of Art and Design Chris Jackson, Associate Dean Keli DiRisio, Assistant Professor

The 10 Biggest Mistakes

UNC Eshelman School of Pharmacy

There are four (4) skills every Drupal editor needs to master:

1. You re boring your audience

Creating Universally Designed Word 2010 Documents - Quick Start Guide

Creating Universally Designed Word 2013 Documents - Quick Start Guide

Appendix A Design. User-Friendly Web Pages

Before & After. Use the Principles Cheatsheet! From The Non-Designer s Design Book, Robin Williams Non-Designer s Design 8

Workshop with ROCKWOOL editors. Helle Jensen, Senior ux consultant

User Experience. 10 Principles to Ensure a Great. on your Website. Issue 3. An Appnovation Digital ebook

Marketing Best Practices

Design that Enhances Readability

Using Image Content Correctly

Professor: Angela Hicks

balancer high-fidelity prototype dian hartono, grace jang, chris rovillos, catriona scott, brian yin

WEBSITE BEST PRACTICES

The Four Biggest Mistakes B2B Companies Make With Their Website That Drives Visitors Away To The Competition And How To Keep Them From Leaving.

Q&A for The Washington Times New Website

It is written in plain language: no jargon, nor formality. Information gets across faster when it s written in words that our users actually use.

Design Principles. The Four Basic Principles That Underlie Good Page Design

How to Create and Submit a Press Release

BETTER LOOKING S

MARKETING VOL. 1

University of Wisconsin - Stout

Writing For The Web. Patricia Minacori

Design Development Documentation

Documentation:Blogzine WordPress Theme

EXCELLENCE IN ALL WE DO

Anatomy of a Marketing

Below are 7 Steps for Building an Effective Landing Page

Creating accessible forms

15 NEUROMARKETING. Mind Hacks. You Need To Be Using

Esri Story Maps let you combine authoritative maps with narrative text, images, and multimedia

AMERICAN EAGLE. Usability Testing. Page 1 Cover Page 2 Survey Pages 3-4 Sonja Pages 5-6 Danijela. Group 2 12/5/13

STONELAW HIGH GRAPHIC

On the Web sun.com/aboutsun/comm_invest STAROFFICE 8 DRAW

PLANNING. CAEL Networked Worlds WEEK 2

WEBSITE USER GUIDE.

TLMC SHORT CLASS: THESIS FORMATTING

Page Layout Design min

Web UI Dos and Don ts

A guide to simple, clean and minimalist design

Creating Universally Designed PowerPoint 2010 Documents - Quick Start Guide

TOP 10 DESIGN MISTAKES

TRINET INTERNET SOLUTIONS, INC.

Advanced Webpage Design

WEB PAGE ARCHITECTURE

Typesetting Tips. Put your best type forward.

Layout of a Desktop Publishing Document

Hershey Park. By: Alicia Danenhower. English 3880 Section 10. Deborah Welsh.

Heuristic Evaluation of Mango

Multimedia Design Principles. Darnell Chance August 2005

ABCs of Direct Mail. Tips for More Effective Marketing Publications

Page Title is one of the most important ranking factor. Every page on our site should have unique title preferably relevant to keyword.

UNIVERSITY OF BOLTON WEB PUBLISHER GUIDE JUNE 2016 / VERSION 1.0

INTRODUCTION TO TYPOGRAPHY DESIGN

Reviewing and Evaluating your Website

2013 Association Marketing Benchmark Report

Usability Test Report: Bento results interface 1

Format and Layout 8/31/2012. Using Visuals to Inform and Persuade

OCA Graphic Design: Core Concepts 1 Assignment 5 - Penguin Books Jane Braybrook Jane511794

Reading books on an ipad or other electronic device is a

Developed by: Beth Gibbs

Marketing Guide to Increase Sales

Design Principles. Advanced Higher Graphic Presentation. Professional Graphic Presentations by kind permission of

Sitefinity Manual. Webmasters. University of Vermont College of Medicine. Medical Communications

Creating a Website Using Weebly.com (July 2012 Update)

Wordpress Section Types RAINBOW DISTRICT SCHOOL BOARD WORDPRESS GUIDELINES

Creating a Presentation

CONCEIVING YOUR WEBSITE & ONLINE COMMUNICATIONS STRATEGY: A Helpful Guide Written by Amy Lenzo, under Creative Commons Licensing

Microsoft Office Word 2010

DESIGN & BRAND GUIDELINES

11/5/16 WEB DESIGN. Branding Fall 2016

Repetition is not just naturally consistent; it comes from intentional effort to unify all parts of a design.

Introduction. Watch the video below to learn more about getting started with PowerPoint. Getting to know PowerPoint

All-Ways Accessible. People experience the world in different ways. User Friendly Anyone can understand it. Versatile Easy to update.

Why Use a Style Guide?

Essential Component 2:

InDesign. your. Resumé. a how-to guide for creating a professional resumé using InDesign

TOOLKIT for Making Written Material Clear and Effective. SECTION 2: Detailed guidelines for writing and design

Document and Web design has five goals:

How to get the most out of your website and the importance of a user friendly booking system.

How to Access Your Digital Member Magazine

How to Write Engaging s

EFFECTIVE WEB CONTENT

Cognitive Disability and Technology: Universal Design Considerations

How to Make Your RooFolio

ways to present and organize the content to provide your students with an intuitive and easy-to-navigate experience.

Marketing Lens Marketing Lens Fast Track Implementation Plan Marketing

Heuristic Evaluation. An Analysis of The Toronto Public Library Website. By: Chris Dacol

Process Book - Project 2 Cause Social Networking Site

Transcription:

Competitive Review Fast Company Homepage Doing well: It has a bold and modern feel that appeals to the internet audience. Doing poorly: The layout is confusing as to which elements match up and it's unclear what to look at. The heavy imagery is not good for mobile viewing. Opportunities: We'll explore a balance between imagery and content for creating impact. Fast Company Article Fast Company Responsive Mashable Article Mashable Homepage Doing well: The article pages have good elements like large headlines, author image, and images in the text. Doing poorly: It has ads that are interspersed throughout the page and disrupt the flow for the user. It has a lot of decoration that creates visual noise. Opportunities: We'll explore creating a rich content experience without being cluttered. Mashable Responsive Vox Homepage Doing well: It has bold and engaging article pages with pull quotes and images within the copy. Doing poorly: It lacks consistency and organization on the homepage. Opportunities: We'll explore ways to keep articles engaging and easy to scan (not just big chunks of text) and carry that through to social media. Vox Article Vox Responsive

Fast Company Homepage This ad is very distracting and grabs the viewer attention more than the logo and navigation. It could cause the user to overlook the navigation. The main navigation is a bit small, gets lost, and is hard to see. This large visual does a good job capturing the viewer's attention. It's hard to tell this link and description is associated with the image above. The all caps here is not friendly and inviting to read, users will be less likely to stop and view it. 6 These quick links are a good way to help users navigate into the site. okay By Brady Pierzchalski 7 These simple links to social media 6 show how many people have already emerged with the article encourages views to also participate. 8 I'm unsure as to whether these links 7 belong to the article above, or below. By 8

Fast Company Homepage Some area By 0 By By empty By

Fast Company Article The typography here is hard to read, it could use some more letter spacing. By The subheads are small. It would be more helpful if subheads divided the text better so readers can scan the article easier. The right sidebar has stronger visual presence. It draws and distracts the reader from the main content. Yikes!! By

Fast Company Article Clear and concise call to action are a good size and give readers a few options to share the article after reading. Compact yet visually engaging suggested articles help users continue to navigate the site.

Fast Company Article Really? I wasn't aware of this... By really...? By

Fast Company Responsive Clear icon for more navigation, tells the users to tap for more links. That arrow is a bit unclear to me. By Responsive functionality allows users to to view the site of multiple sized devices. cool! By Okay, this makes sense... but I didn't see a text box appear for annotation. Weird. By hmmm... two s? By back on track with #! By

Mashable Article 9 8 Very clear headline helps users know exactly what page they're on. It's interesting to see the number of followers they have, it signals to reader the popularity of the site and encourages them to also follow. Large number showing off the amount of shares this article has tells 0 the user how popular and worth reading the article is. This graph that shows how quickly 7 people are sharing this article. It quickly informs the reader and encourages the reader to also share. Picture and name of writer helps make the article more personable and makes it easy for readers to find more 6 6 articles by the same writer. Images that break up the article makes it easier to scan and not as dense with copy. 7 So many ads on the side cause readers to just ignore this section even though there might be useful content here. 8 ghghghgj By 9 wow By 0 flood everywhere By

Mashable Article

Mashable Homepage This colored element emphasizes this column and draws the users attention here. Small links to the side are easy to miss especially since the large articles links and ads on the right require the user to scroll down a lot. Hierarchy and spacing of the layout is confusing making it hard to know what's to look at first. This ad is very tall causing user to scroll a lot to skip it and it takes a lot of space in the middle of the page. This ad shape takes up and wastes a lot of space on the sides.

Mashable Homepage

Mashable Responsive Responsive functionality allows users to to view the site of multiple sized devices. The navigation link "More" makes it very clear and tells the users to tap for more links. Ads take up a lot of the page which will most likely annoy and confuse readers.

Vox Homepage This only calls up a login CTA, which is underwhelming. This site is one long page without any navigation makes it hard to jump to sections of the site. Inviting and bold features section make users want to click on articles. Using brand-like fonts creates continuity. The text itself is confusing, feels like they're trying too hard. Variety of block styles keep users intrigued and scrolling down the page. At some point the styles get a bit too disparate and users may lose sense 6 of what the styles mean. I like this part thing By me too! By 6

Vox Homepage The organization is very confusing. Though these items appear to be under the Videos section, they are not all actually videos.

Vox Homepage

Vox Homepage

Vox Article Very clear headline helps users know exactly what page they're on. Unified social sharing buttons look really clean and don't distract from the main focus. Pull quotes from the article work well to help readers skim the text and capture their attention. Type size and line length are easy to stay with for a long time. Images within the article help break up the text and give readers something visual to look at.

Vox Article Suggested articles help give users more options to read. It could be more engaging if there were thumbnail images. Repeating the social sharing at the bottom reminds users to share and helps make it easy for them.

Vox Responsive Bold headline works really well, it's clear and legible. The two column layout works well for the responsive tablet sized view. These feature boxes seem to be too tall and takes up more space than it needs to. This makes the user need to swipe a lot to see the content. By aaaaaa By a By

Vox Responsive