Product Design Playbook
  • messy.design Design Sprint Playbook
  • Previous Sprints
    • README
  • Pre-sprint
    • Materials
      • Pre-Sprint Client Worksheet
      • Pre-Sprint Request for Materials
      • Workshop Pre-Read
  • Understand
    • Materials
      • Competitive Analysis
      • Gathering Forces
      • Inspiration Info Source
      • The Business
      • The Customer(s)
      • Define: Terms
      • Risks
      • The Problem & The Value Prop
    • Example Schedule for Understand
  • Diverge
    • Example Schedule for Diverge
  • Converge
    • Example Schedule for Converge
    • Exercises
      • Critical Path
      • Pitch Practice
      • Card Sorting
      • Needs, Wants, Desires
      • Who, What, When, Where
      • Silent Critique
      • 3-12-3
      • Group Critique
      • Assumptions / Test Board
      • Crazy Eights
      • Five Whys
      • Storyboards
      • Back Burner Board
      • Problem Statement
      • Mind Mapping
  • Prototype
  • Hi-Fidelity Mocks
  • Test & Learn
    • Example Schedule for Validate
    • Materials
      • Sprint_Summary
  • Contributing
Powered by GitBook
On this page
  • Hi-Fidelity Tools
  • Sketch
  • Adobe Photoshop
  • Adobe Illustrator
  • Brand.ai
  • Zeplin
Export as PDF

Hi-Fidelity Mocks

Drill down the details

PreviousPrototypeNextTest & Learn

Last updated 6 years ago

The core purpose of the hi-fidelity mock, the assumptions you are trying to validate/invalidate or the knowledge gaps you are trying to fill should have all been discussed in and details sussed out in . During this phase you will build a more details and highly designed mocks that can be shared with high level stakeholders.

The high-fidelity wireframe at messy.design includes more actual content, specific typeface choices, and may include specific information on image dimensions, and even button styles. We tend to play with shades of grey rather than sticking to sheer black and white in order to lay out subtleties in contrast that will appear once color is applied, style the navigation, and really look at pairing typefaces in a space where color is not a conflicting option. In this case, our designers start to see the life of the site emerge before color and imagery are even an option. This step for us at messy.design moves the wireframe a little beyond the basic structural benefits, moving toward the life-like qualities of design, but without distracting from the focus of function.

Hi-Fidelity Tools

Easily create complex shapes with their state-of-the-art vector boolean operations and take advantage of our extensive layer styles. Sketch’s fully vector-based workflow makes it easy to create beautiful, high-quality artwork from start to finish. Very helpful tutorials can be found on their page of their website.

The world’s best imaging and design app is at the core of almost every creative project. Work across desktop and mobile devices to create and enhance your photographs, web and mobile app designs, 3D artwork, videos, and more. Very helpful tutorials can be found on their page of their website.

The industry-standard vector graphics app lets you create logos, icons, sketches, typography, and complex illustrations for print, web, interactive, video, and mobile. Very helpful tutorials can be found on their page of their website.

Cloud based pattern library. This is also a plugin that we leverage heavily in Sketch so that everyone has the most up to date design assets.

Zeplin is a perfect place to have an up-to-date repository for pixel-perfect comps which anyone can see and comment on. Additionally, Zeplin is used to share assets between designers and devs.

Converge
Prototype
Sketch
Learn
Adobe Photoshop
Tutorials
Adobe Illustrator
Tutorials
Brand.ai
Zeplin