ITI 256 HTML 5 Level III Responsive Web

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

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

Wireframe Design Apps Free Cloud Based � Frame Box � Gliffy � Mockflow � Mockingbird � Proto � Wireframe � i. Phone Mockup (i. Phone) � Mokk. me (i. Phone) 2/16/2022 Copyright © Carl M. Burnett $ Cloud Based � Axure ($) � Fluid ($) � Hot. Gloo ($) � Moqups ($) � Invision ($$$) � Pidoco ($) � Protoshare ($) � Solidify ($) � UXPin ($) 3

Wireframe Design Apps Download Apps � Justinmind � Craft by In. Vision LABS � Bolt 2. 0 ($) � Flair Builder ($) � Indigo Studio ($$$) � Omnigraffle (i. OS)($) � TETHR (i. OS) � i. Plotz (i. Phone & Android) � Mockups. me - (Web & Desktop) � Balsamiq ($ - Web & Desktop) 2/16/2022 Copyright © Carl M. Burnett Plugin Apps � Wireframe Sketcher (Plugin for Eclipse IDE) � Pencil Project (Firefox Extension) 4

Sketch Design Resources Sketch App �Wireframes (116) �i. OS (486) �Android (211) �Wearables (60)

UI 8 Design Resources �UI 8 – 576 resources �UI Kits �Wireframe Kits 2/16/2022

Student Exercise 1 �Continue designing your website. �Use a wireframe application if you want

Setting Up a Framework �Setup Development Environment �Download Framework �Install Framework �Student Exercise 1

Designing Using a Framework �Determine Content �Collect Content �Design Navigation �Design Responsiveness �Viewports �Grid

Student Exercise 2 �Begin developing your website based on Framework selection. �Synchronize development and

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