Site Role Models

Harvard Museum of Natural History

screencapture-hmnh-harvard-edu-home-2018-11-02-20_33_35

The Harvard Museum of Natural History is a natural history museum housed in the University Museum Building, located on the campus of Harvard University in Cambridge, Massachusetts.

Good web design advantages I’d like to use for reference:

  • Homepage functions as an effective guide instead of giving too much information on a crowded homepage.
  • Big and simple search bar on the header.
  • Small and almost unnoticeable administrator login portal near the footer.

 

Metropolitan Museum of Art – Visit

screencapture-metmuseum-org-visit-met-cloisters-2018-11-02-21_25_24

The Metropolitan Museum of Art of New York City, colloquially “the Met”, is the largest art museum in the United States.

Good web design advantages I’d like to use for reference:

  • Long content page that is arranged in a very scannable way, enabling users to quickly grasp key information
  • “Plus” and “Minus” icons are embedded into the content to hide extra information.  It speeds up users’ scanning process.
  • Clickable Google Map Image that can take users to maps.google.com for route planning.

 

The Museum of Science and Industry of Chicago- Getting Here

screencapture-msichicago-org-visit-getting-here-2018-11-03-11_41_39

The Museum of Science and Industry, Chicago is the largest science center in the Western Hemisphere.  It is housed in the former Palace of Fine Arts from the 1893 World’s Columbian Exposition.

Good web design advantages I’d like to use for reference:

  • Instead of adding all the pages under the navigation bar, they put most pages under the secondary navigation in sidebar on each relevant page.
  • Putting “by car”, “by bus”, “by train”, and “by bike” under the types of transportation menu bar. In this way, they created a shorter page and help their users find relevant information faster.
  • The typefaces for the content on each page are carefully chosen to provide a both scannable and pleasing reading experience for their users.

Site Competitors

Essig Museum of Entomology

screencapture-essig-berkeley-edu-2018-11-02-15_52_43

The Essig Museum of Entomology is a research museum dedicated to terrestrial arthropods, located at the University of California at Berkeley.

In terms of the web design of this entomology museum:

  • The home page content is not very scannable.
  • The museum logo is so large that it takes a large proportion of space above the fold.
  • The navigation bar is really long. It would be better if the menu items could be reorganized and combined to improve user-experience

 

Oregon State University Arthropod Collection

screencapture-osac-oregonstate-edu-2018-11-02-15_52_56

The Oregon State Arthropod Collection is the largest entomological research collection in the Pacific Northwest with a history extending back into the early years of the Oregon State College.

In terms of the web design of this entomology museum:

  • The biggest problem is the static specimen drawer picture that occupies the whole area above the fold. It confused me quite a bit at the beginning, for one second I wasn’t sure what to do.
  • Besides that, I really like the short and simple navigation bar.

 

M.T. James Museum

screencapture-entomology-wsu-edu-outreach-m-t-james-museum-2018-11-02-17_08_05

The James Collection ranks as one of the largest research and reference collections of insects in the Pacific Northwest and is an important and critical resource of the Washington State University and entomological community.

In terms of the web design of this entomology museum:

  • The website design is contemporary.
  • The title of the museum video introduction however is so large that it takes too much of the user’s attention.
  • Font size of the left navigation bar is relatively too small.
  • Also the Washington State University logo is misleading as users intuitively click that logo, expecting to go to the home page of the entomology department of WSU.

Week 7 Critical Analysis

GCOM 360

Week 7 Critical Analysis

 

What does writing have to do with design?

 Writing is an essential part of the creative process. As Busse explained, “From the proposal to the brief, from research to the content in our projects, and of course the rationales behind client presentations and case studies are all glued together firmly with writing. “[1] In order to make clients understand why such design is created and how it is going to help their business grow, we need to communicate the ideas and designs with them in words, both in verbal and written language.

The designers who are both competent in writing and designing are more likely to win a client’s trust and confidence. The competition in design industry is fierce. Multiple designers compete for one job, so designers with sloppy writing wouldn’t stand a good chance. As Busse said, “If you ever come across as an incompetent writer, your client will immediately judge you and doubt your expertise in other areas—regardless of how pretty your design work is.”[1]

 When working with other copywriters and editors, their writing styles can help designers drive relevant and corresponding designs. As Lapetino further explained that, “You can use a piece’s writing style as a guide that will inform your design choices… You can capture some of these emotions and sensations with the time-tested tools of design (color, layout, rhythm, gestalt, harmony) while simultaneously supporting the writing.”[2] By working side by side with other teammates, designers play an important role in outputting a cohesive and compelling project to their clients.

 As a web designer, carefully choosing correct words for the content is vital for creating an engaging user experience. Anthony gave an example on words used for links, “Instead of focusing on the interface and its content, ‘click here’ diverts their attention to the user and their mouse. Not to mention, you can also make them feel dumb by suggesting that they don’t know what a link is or how to use a mouse.”[3] It is our job to optimize user experience and pay attention to all the details visually or literally on a web design project.

Additionally, how content is presented on digital devices is evolving everyday. When McGrane talked about future content strategy, she mentioned that, “Think about all the presentation information built into our content to describe how it should be styled. It needs to be somehow stripped out for audio interfaces… Speech is going to change everything. It’s an example of why adaptive content is so important. ”[4] Good writing and design help deliver good content, so in order to stay on top of industry trends, we need to be good content creators.

 

References

  1. “If you don’t think you need to write good, then you’re an idiot”. Mark Busse. Oct 26, 2012.
  2. “10 Strategies to Help Designers Conquer a Fear of Writing”. Tim Lapetino. Jan 11, 2013.
  3. “Why Your Links Should Never Say ‘Click Here’”. Anthony. Jun 20, 2012.
  4. “Karen McGrane on the future of content strategy”. Creative Bloq Staff. Sep 13, 2013.

Writing for the Web

5 Tips on Portfolio Presentation For Your First Design Interview

360_9_a

Two interviewers, one male and one female in their thirties, listening to a young male interviewee presenting his design portfolio

You have carefully selected your most compelling design pieces and put them together in your portfolio. You are so proud of it and you’re ready to stride into the job market. But do you know how to sell yourself and your works in front of skeptical interviewers? Here are 5 tips to help you … read more

 

5 Great Tips to Help You Succeed in College

360_9_b

A young man in a plaid shirt wearing a black backpack, posing in front of the camera and smiling

Dear high school graduates, whether going to a research university or a community college: We’ve interviewed past successful graduates and current college faculty staff to get their advice for you. Here we have put together these 5 great tips for you to succeed in your college journey… read more

 

This Saturday Come Visit Our iFish Booth at Clarkston Area Farmers Market

360_9_c

A middle aged man giving fishing tips to a group of people at a farmers market booth on a sunny day

The fishing season has started, but have you geared up for it? Our fishing experts will be at the Clarkston Area Farmers Market this Saturday to give you tips on fishing techniques and equipment, right on time for this fishing season. Besides that, you’ll also get to see our latest lures… read more

Card Sorting Exercise

WechatIMG194WechatIMG195

What did you learn? Was it closed or open? How did the team work together?

I had an open card sorting lab exercise of the SCC counseling web page with my teammates Ellen, Sophak, and Marcus. I learned to organize information logically into categories for navigation. There were too many content cards. We focused mainly on how to categorize them logically, and we forgot to optimize the sorting from a user’s point of view. It was good teamwork, we figured everything out efficiently. Although for some content on the homepage I had different opinions from Sophak.  Overall, it was a good experience to test the waters of behind-the-scenes work for building a large website, like a college website.

Week 6 Critical Analysis

GCOM 360

Week 6 Critical Analysis

 

How can the work done behind-the-scenes to ‘design’ information affect the visual design the user interacts with?

 Article Pair selected: Information Vs Technical Architecture; Creating a Successful Information Experience for Your Users.

 

  1. Information Architecture affects the navigation and layout of applications

As Thurow said about things she cared about when it comes to information architecture, “Where will primary navigation be placed? … If a page doesn’t contain secondary navigation, what will the layout of the page be?”[1] Navigation and layout are important elements of applications, because they determine how the information is organized and where it’s displayed. Layout alone is the foundation of where the visual elements can be placed, for example where to put images. Information architecture provides guidance for effective navigation and layout.

 

  1. Information Architecture affects application component styles

Thurow said that, “As an information architect and usability professional, I have to consider the failure rate of different menus (fly-out menus are more error prone than drop-down menus), the paradox of choice, and the technology used to access content.”[1] In her example, fly-out menus and drop-down menus are menus of different styles. These two different types of menus have different SEO impact, thus it leaves the information architect and technical architect to decide which menu style to use for the business goals of the application. But for users, fly-out menus and drop-down menus give different visual experiences.

 

  1. Information Architecture pulls all the components of the application together, including the visual components.

Lior said that, “A good information experience pulls all the components of the application together so that users can successfully and confidently move through an application.”[2] Information architecture is user-focused, which builds the information structure and guides users to use the application successfully. In one of the examples Lior talked about, she said that, “In the example below, you can see that by combining information and visuals you can create an effective message with very little text.”[2] By properly integrating graphical prompts and accurate notes, users understand the instructions faster and easier. In this case, good information architecture makes best use of visual elements and provides a better user experience for the application.

 

References

  1. “Information Vs Technical Architecture”. Shari Thurow. Sep 2, 2011.
  2. “Creating a Successful Information Experience for Your Users”. Linda Newman Lior. May 9, 2013.

Week 6 Glossary

GCOM 360

Week 6 Glossary

 

Redundant Navigation

Redundant Navigation is a means in which websites use multiple paths to display the same information for their users. Redundant navigation is good for the user experience. Users think differently from each other, so redundant navigation gives users more options to find same information.

 

404 page

404 page appears when a user follows a broken link. 404 page error is a common hypertext transfer protocol response when a user follows a link to visit a webpage that actually doesn’t exist anymore. 404 page reduces user experience and is a sign of poor website content management.

 

Keywords

Keywords are words or phrases we use to search for information on search engines. Search engines use keywords to find the most relevant information on the Internet for the users. Content creators add proper keywords to their content so their websites can have a better chance to be found by search engines.

 

Meta Data / Meta Tags

Meta Data is the description of data. It is created to help people find and understand the context of the data. For example, title, description, tags, categories, table of contents, etc., are all meta data.

Meta Tags are metadata used to describe the content on a website. They are not visible on a webpage, but are instead built into the HTML code of a webpage. Search engines read meta tags to get an idea what a webpage is about, and to decide if the content on the website is relevant to any specific searching keywords.

 

Listicle

Listicle is a combination of a list and article. It is a writing style in which an article is made of a list with extra information added to each list item. Listicle has good readability and could be used as a framework to understand a complicated topic easier.

 

Backlinks

Backlinks are links inserted on other websites, used to point back to your website and take customers to go to your website. The quality and quantity of backlinks are important criteria for search engines to determine the ranking of your website on the search results pages.

 

Anchor Link

Anchor Link is a web link that is used to take users to a specific point on a webpage, in order to save the user’s time in scrolling and scanning through the context of that webpage. Anchor links improve user experience and usability of a webpage.

 

Page Speed

Page Speed refers to how fast the content on a web page loads. It is now a ranking factor of Google search on mobile devices. Web pages with fast page speed rank higher than others with slow page speed.

 

Jeffrey Zeldman

Jeffrey Zeldman is a legend and leader in the web design industry. He has been leading and promoting standards-based web design since 1995. He has made enormous contributions to the web design industry. He has started a web design webzine, published several popular web design books, founded two web design agencies, and initiated a web design conference.

 

Ethan Marcotte

Ethan Marcotte is a web designer and front-end developer who started the movement of “responsive design”, which provides a new way of designing websites. He is the author of two books about responsive design: “Responsive Design: Patterns & Principles” and “Responsive Web Design”.