Design

From Things and Stuff Wiki
Revision as of 14:53, 22 July 2012 by Milk (talk | contribs)
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.
  • http://www.uxforthemasses.com/ 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.

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

  • 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

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
    • 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
    • Wireframe layout for mobile first and desktop (and then tablet)
    • How can the project brand differ yet retain continuity in each area?
  • 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
    • Use wp-base-install
    • Set project based CSS preproces variables and mixins
    • Import production or test content
    • Etc!
  • Testing
    • Etc.
Retrieved from "https://wiki.thingsandstuff.org/index.php?title=Design&oldid=2625"