UX Project: Wireframes for the new Release Skin

What are Wireframes - Definitions & Examples

Definitions:

From Boxes and Arrows: A wireframe...

  • demonstrates a site concept quickly, allowing clients (stakeholders) to react to content placement and rendering
  • can provide guidance to visual designers with respect to information priorities
  • allows for usability testing early in the project lifecycle
  • can elaborate on a singular vision for the site
  • can facilitate collaboration between design team and information architects
  • is easy for clients (stakeholders) to understand

The obligatory wikipedia definition:
A website wireframe is a basic visual guide used in web design to suggest the layout of fundamental elements in the interface. Because of this they are often completed before any artwork is developed. When completed correctly they will provide a visual reference upon which to structure each page. Wireframes also allow for the development of variations of a layout to maintain design consistency throughout the site. This is an important part of the initial development stage because it creates user expectations and helps to develop an awareness of and familiarity with the site.

How wireframes might look like....

Note that there's no general look of wireframes - while people agree on the purpose, the depth of detail varies a lot.

wireframe.gif

wireframe.gif

Reasons / Goals / Outcome of this Project

  • Our current UI does not follow a visible guideline, styleguide or strategy. Features are added more or less without thinking about the overall picture.

  • draft ideas and requirements for an userinterface that meets our vision (and transfer them into an graphical document):
Vision:
Create the web collaboration platform with the most pleasant user experience!

Minimize the learning curve for newcomers and help more experienced users to release the platform's full potential.

  • build a foundation on which we can discuss these needs, wants, features, specs and stuff without diving into code already

  • have a design document which can be used for the actual skin creation.

Wireframes for new Foswiki release skin

We aim for getting things done for release 2.0...

Task Tracking

How to Participate

Join the discussion on above topics. Add your thoughts and ideas. Help coding the designs once we finished smile

UserExperienceProjectForm edit

TopicTitle UX Project: Wireframes for the new Release Skin
TopicSummary create a set of wireframes which can be used for coding the new release skin
Subject skin
Status abandoned
Status note no activity
Driver
Skills needed interaction design, visual design
InterestedParties
Topic revision: r10 - 12 Mar 2014, MichaelDaum
The copyright of the content on this website is held by the contributing authors, except where stated elsewhere. See Copyright Statement. Creative Commons License    Legal Imprint    Privacy Policy