By Alfred Lettang & Jerome Kalumbu

Interface Design & Prototype

Connect all dots - make, learn, iterate

Design low and high fidelity designs to evaluate product concepts. Create working prototype. Experience product in real environment.

Interface design and prototyping are critical stages in the development of digital products, websites, and applications.

These processes involve creating visually appealing and user-friendly interfaces that effectively communicate with users and enable them to interact seamlessly with the product.

Interface design focuses on the aesthetics, layout, and visual elements of the user interface, while prototyping involves building interactive models to test and refine the design before development.

Problem: Frankenstein design, iteration hell

Creating interface designs and prototype can present several challenges during the design process. These challenges can impact the effectiveness and success of the design process.

Some common problems include: lack of specification clarity, limited user testing/involvement, iteration hell, lorem ipsum content, communication and collaboration issues with stakeholders and developers etc...

Solution: Keep checking your designs with developers and stakeholders, then iterate in response

Connect all dots. Use data from previous 5 steps, communicate ideas and updates with stakeholders as often as possible, keep checking with developers to ensure that you are not designing Frankenstein.

Checklist

Bring your product to life

  1. Sitemap / site architecture document
  2. Use word documents with content
  3. Follow brand and design manual
  4. Follow marketing & sales strategy
  5. User & business goals
  6. Design wireframes + full visual + prototype
  7. HTML - Prototype
    (semantic html, html chunks, modern CSS and SASS technology, naming convention and structural setup CSS + HTML)
  8. Best practices
  9. User experience:
    User flow (user journey), Call to actions, Content hierarchy and priorities, Navigation (main, sub navigation, contextual navigation, breadcrumb navigation), Typography (Type setting, font size and hierarchy, font scaling, contrast), Mobile adaptation (Responsive), Legibility and readability, Accessibility, User interaction
  10. User interaction & experience testing, accessibility
  11. AIDA
  12. Create style guides

Process

Keep checking with developers, then iterate in response

1. Low fidelity visual
Initial rough design to present site and information structure to test user experience and user journeys in low fidelity visual. No graphical distraction.
Make it easier to evaluate product concepts, stakeholder reviews
Check with developers
2. High fidelity design
Closely matches the final result of a product’s design
3. Working prototype
Test and see product in real environment
Check with developers to ensure that you are not building a "Frankenstein"
4. Stakeholder reviews
Never ask "what do you think?"
Instead ask questions like: "Does the design communicate the value proposition agreed at the outset of the project?", "Does the design achieve the organisational objectives?"
5. Visual, prototype and content iteration based on stakeholder reviews.
6. Bring your product to life!

Takeaways

  • Low and high fidelity visual
  • Working prototype
  • See and test product in real environment
  • HTML structure & SASS/CSS framework setup reviewed
  • Content verified
  • Images, icons & videos ratios and dimensions confirmed
  • Navigation systems, accessibility, usability and user journeys tested
  • Style guide confirmed
  • Product ready for development phase

Books

Links