1. Session III http://www.profburnett.com
ITI 256 HTML5 Level III Responsive Web Design (RWD) and Front-End Frameworks
Session III

2. Outline Wireframes for Design Selecting a Framework
Framework Selection Rules
Frameworks Available to Select
Setting Up a Framework
Designing Using a Framework
2/25/2019
Copyright © Carl M. Burnett

3. Wireframe Design Apps Free Cloud Based Frame Box Gliffy Mockflow
Mockingbird
Proto
Wireframe
iPhone Mockup (iPhone)
Mokk.me (iPhone)
$ Cloud Based
Axure ($)
Fluid ($)
HotGloo ($)
Moqups ($)
Invision ($$$)
Pidoco ($)
Protoshare ($)
Solidify ($)
UXPin ($)
2/25/2019
Copyright © Carl M. Burnett

4. Wireframe Design Apps Download Apps Plugin Apps Justinmind
Craft by InVision LABS
Bolt 2.0 ($)
Flair Builder ($)
Indigo Studio ($$$)
Omnigraffle (iOS)($)
TETHR (iOS)
iPlotz (iPhone & Android)
Mockups.me - (Web & Desktop)
Balsamiq ($ - Web & Desktop)
Plugin Apps
Wireframe Sketcher (Plugin for Eclipse IDE)
Pencil Project (Firefox Extension)
2/25/2019
Copyright © Carl M. Burnett

5. Sketch Design Resources
Sketch App
Wireframes (116)
iOS (486)
Android (211)
Wearables (60)
Bootstrap 4 UI Kit for Sketch Sketch Resource
2/25/2019
Copyright © Carl M. Burnett

6. UI8 Design Resources UI8 – 576 resources UI Kits Wireframe Kits
2/25/2019
Copyright © Carl M. Burnett

7. Student Exercise 1 Continue designing your website.
Use a wireframe application if you want to.
2/25/2019
Copyright © Carl M. Burnett

8. Setting Up a Framework Setup Development Environment
Download Framework
Install Framework
Student Exercise 1
2/25/2019
Copyright © Carl M. Burnett

9. Designing Using a Framework
Determine Content
Collect Content
Design Navigation
Design Responsiveness
Viewports
Grid
Cards
Containers
2/25/2019
Copyright © Carl M. Burnett

10. Student Exercise 2
Begin developing your website based on Framework selection.
Synchronize development and live website.
2/25/2019
Copyright © Carl M. Burnett

11. Review Wireframes Design Apps Selecting a Framework
Framework Selection Rules
Frameworks Available to Select
Setting Up a Framework
Designing Using a Framework
Next – Session IV
2/25/2019
Copyright © Carl M. Burnett