Design

From Things and Stuff Wiki
Jump to navigation Jump to search


still hashing about

Design basics

Web design

Social

to add social stuff;

etc

Usability and UX

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.
  • Accessites.org - We aim to prove that accessible, usable web sites built with universality and standards in mind need not be boring. We will show you artfully crafted sites made by some of today’s most progressive web developers.
  • useit.com: Alertbox -

Jakob Nielsen's Current Issues in Web Usability articles

Specifics

  • 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.
  • 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."
  • Can We Please Move Past Apple’s Silly, Faux-Real UIs?

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

Navigation

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

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

SEO

Domain

Process

Overview

Layout

Stencil kits

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 kinds of users? What do they want to see? (User story?)
    • Create/brainstorm a sitemap outline/diagram of pages(/addresses)
    • What are the primary pages/areas of the site?
    • What info to display on each of these for their users?
    • What content needs to be written?
    • What elements (content areas, etc.) go on each page?
      • Page (as a part of the site as a whole)
      • Primary navigation always available
      • Secondary area navigation depends on area (or subarea) context
      • Primary page info/content
      • Secondary blocks of info/content
    • Wireframe layout for mobile first and desktop (and then tablet)
    • How can the project brand differ yet retain continuity in each area its pages?
  • Design specifics
    • Visual hierarchy
    • Scale (REM)
    • Webfont (Font Squirrel)
    • Main and section colour palette (CSS)
    • Creative magick
  • 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=4778"