Please enable JavaScript.
Coggle requires JavaScript to display documents.
W7 - Introduction to Frameworks (Categories of Framework (UI Frameworks…
W7 - Introduction to Frameworks
Front-end Framework
Collection
of files and
assets
to use as a
starting point
for the front-end of a web project
.
E.g: a CSS framework with
predefined rules
for typography and other
common HTML elements
.
Why separate HTML, CSS and JS?
Efficiency of coe
Ease of maintenance
Accessibility
Device Compatibility
Good practice
Categories of Framework
UI Frameworks
Includes CSS, HTML, JS and
icons
Provide
structure and style
for all UI components
Provide
feature specific functionality
Can be
heavy
but offer
complete set of tools
for front-end development
Comprehensive Frameworks
More about
style
than functionality
Provide
structure and style
for
common elements
and
cross browser consistency
Minimal Frameworks
Provides
baseline style
only
Lightweight
To Framework or Not?
Pros
Speed up
development time
Structure and
consistency
Easier
for teams
Learn
from others
Cons
Code bloat
Restricted
to a framework's structure
Front-end Development best practices
.
Sketch -> Wireframe -> Prototype -> Design
|Ideation|Concept Validatn|Refinemnt|Usability|
commitment
and
level of fidelity
increase as go through
Sketches
Freehand drawing
- intended to
separate
design from
process making
Only to Support
process of making! NOT actual design
Wireframes
Aim to
explore and communicate concepts
that come out of sketching
Prototyping
Not
final
but a set of
defined ideas
(to be refined)
Partially
working artifact
Prototyping should be
Quick
Inexpensive
Clear
Detailed (interactivity)
Refined (represent almost real app)
Validated
Horizontal Prototyping v/s Vertical Protoyping
Horizontal
Many features but little detail
Useful in early stage of design
Overall interaction
Vertical
Few features but much detail
To test details of design
Prototyping (Conclusion)
Brainstorming --- Task centered fine tune UI, usability testing, screen design --- Limited field testing --- Alpha/beta testing
.
Low Fidelity --- Medium --- High --- Working System
Early Design ------------ Late Design
User Interfaces
UI Elements
Input Controls
checkboxes, radio buttons, text fields, buttons
Navigational
Pagination, search fields, tags, icons
Informational and containers
Notifications, Progess bar, tool tips, message boxes, modal window
User Interfaces v/s User Experience
UI
looking
on how products surface
looks and functions
UX focused on
user's journey
to solve problem
Information Architecture (IA) Basics
Main Components of IA
Organization schemes and structures
Alphabetical Scheme
Geography Scheme
Topic Scheme
Task Scheme
Audience Scheme
Content Strategy
Functionality
Prioritizing Accessibility
Best functionality useles if user does not it is there
Fitt's law: most important functionality should use combination of size and placement to help user access it quickly and easily
Managing Learning Curve
NEVER scare away users with new innovative features