...
We use google drawings and low fidelity (grey rectangles devoid of detail) Sketch wireframes for this step, but feel free to use anything. It usually takes the form of a flowchart
ie:
Volunteer clicks signup →
Volunteer selects a signup method (facebook, github, linkedin etc) →
Volunteer confirms account details →
Account created
Step 4:
...
Interface design
How will the layout work? How will the devs start building it?
What components do you need to make the user flow you defined in step 3 work? Do you need a text input? A button? A loading bar? Once you know what components you need, how do they fit together on the page?
We use Sketch, Abstract and Storybook here to make this happen.
At this point your design should be well fleshed out enough for usability testing - scoring anything below a B+ is not ideal 😞
Step 5: Visual design
What does the look and feel of the functionality you’ve designed look like?
Does it flow smoothly? Would it benefit from nicer animations / pseudo states / final touchups?
How consistent is it with the rest of the application?
Final polish would happen here alongside the developer you’re working with
Tooling
We rely on Abstract to manage our pattern library, prototypes and all design assets. It provides version control and file management capabilities.
...