SlideShare a Scribd company logo
1 of 64
Download to read offline
Prepared byVinodWilson – Architect – Crestron Electronics
 This section discusses several elements of
page layout:
 Visual hierarchy,
 Visual flow,
 and how to use dynamic displays.
 The concept of visual hierarchy plays a part in
all forms of graphic design.
 Put simply, the most important content
should stand out the most, and the least
important should stand out the least.
 Also, titles ought to look like titles,
 subtitles ought to look like subtitles
 lists ought to look like lists
 What is the most important thing on the page
you’re designing? Make that the center of
attention.
 Can you rank other things in declining order
of importance?Arrange them on the page in
ways that draw progressively less attention;
make them look less interesting.
UI Design - Organizing the page
 Density
 A dense, heavy-looking block has stronger contrast with
the surrounding page; an open look has less contrast
 Background color
 Contrast draws attention. Black on white, or vice versa, is
the strongest contrast possible.
 Position and size
 A medium or large text block, roughly in the center of the
page, calls attention to itself as the primary content (like
an article or blog post). But a small strip of text at the
bottom of the page says quietly, “I’m just a footer” and
begs to be ignored!
 Rhythm
 Lists, grids, alternating elements such as
headlines and summaries, and whitespace
separation can create a strong visual rhythm that
irresistibly draws the eye.
UI Design - Organizing the page
UI Design - Organizing the page
UI Design - Organizing the page
UI Design - Organizing the page
UI Design - Organizing the page
UI Design - Organizing the page
Containment
 Visual flow deals with the tracks that readers’
eyes tend to follow as they scan the page.
UI Design - Organizing the page
Put calls to action after the text you want viewers to read first.
UI Design - Organizing the page
UI Design - Organizing the page
 Visual Framework
 Center Stage
 Grid of Equals
 Titled Sections
 ModuleTabs
 Accordion
 Collapsible Panels
 Movable Panels
UI Design - Organizing the page
 What
 Design each page to use the same basic layout,
colors, and stylistic elements, but give the design
enough flexibility to handle varying page content.
 Use when
 You’re building a website with multiple pages, or a UI
with multiple windows—in other words, almost any
complex software.
 You want it to “hang together” and look like one
thing, deliberately designed; you want it to be easy to
use and navigate.
 Why
 When a UI uses consistent color, font, and layout, and
when titles and navigational aids—signposts—are in
the same place every time, users know where they are
and where to find things.
 They don’t have to figure out a new layout each time
they switch context from one page or window to
another.
 Have you ever seen a book in which the page numbers
and headings were in a different place on each page?
 A strong visual framework, repeated on each
page, helps the page content stand out more.
 How
 Draw up an overall look-and-feel that will be
shared among all pages or windows.
 Home pages and main windows are “special” and
are usually laid out differently from inner pages,
but they should still share certain characteristics
with the rest of the site.
UI Design - Organizing the page
UI Design - Organizing the page
 What
 Put the most important part of the UI into the largest
subsection of the page or window; cluster secondary tools
and content around it in smaller panels.
 Use when
 The page’s primary job is to show a single unit of coherent
information to the user, let him edit a document, or enable
him to perform a certain task. Other content and functions
are secondary to this one.
 Many types of interfaces can use a Center Stage tables and
spreadsheets, forms, and graphical editors all qualify. So
do web pages that show single articles, images, or
features.
UI Design - Organizing the page
UI Design - Organizing the page
 What
 Arrange content items in a grid or matrix. Each item
should follow a common template, and each item’s
visual weight should be similar. Link to jump pages as
necessary.
 Use when
 The page contains many content items that have
similar style and importance, such as news articles,
blog posts, products, or subject areas.You want to
present the viewer with rich opportunities to preview
and select these items
UI Design - Organizing the page
UI Design - Organizing the page
UI Design - Organizing the page
UI Design - Organizing the page
 What
 Define separate sections of content by giving each
one a visually strong title, separating the sections
visually, and arranging them on the page
 Use when
 You have a lot of content to show, but you want to
make the page easy to scan and understand, with
everything visible.You can group the content into
thematic or task-based sections that make sense
to the user.
UI Design - Organizing the page
UI Design - Organizing the page
UI Design - Organizing the page
 What
 Put modules of content into a small tabbed area
so that only one module is visible at a time.The
user clicks on tabs to bring different modules to
the top.
 Use when
 You have a lot of heterogeneous content to show
on the page, possibly including text blocks, lists,
buttons, form controls, or images.
 Some of the page content comes in groups or
modules (or can be sorted into coherent groups).
Those modules have the following characteristics:
 Users only need to see one module at a time.
 They are of similar length and height.
 There aren’t many modules—fewer than 10, and
preferably a small handful.
 The set of modules is fairly static; new pages won’t be
added frequently, nor will existing pages be changed or
removed frequently.
 The modules’ contents may be related or similar to each
other.
UI Design - Organizing the page
UI Design - Organizing the page
UI Design - Organizing the page
 What
 Put secondary or optional material into panels
that can be opened and closed by the user.
 Use when
 You have a lot of heterogeneous content to show
on the page, possibly including text blocks, lists,
buttons, form controls, or images.You don’t have
room for everything.You might, however, have
Center Stage content that needs to take visual
priority
 Some of the page content comes in groups or
modules (or can be sorted into coherent
groups).Those modules have the following
characteristics:
 Their content annotates, modifies, explains, or
otherwise supports the content in the main part of
the page.
 The modules may not be important enough for
any of them to be open by default.
 Their value may vary a lot from user to user. Some will
really want to see a particular module, and others
won’t care about it at all.
 Even for one user, a module may be useful
sometimes, but not other times.When it’s not open,
its space is better used by the page’s main content.
 Users may want to open more than one module at the
same time.
 The modules have very little to do with each other.
When ModuleTabs or Accordion are used, they group
modules together, implying that they are somehow
related; Collapsible Panels do not group them.
UI Design - Organizing the page
UI Design - Organizing the page
UI Design - Organizing the page
 What
 Put modules of content into boxes that can be opened and closed
independently of each other.Arrange the boxes freely on the page,
and let the user move them around into a custom configuration.
 Use when
 You’re designing either a desktop application, or a website that most
users sign in to.
 News portals, Dashboard, and Canvas Plus Palette apps often use
Movable Panels.
 You want users to feel a sense of ownership of the software, or at least
have fun playing with it
 The page in question is a major part of the app or site—something
that users see often or for long periods of time.
 You have a lot of heterogeneous content to show on the page,
possibly including text blocks, lists, buttons, form controls, or images.
You don’t have room for everything
 Some of the page content comes in groups or
modules (or can be sorted into coherent groups).
Those modules have some of the following
characteristics:
 Users will almost certainly want to see more than one
module at a time
 Their value may vary a lot from user to user. Some
people want modulesA, B, and C, while others don’t
need those at all and only want to see D, E, and F.
 The modules vary a lot in size.
 There are many modules—possibly so many
that if all were shown at once, a viewer would
be overwhelmed. Either you or the user
should pick and choose among them.
 You’re willing to let users hide some modules
from view altogether (and offer a mechanism
to bring them back).
 The modules may be part of a tool palette or
some other coherent system of interactive
elements
UI Design - Organizing the page
UI Design - Organizing the page
UI Design - Organizing the page
UI Design - Organizing the page
UI Design - Organizing the page
UI Design - Organizing the page
 What
 Starting with a very minimal UI, guide a user through
a series of steps by showing more of the UI as he
completes each step
 Use when
▪ The user should be walked through a complex task step by
step, perhaps because the task is novel, rarely done, or
outside the user’s domain knowledge.
▪ But you don’t want to force the user to go page by page at
each step—you’d rather keep the whole interface on one
single page
▪ Alternatively, the task may be branched, with different types
of information required “downstream” depending on a user’s
earlier choices.
UI Design - Organizing the page
UI Design - Organizing the page
 What
 Starting with a UI that is mostly disabled, guide a user
through a series of steps by enabling more of the UI as
each step is done.
 Use when
 The user should be walked through a complex task step by
step, perhaps because the user is computer-naive or
because the task is rarely done (as in aWizard).
 But you don’t want to force the user to go page by page at
each step—you’d like to keep the whole interface on one
page.
 Furthermore, you want to keep the interface stable; you’d
rather not dynamically reconfigure the page at each step,
as you would with Responsive Disclosure
UI Design - Organizing the page
 What
 As the user resizes the window, resize the page
contents along with it so that the page is
constantly “filled.”

More Related Content

What's hot

10 Principles Of Effective Web Design
10 Principles Of Effective Web Design10 Principles Of Effective Web Design
10 Principles Of Effective Web Designsirferds
 
Basic Web Design Principles and Elements
Basic Web Design Principles and ElementsBasic Web Design Principles and Elements
Basic Web Design Principles and ElementsEromRamos
 
Promote Education Web Design Things To Consider When Designing A Website
Promote Education Web Design Things To Consider When Designing A WebsitePromote Education Web Design Things To Consider When Designing A Website
Promote Education Web Design Things To Consider When Designing A WebsiteZoaib Mirza
 
"Generating static web sites with Middleman"
"Generating static web sites with Middleman""Generating static web sites with Middleman"
"Generating static web sites with Middleman"Tony Camaiani
 
Drupal UB Usability Testing
Drupal UB Usability TestingDrupal UB Usability Testing
Drupal UB Usability Testingbeccascollan
 
University of Portsmouth Library: A practical approach to Responsive Design
University of Portsmouth Library: A practical approach to Responsive Design University of Portsmouth Library: A practical approach to Responsive Design
University of Portsmouth Library: A practical approach to Responsive Design Terminalfour
 
Web design content
Web design contentWeb design content
Web design contentMrCHenderson
 
Web design with dreamweaver charles nyangiti
Web design with dreamweaver charles nyangitiWeb design with dreamweaver charles nyangiti
Web design with dreamweaver charles nyangitiCharles Nyangiti
 
Web Design
Web DesignWeb Design
Web DesignMr_Casey
 
Online Platform Tools for ICT Content Development
Online Platform Tools for ICT Content Development Online Platform Tools for ICT Content Development
Online Platform Tools for ICT Content Development Christine Joy Benedicto
 
Facebook Timeline for Brands
Facebook Timeline for BrandsFacebook Timeline for Brands
Facebook Timeline for BrandsRed Urban
 

What's hot (15)

10 Principles Of Effective Web Design
10 Principles Of Effective Web Design10 Principles Of Effective Web Design
10 Principles Of Effective Web Design
 
Web Design
Web DesignWeb Design
Web Design
 
Basic Web Design Principles and Elements
Basic Web Design Principles and ElementsBasic Web Design Principles and Elements
Basic Web Design Principles and Elements
 
A primer on ux design
A primer on ux designA primer on ux design
A primer on ux design
 
Promote Education Web Design Things To Consider When Designing A Website
Promote Education Web Design Things To Consider When Designing A WebsitePromote Education Web Design Things To Consider When Designing A Website
Promote Education Web Design Things To Consider When Designing A Website
 
"Generating static web sites with Middleman"
"Generating static web sites with Middleman""Generating static web sites with Middleman"
"Generating static web sites with Middleman"
 
Drupal UB Usability Testing
Drupal UB Usability TestingDrupal UB Usability Testing
Drupal UB Usability Testing
 
University of Portsmouth Library: A practical approach to Responsive Design
University of Portsmouth Library: A practical approach to Responsive Design University of Portsmouth Library: A practical approach to Responsive Design
University of Portsmouth Library: A practical approach to Responsive Design
 
Web design content
Web design contentWeb design content
Web design content
 
Web design with dreamweaver charles nyangiti
Web design with dreamweaver charles nyangitiWeb design with dreamweaver charles nyangiti
Web design with dreamweaver charles nyangiti
 
Web Design
Web DesignWeb Design
Web Design
 
Online Platform Tools for ICT Content Development
Online Platform Tools for ICT Content Development Online Platform Tools for ICT Content Development
Online Platform Tools for ICT Content Development
 
Facebook Timeline for Brands
Facebook Timeline for BrandsFacebook Timeline for Brands
Facebook Timeline for Brands
 
Navigation1 A
Navigation1 ANavigation1 A
Navigation1 A
 
Isy302 ch01
Isy302 ch01Isy302 ch01
Isy302 ch01
 

Similar to UI Design - Organizing the page

Accessibility in Pattern Libraries
Accessibility in Pattern LibrariesAccessibility in Pattern Libraries
Accessibility in Pattern LibrariesRuss Weakley
 
Accessibility in pattern libraries
Accessibility in pattern librariesAccessibility in pattern libraries
Accessibility in pattern librariesRuss Weakley
 
Meetup: The big change coming to WordPress in 2018 - Gutenberg
Meetup: The big change coming to WordPress in 2018 - GutenbergMeetup: The big change coming to WordPress in 2018 - Gutenberg
Meetup: The big change coming to WordPress in 2018 - GutenbergMickey Mellen
 
Meetup: The big change coming to WordPress in 2018 - Gutenberg
Meetup: The big change coming to WordPress in 2018 - GutenbergMeetup: The big change coming to WordPress in 2018 - Gutenberg
Meetup: The big change coming to WordPress in 2018 - GutenbergEvan Mullins
 
Web Site Design Principles
Web Site Design PrinciplesWeb Site Design Principles
Web Site Design PrinciplesMukesh Tekwani
 
Website usability ideas for business growth
Website usability ideas for business growthWebsite usability ideas for business growth
Website usability ideas for business growthJames Smith
 
Web Usability Site Design
Web Usability   Site DesignWeb Usability   Site Design
Web Usability Site DesignOvidiu Von M
 
new UID module one(1) in the ppt format.
new UID module one(1) in the ppt format.new UID module one(1) in the ppt format.
new UID module one(1) in the ppt format.abhishek106899
 
Professional ui for a website design
Professional ui for a website designProfessional ui for a website design
Professional ui for a website designRavi Bhadauria
 
Drupal - Blocks vs Context vs Panels
Drupal - Blocks vs Context vs PanelsDrupal - Blocks vs Context vs Panels
Drupal - Blocks vs Context vs PanelsDavid Burns
 
Content Management & Page Structure - Best Practices for Structuring Content ...
Content Management & Page Structure - Best Practices for Structuring Content ...Content Management & Page Structure - Best Practices for Structuring Content ...
Content Management & Page Structure - Best Practices for Structuring Content ...D'arce Hess
 
FYBSC IT Web Programming Unit II Html Page Layout & Navigation
FYBSC IT Web Programming Unit II Html Page Layout & NavigationFYBSC IT Web Programming Unit II Html Page Layout & Navigation
FYBSC IT Web Programming Unit II Html Page Layout & NavigationArti Parab Academics
 

Similar to UI Design - Organizing the page (20)

Accessibility in Pattern Libraries
Accessibility in Pattern LibrariesAccessibility in Pattern Libraries
Accessibility in Pattern Libraries
 
WebBestPractices3
WebBestPractices3WebBestPractices3
WebBestPractices3
 
Accessibility in pattern libraries
Accessibility in pattern librariesAccessibility in pattern libraries
Accessibility in pattern libraries
 
Meetup: The big change coming to WordPress in 2018 - Gutenberg
Meetup: The big change coming to WordPress in 2018 - GutenbergMeetup: The big change coming to WordPress in 2018 - Gutenberg
Meetup: The big change coming to WordPress in 2018 - Gutenberg
 
Meetup: The big change coming to WordPress in 2018 - Gutenberg
Meetup: The big change coming to WordPress in 2018 - GutenbergMeetup: The big change coming to WordPress in 2018 - Gutenberg
Meetup: The big change coming to WordPress in 2018 - Gutenberg
 
Web Site Design Principles
Web Site Design PrinciplesWeb Site Design Principles
Web Site Design Principles
 
Website usability ideas for business growth
Website usability ideas for business growthWebsite usability ideas for business growth
Website usability ideas for business growth
 
Web Usability Site Design
Web Usability   Site DesignWeb Usability   Site Design
Web Usability Site Design
 
Usability
UsabilityUsability
Usability
 
new UID module one(1) in the ppt format.
new UID module one(1) in the ppt format.new UID module one(1) in the ppt format.
new UID module one(1) in the ppt format.
 
Web Usability
Web UsabilityWeb Usability
Web Usability
 
Professional ui for a website design
Professional ui for a website designProfessional ui for a website design
Professional ui for a website design
 
Drupal - Blocks vs Context vs Panels
Drupal - Blocks vs Context vs PanelsDrupal - Blocks vs Context vs Panels
Drupal - Blocks vs Context vs Panels
 
4 Interface Design
4 Interface Design4 Interface Design
4 Interface Design
 
Writing for the Web
Writing for the WebWriting for the Web
Writing for the Web
 
Revit easy from AutoCAD
Revit   easy from AutoCADRevit   easy from AutoCAD
Revit easy from AutoCAD
 
Lit 20170306
Lit 20170306Lit 20170306
Lit 20170306
 
Content Management & Page Structure - Best Practices for Structuring Content ...
Content Management & Page Structure - Best Practices for Structuring Content ...Content Management & Page Structure - Best Practices for Structuring Content ...
Content Management & Page Structure - Best Practices for Structuring Content ...
 
Moodle report
Moodle reportMoodle report
Moodle report
 
FYBSC IT Web Programming Unit II Html Page Layout & Navigation
FYBSC IT Web Programming Unit II Html Page Layout & NavigationFYBSC IT Web Programming Unit II Html Page Layout & Navigation
FYBSC IT Web Programming Unit II Html Page Layout & Navigation
 

More from Vinod Wilson

Representational state transfer (rest) architectural style1.1
Representational state transfer (rest) architectural style1.1Representational state transfer (rest) architectural style1.1
Representational state transfer (rest) architectural style1.1Vinod Wilson
 
Service oriented architecture introduction
Service oriented architecture   introductionService oriented architecture   introduction
Service oriented architecture introductionVinod Wilson
 
Togaf – models for phase A
Togaf – models for phase ATogaf – models for phase A
Togaf – models for phase AVinod Wilson
 
The components of togaf architecture
The components of togaf architectureThe components of togaf architecture
The components of togaf architectureVinod Wilson
 
Togaf – architecture development method (adm)
Togaf – architecture development method (adm)Togaf – architecture development method (adm)
Togaf – architecture development method (adm)Vinod Wilson
 
Togaf 9 introduction
Togaf 9 introductionTogaf 9 introduction
Togaf 9 introductionVinod Wilson
 
D3 data visualization
D3 data visualizationD3 data visualization
D3 data visualizationVinod Wilson
 
Event driven architecture
Event driven architectureEvent driven architecture
Event driven architectureVinod Wilson
 
Domain driven design simplified
Domain driven design simplifiedDomain driven design simplified
Domain driven design simplifiedVinod Wilson
 
Developing saas application in azure
Developing saas application in azureDeveloping saas application in azure
Developing saas application in azureVinod Wilson
 
Iot cloud service v2.0
Iot cloud service v2.0Iot cloud service v2.0
Iot cloud service v2.0Vinod Wilson
 
IoT mobile app device cloud identity and security architecture
IoT mobile app device cloud identity and security architectureIoT mobile app device cloud identity and security architecture
IoT mobile app device cloud identity and security architectureVinod Wilson
 

More from Vinod Wilson (15)

Representational state transfer (rest) architectural style1.1
Representational state transfer (rest) architectural style1.1Representational state transfer (rest) architectural style1.1
Representational state transfer (rest) architectural style1.1
 
Service oriented architecture introduction
Service oriented architecture   introductionService oriented architecture   introduction
Service oriented architecture introduction
 
Togaf – models for phase A
Togaf – models for phase ATogaf – models for phase A
Togaf – models for phase A
 
The components of togaf architecture
The components of togaf architectureThe components of togaf architecture
The components of togaf architecture
 
Togaf – architecture development method (adm)
Togaf – architecture development method (adm)Togaf – architecture development method (adm)
Togaf – architecture development method (adm)
 
Togaf 9 introduction
Togaf 9 introductionTogaf 9 introduction
Togaf 9 introduction
 
Ssas mdx language
Ssas mdx languageSsas mdx language
Ssas mdx language
 
D3 data visualization
D3 data visualizationD3 data visualization
D3 data visualization
 
Unit testing
Unit testingUnit testing
Unit testing
 
Event driven architecture
Event driven architectureEvent driven architecture
Event driven architecture
 
Domain driven design simplified
Domain driven design simplifiedDomain driven design simplified
Domain driven design simplified
 
Data partitioning
Data partitioningData partitioning
Data partitioning
 
Developing saas application in azure
Developing saas application in azureDeveloping saas application in azure
Developing saas application in azure
 
Iot cloud service v2.0
Iot cloud service v2.0Iot cloud service v2.0
Iot cloud service v2.0
 
IoT mobile app device cloud identity and security architecture
IoT mobile app device cloud identity and security architectureIoT mobile app device cloud identity and security architecture
IoT mobile app device cloud identity and security architecture
 

Recently uploaded

UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxYounusS2
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServiceRenan Moreira de Oliveira
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.francesco barbera
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 

Recently uploaded (20)

UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptx
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 

UI Design - Organizing the page

  • 1. Prepared byVinodWilson – Architect – Crestron Electronics
  • 2.  This section discusses several elements of page layout:  Visual hierarchy,  Visual flow,  and how to use dynamic displays.
  • 3.  The concept of visual hierarchy plays a part in all forms of graphic design.  Put simply, the most important content should stand out the most, and the least important should stand out the least.  Also, titles ought to look like titles,  subtitles ought to look like subtitles  lists ought to look like lists
  • 4.  What is the most important thing on the page you’re designing? Make that the center of attention.  Can you rank other things in declining order of importance?Arrange them on the page in ways that draw progressively less attention; make them look less interesting.
  • 6.  Density  A dense, heavy-looking block has stronger contrast with the surrounding page; an open look has less contrast  Background color  Contrast draws attention. Black on white, or vice versa, is the strongest contrast possible.  Position and size  A medium or large text block, roughly in the center of the page, calls attention to itself as the primary content (like an article or blog post). But a small strip of text at the bottom of the page says quietly, “I’m just a footer” and begs to be ignored!
  • 7.  Rhythm  Lists, grids, alternating elements such as headlines and summaries, and whitespace separation can create a strong visual rhythm that irresistibly draws the eye.
  • 15.  Visual flow deals with the tracks that readers’ eyes tend to follow as they scan the page.
  • 17. Put calls to action after the text you want viewers to read first.
  • 20.  Visual Framework  Center Stage  Grid of Equals  Titled Sections  ModuleTabs  Accordion  Collapsible Panels  Movable Panels
  • 22.  What  Design each page to use the same basic layout, colors, and stylistic elements, but give the design enough flexibility to handle varying page content.  Use when  You’re building a website with multiple pages, or a UI with multiple windows—in other words, almost any complex software.  You want it to “hang together” and look like one thing, deliberately designed; you want it to be easy to use and navigate.
  • 23.  Why  When a UI uses consistent color, font, and layout, and when titles and navigational aids—signposts—are in the same place every time, users know where they are and where to find things.  They don’t have to figure out a new layout each time they switch context from one page or window to another.  Have you ever seen a book in which the page numbers and headings were in a different place on each page?
  • 24.  A strong visual framework, repeated on each page, helps the page content stand out more.  How  Draw up an overall look-and-feel that will be shared among all pages or windows.  Home pages and main windows are “special” and are usually laid out differently from inner pages, but they should still share certain characteristics with the rest of the site.
  • 27.  What  Put the most important part of the UI into the largest subsection of the page or window; cluster secondary tools and content around it in smaller panels.  Use when  The page’s primary job is to show a single unit of coherent information to the user, let him edit a document, or enable him to perform a certain task. Other content and functions are secondary to this one.  Many types of interfaces can use a Center Stage tables and spreadsheets, forms, and graphical editors all qualify. So do web pages that show single articles, images, or features.
  • 30.  What  Arrange content items in a grid or matrix. Each item should follow a common template, and each item’s visual weight should be similar. Link to jump pages as necessary.  Use when  The page contains many content items that have similar style and importance, such as news articles, blog posts, products, or subject areas.You want to present the viewer with rich opportunities to preview and select these items
  • 35.  What  Define separate sections of content by giving each one a visually strong title, separating the sections visually, and arranging them on the page  Use when  You have a lot of content to show, but you want to make the page easy to scan and understand, with everything visible.You can group the content into thematic or task-based sections that make sense to the user.
  • 39.  What  Put modules of content into a small tabbed area so that only one module is visible at a time.The user clicks on tabs to bring different modules to the top.  Use when  You have a lot of heterogeneous content to show on the page, possibly including text blocks, lists, buttons, form controls, or images.
  • 40.  Some of the page content comes in groups or modules (or can be sorted into coherent groups). Those modules have the following characteristics:  Users only need to see one module at a time.  They are of similar length and height.  There aren’t many modules—fewer than 10, and preferably a small handful.  The set of modules is fairly static; new pages won’t be added frequently, nor will existing pages be changed or removed frequently.  The modules’ contents may be related or similar to each other.
  • 44.  What  Put secondary or optional material into panels that can be opened and closed by the user.  Use when  You have a lot of heterogeneous content to show on the page, possibly including text blocks, lists, buttons, form controls, or images.You don’t have room for everything.You might, however, have Center Stage content that needs to take visual priority
  • 45.  Some of the page content comes in groups or modules (or can be sorted into coherent groups).Those modules have the following characteristics:  Their content annotates, modifies, explains, or otherwise supports the content in the main part of the page.  The modules may not be important enough for any of them to be open by default.
  • 46.  Their value may vary a lot from user to user. Some will really want to see a particular module, and others won’t care about it at all.  Even for one user, a module may be useful sometimes, but not other times.When it’s not open, its space is better used by the page’s main content.  Users may want to open more than one module at the same time.  The modules have very little to do with each other. When ModuleTabs or Accordion are used, they group modules together, implying that they are somehow related; Collapsible Panels do not group them.
  • 50.  What  Put modules of content into boxes that can be opened and closed independently of each other.Arrange the boxes freely on the page, and let the user move them around into a custom configuration.  Use when  You’re designing either a desktop application, or a website that most users sign in to.  News portals, Dashboard, and Canvas Plus Palette apps often use Movable Panels.  You want users to feel a sense of ownership of the software, or at least have fun playing with it  The page in question is a major part of the app or site—something that users see often or for long periods of time.  You have a lot of heterogeneous content to show on the page, possibly including text blocks, lists, buttons, form controls, or images. You don’t have room for everything
  • 51.  Some of the page content comes in groups or modules (or can be sorted into coherent groups). Those modules have some of the following characteristics:  Users will almost certainly want to see more than one module at a time  Their value may vary a lot from user to user. Some people want modulesA, B, and C, while others don’t need those at all and only want to see D, E, and F.  The modules vary a lot in size.
  • 52.  There are many modules—possibly so many that if all were shown at once, a viewer would be overwhelmed. Either you or the user should pick and choose among them.  You’re willing to let users hide some modules from view altogether (and offer a mechanism to bring them back).  The modules may be part of a tool palette or some other coherent system of interactive elements
  • 59.  What  Starting with a very minimal UI, guide a user through a series of steps by showing more of the UI as he completes each step  Use when ▪ The user should be walked through a complex task step by step, perhaps because the task is novel, rarely done, or outside the user’s domain knowledge. ▪ But you don’t want to force the user to go page by page at each step—you’d rather keep the whole interface on one single page ▪ Alternatively, the task may be branched, with different types of information required “downstream” depending on a user’s earlier choices.
  • 62.  What  Starting with a UI that is mostly disabled, guide a user through a series of steps by enabling more of the UI as each step is done.  Use when  The user should be walked through a complex task step by step, perhaps because the user is computer-naive or because the task is rarely done (as in aWizard).  But you don’t want to force the user to go page by page at each step—you’d like to keep the whole interface on one page.  Furthermore, you want to keep the interface stable; you’d rather not dynamically reconfigure the page at each step, as you would with Responsive Disclosure
  • 64.  What  As the user resizes the window, resize the page contents along with it so that the page is constantly “filled.”