How can I make my Enterprise site look attractive and up-to-date?

Brief History of Web Design

1995-2002: First Gen. HTML
Clickable links, menus, and buttons
Focus on designer interests

2003–2010: Web 2.0
Graphic effects, gradients and color 
Focus on being big and bright

2010–2012: Skeuomorphic design
Digital objects emulate real-world
Focus on comfort and familiarity 

2012–now: Flat design
Simple, white space, and clean lines
Focus on usability and content

The Evolution of Web Design

Over the last few decades, web design and strategy has evolved. Websites used to be focused on the creator, someone who puts information out there to tell the world what they have to say. Today, though, websites are powerful marketing tools used to interact with a savvy audience. 

In the internet's early years, design trends focused on getting content out there and getting people to click things. As programming languages developed more design options became available, so the focus shifted to creating the brightest, flashiest, and biggest graphics to make individual sites stand out. User experience was less important than getting clicks. 

By 2010, though, designers starting moving toward skeuomorphic design, where digital elements emulate real-life counterparts. Pages that look like they're turning. Keypads that look like phone buttons. Music controls that look like radio buttons. The goal was to make visitors feel comfort by using familiar objects, actions, and sounds. This kind of design was image and code-heavy, increasing site complexity and load times. 

The current standard is flat design, where the focus is on simplicity and usability. Flashy buttons, skeuomorphic elements, and overloaded sites are being replaced with clean lines, white space, and simple but powerful images. Graphics are reverting to 2-D, hover effects are disappearing, and distracting elements are being removed. This design style's simplicity improves load times while letting users focus on the content of a page.

What Makes a Site Look Bad

Print or Essay-Style Writing

  • Pages that try to cover every possible topic
  • Long paragraphs that turn into walls of text
  • Overly formal or jargon-filled writing

Confusing Navigation 

  • Navigational menus that go down a rabbit hole
  • Pages that are randomly grouped together
  • Non-standard words for standard terms 

Crude Page Layouts

  • Tables used to create a page layouts
  • Disorganized pages with no clear design
  • Graphics that seem randomly placed

Outdated or Dormant Content

  • Incorrect contact information
  • Details on programs that no longer exist
  • Newsletters or calendars that aren’t being updated

Poor SEO Practices

  • Pages that are overloaded with keywords
  • Pages that haven’t been updated in months
  • Copied meta titles and descriptions

Dated Graphic Design and Imagery

  • Excessive use of graphics, incl. navigation buttons
  • Anything that flashes, blinks, or is fluorescent
  • Skeuomorphic design elements

Lack of Accessible Design

  • Missing or misused alt text
  • Headings used to make text stand out
  • "Click here" type links or images as links

How to Make a Site Look Good

Format written content to be skimmed

  • Keep your paragraphs short (4 sentences max)
  • Keep sentences short (25 words max) and direct
  • Design your content to be easily skimmed

Streamline your navigation

  • Limit the number of pages on your site
  • Group pages based on visitor needs 
  • Create a page once and link back to it, don’t copy

Design your pages to be simple and useable

  • Design pages to be clean, streamlined, and focused
  • Make pages that have clear and obvious purpose
  • Use whitespace to improve readability and clarity 

Make your content engaging and useful

  • Write with a friendly, but professional, voice
  • Update your content frequently (every 3-6 months)
  • Make sure your content supports visitor needs

Take SEO into consideration

  • Use meta titles and descriptions on key pages
  • Include words visitors would put in a search box
  • Create page titles that are unique to each page/site

Include supplemental graphics

  • Use infographics to represent data and numbers
  • Have just a few simple and clean curated images
  • Select photographs that look natural and unfiltered

Design for Accessibility

  • Add alt text on images that serve a purpose
  • Use headings to create structure and organization
  • Ensure links make sense out of context

Additional Resources

For additional assistance, email ucomm-support@pdx.edu