4 ms·
Process: Mockup > Design (> Design Mockup) > Implement > Iterate () = Optional Mockup Tools: - https://balsamiq.com/ - https://wireframe.cc/ Design
by graphememes 10y ago
Process:
Mockup > Design (> Design Mockup) > Implement > Iterate
() = Optional
Mockup Tools:
- https://balsamiq.com/
- https://wireframe.cc/
Design Tools:
- Photoshop
- Sketch
- AI
Post-design Mockup / Implementation:
- https://www.invisionapp.com
Common Approaches to Implementation:
- CSS Framework (Bootstrap / Foundation)
- CSS Grid & Typography (Skeleton)
- 100% Custom CSS (Expert / Experienced mode)
When to Use?
- Wireframe implementation? (Framework / Grid)
- MVP (Framework / Baseless)
- Mockup to be scrapped (Baseless)
- Animations / Marketing (Framework / Custom)
Implementation Tooling:
- Build (Gulp / Webpack)
- Hot Loading (browser-sync, webpack-hotreload-server)
- Processors (Babel, Rollup)
- CSS Minification (minify, uncss)
- Image minification (imagemin)
There is more but this will get you about 95% there