Design

From Things and Stuff Wiki
Revision as of 23:48, 23 July 2012 by Milk (talk | contribs) (→‎Workflow)
Jump to navigation Jump to search


still hashing about

Design basics

Social

to add social stuff;

etc

User experience

General

  • Usability First - We want to provide valuable information about usability for anyone interested in the design of software or websites, from beginners to experts, in academia or in industry.
  • UX for the masses - These articles are written by Neil Turner - A UK based UX designer. I like to share, discuss and comment on UX ideas, tips, insights and practices that everyone can use to help design a better user experience for all.

Examples

  • UX Myths collects the most frequent user experience misconceptions and explains why they don't hold true. And you don't have to take our word for it, we'll show you a lot of research findings and articles by design and usability gurus.

Branding

Ratios

Usability

  • Skeumorphism & Storytelling - "An interface that is not only easy to use, but fun to use, engages the user and creates an experience where obstacles are easier to overcome, and thus an experience where the product is easier and more effortless to use. Done right, skeuomorphism can retain the simplicity and ease of use of an interface while empowering users to act."

Information Architecture

  • Information Architecture - The importance of having a well-structured website comes from how information and data is related to each other. The thorough planning and gathering of ideas to form a structured and meaningful arrangement of this data is Information Architecture.
  • So what’s an Information Architect?
    • study of information structure for a defined purpose
    • define the architecture of content relative to database construction and user-interaction
    • organize and qualify the appropriate use of metadata schemas, controlled vocabularies, folksonomies, ontologies etc.
    • articulate and produce meaningful information visualizations
    • help to structure information for easy digestion in digital applications

Accessibility

BS 8878, Web accessibility - Code of Practice, is consistent with the Equality Act 2010 and is referenced in the UK government’s e-Accessibility Action Plan

Social, UX and Brand Style Guides

SEO

Sitemaps

  • Sitemaps are an easy way for webmasters to inform search engines about pages on their sites that are available for crawling. In its simplest form, a Sitemap is an XML file that lists URLs for a site along with additional metadata about each URL (when it was last updated, how often it usually changes, and how important it is, relative to other URLs in the site) so that search engines can more intelligently crawl the site.

Tools

Domain

Process

Concepts

Guides and examples

  • Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web. They help form a common visual language between the designers and the stakeholders and provide a catalyst for discussions around the preferences and goals of the client.

Workflow

Using an iterative design and tasklist based roadmap.

  • Define project brand
    • Feel
    • Colour palette
    • Logo
    • Typography
      • Webfont for headings, paragraphs, navigation, etc.
      • Vertical rhythm baseline (proportions for font-size and line-height)
    • Texture and background
    • Header
    • Slogan
  • Define UX+IA
    • Think about the users
    • What are the primary areas of the site?
    • What info to display for each area audience?
    • What content needs written?
    • Create sitemap outline of pages / addresses
    • Layouts for areas and pages
      • Page (as a part of the site as a whole)
      • Primary navigation always available
      • Secondary area navigation depends on area (or subarea) context
      • Primary info(s)
      • Secondary blocks of info
    • Wireframe layout for mobile first and desktop (and then tablet)
    • How can the project brand differ yet retain continuity in each area its pages?
  • Use base theme
    • HTML5
    • Mobile first
      • Make sure mobile devices don't get desktop size CSS or content
      • 320 And Up
    • If available, use server-side CSS preprocessing through theme or plugin.
      • LESS and limited SCSS/Compass in PHP (all shared), full SCSS/etc. with Ruby (easier on VPS)
      • Semantic CSS with grid and vertical rhythm systems
      • Web fonts and icons
  • Etc.
  • Start coding
    • Setup a development site using wp-base-install
    • Set project based CSS preproces variables and mixins
    • Import test content, or remove samples and import from production or other materials
    • Etc!
  • Testing
    • Check in different browsers
    • Quick; Ask folk for remote feedback
    • Detailed; Get folk to browse it, quietly watch over their shoulder, tell them to access certain info, ask them to vocalise all thoughts, write down their actions and issues, communicate more, refine design, implement
  • Migrate to new site
    • Full migration of data and users
    • Check plugins and settings are alligned
    • Test
    • Etc.
Retrieved from "https://wiki.thingsandstuff.org/index.php?title=Design&oldid=2689"