This guide is best suited for small to mid sized development projects, a good example are micro-services or embedded development for small manufactures, makers and IoT companies.
Software Development Process
Story board and Wireframe
For me the is nothing better in the early part of designing a new system and software is to begin the visualization process as early as possible.
Storyboards Walk Through Usecases
Storyboards ought to be created for the major use-cases, there should be one frame for each step in the use-case should help bring forth details of decisions that need to be made.
Storyboarding in evitably leads to more and more frames with growing detail and notes. By all means keep jotting down the notes they will become important soon.
The quality of the storyboard defines the quality of the User eXperience!
Wireframe define The Story
Every click of a button or newly entered form typically takes the user onto a new frame in the story, which also likely means a new web page, or popup to look at and work with.
When the storyboard starts to take form, it is time to start nailing down the wireframes for the application. Wireframes are going to:
- Specify usage of every pience of screen real estate.
- Identify specific content on each page
- Identify all media for page (video, images, PDFs and CTA)
- Clearly identified CTA
Style Guide
Great References
- Rafal Tomal
- Refactoring UI
- Nathan and ConvertKit
Style Guide
- Color Palatte
- Typography
- Templates are page layouts (from wireframes)