Human—Computer


Interaction


03: Design Crash Course / Layout
Mimuw hci2021-3
I. Order vs Chaos
Mimuw hci2021-3
Mimuw hci2021-3
Structure


— De
fi
ne key elements of the composition


— Think about their hierarchy
and relationships
— One big thing (title?)


— Introduction / Lead


— Content


— Illustration / Photo


— Navigation
Hero
Navigation
Lead
Section 1
Lead, continued
Section 2
Section 3
— The contents of one element of the
structure should be closer to each other
than to other contents
DESIGN


A design is a plan or speci
fi
cation for the construction of an object or
system or for the implementation of an activity or process, or the result
of that plan or speci
fi
cation in the form of a prototype, product or
process.


The person who produces a design is called a designer, which is a term
generally used for people who work professionally in one of the various
design areas—usually specifying which area is being dealt with (such as
a fashion designer, product designer, web designer or interior designer),
but also others such as architects and engineers.
more about design
DESIGN


A design is a plan or speci
fi
cation for the construction of an object or
system or for the implementation of an activity or process, or the result
of that plan or speci
fi
cation in the form of a prototype, product or
process.


The person who produces a design is called a designer, which is a term
generally used for people who work professionally in one of the various
design areas—usually specifying which area is being dealt with (such as
a fashion designer, product designer, web designer or interior designer),
but also others such as architects and engineers.
more about design
DESIGN


A design is a plan or speci
fi
cation for the construction of an object or
system or for the implementation of an activity or process, or the result
of that plan or speci
fi
cation in the form of a prototype, product or
process.


The person who produces a design is called a designer, which is a term
generally used for people who work professionally in one of the various
design areas—usually specifying which area is being dealt with (such as
a fashion designer, product designer, web designer or interior designer),
but also others such as architects and engineers.
more about design
DESIGN


A design is a plan or speci
fi
cation for the construction of an object or
system or for the implementation of an activity or process, or the result
of that plan or speci
fi
cation in the form of a prototype, product or
process.


The person who produces a design is called a designer, which is a term
generally used for people who work professionally in one of the various
design areas—usually specifying which area is being dealt with (such as
a fashion designer, product designer, web designer or interior designer),
but also others such as architects and engineers.
more about design Navigation
Content
Title
Grid


— Watch out for banner blindness


— ATF is BS: go with the user
fl
ow


— Margins are important
Mimuw hci2021-3
Mimuw hci2021-3
Mimuw hci2021-3
Mimuw hci2021-3
Mimuw hci2021-3
Mimuw hci2021-3
Mimuw hci2021-3
Mimuw hci2021-3
Mimuw hci2021-3
Mimuw hci2021-3
II. Composition
Consistency


— Choose the basic composition paradigm:


• central (symmetry)


• left-aligned


• …
Zbiorowy
portret rodzin
II Rzeczypospolitej
ISBN 978-83-66739-13-0
opracowanie
ANNA KROCHMAL
ANNA
K
ROC
HMAL
Zbiorowy
portret
rodzin
II
Rzeczypospolitej
poniedziałek
czwartek
wtorek
piątek
środa
sobota
niedziela
2020
grudzień
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
MIKOŁAJKI,
DZIEŃ DARCZYŃCY
WIGILIA
BOŻEGO NARODZENIA
BOŻE
NARODZENIE
BOŻE
NARODZENIE
SYLWESTER
Mimuw hci2021-3
Mimuw hci2021-3
Basic rules


— Big things on top


— White space is important


— Less is more


— Contrast is good
Mimuw hci2021-3
Mimuw hci2021-3
Mimuw hci2021-3
Mimuw hci2021-3

More Related Content

PDF
Ced chapter one rgpv
PPTX
Study notes me-112-concepts-in-engineering-design-unit-1
PPTX
About Design and Designer in general. Type Of Design is iclude
PPTX
The Principles of Design
PPTX
Design principles
PPTX
Being a designer
PDF
Product Design Major.pptx.pdf and design
PPT
Interaciton desing lect05.ppt Human Computer Interaction
Ced chapter one rgpv
Study notes me-112-concepts-in-engineering-design-unit-1
About Design and Designer in general. Type Of Design is iclude
The Principles of Design
Design principles
Being a designer
Product Design Major.pptx.pdf and design
Interaciton desing lect05.ppt Human Computer Interaction

Similar to Mimuw hci2021-3 (20)

PDF
Product design roundtable
PDF
What's Next: Tidying Up Digital Homes
PDF
Intro Design System for Visual Designers
PDF
An Introduction To Information Design Coates Kathryn Ellison
PDF
An Introduction To Information Design Coates Kathryn Ellison
PDF
Design terminology
PPT
Id scratching oestreich02102015_final
PDF
Srishti Sharma,,B.Sc-ID+ 2 Year Residential & Commercial Design Diploma
PDF
Jitesh Thakur,Interior Design 2 year Diploma programme
PDF
Jitesh Thakur ,2 year commercial design Diploma ,NSQF Level 6
PDF
Jitesh Thakur,B.Sc-ID+ 2 Year Residential & Commercial Design Diploma
PPTX
120 Hours Computer Course.pptx-presentation
PDF
DESIGN: creation of artifacts in society by Karl T. Ulrich
PPTX
DESIGN.pptx
PDF
Fjord Equinox: where is design now?
PDF
The design of design final
KEY
Hellre användningskvalitet än användarvänlighet
PDF
Srishti Sharma, 2 year commercial design Diploma ,NSQF Level 6
PDF
Srishti Sharma, 2 year commercial design Diploma ,NSQF Level 6
PPT
Design Getting Your Message Across
Product design roundtable
What's Next: Tidying Up Digital Homes
Intro Design System for Visual Designers
An Introduction To Information Design Coates Kathryn Ellison
An Introduction To Information Design Coates Kathryn Ellison
Design terminology
Id scratching oestreich02102015_final
Srishti Sharma,,B.Sc-ID+ 2 Year Residential & Commercial Design Diploma
Jitesh Thakur,Interior Design 2 year Diploma programme
Jitesh Thakur ,2 year commercial design Diploma ,NSQF Level 6
Jitesh Thakur,B.Sc-ID+ 2 Year Residential & Commercial Design Diploma
120 Hours Computer Course.pptx-presentation
DESIGN: creation of artifacts in society by Karl T. Ulrich
DESIGN.pptx
Fjord Equinox: where is design now?
The design of design final
Hellre användningskvalitet än användarvänlighet
Srishti Sharma, 2 year commercial design Diploma ,NSQF Level 6
Srishti Sharma, 2 year commercial design Diploma ,NSQF Level 6
Design Getting Your Message Across
Ad

More from emilka bojańczyk (17)

PDF
Mimuw hci2021-10
PDF
Mimuw hci2021-9
PDF
Mimuw hci2021-8
PDF
Mimuw hci2021-7
PDF
Mimuw hci2021-6
PDF
Mimuw hci2021-5
PDF
Mimuw hci2021-4
PDF
Mimuw hci2021-2
PDF
Mimuw hci2021-1
PDF
MIMUW HCI2020 05
PDF
MIMUW HCI2020 05
PDF
MIMUW HCI2020 04
PDF
MIMUW HCI2020 03
PDF
MIMUW HCI2020 02
PDF
MIMUW HCI2020 01
PDF
WCAG – liczy się duch, a nie litera
PDF
Design encounters—Lost in translation
Mimuw hci2021-10
Mimuw hci2021-9
Mimuw hci2021-8
Mimuw hci2021-7
Mimuw hci2021-6
Mimuw hci2021-5
Mimuw hci2021-4
Mimuw hci2021-2
Mimuw hci2021-1
MIMUW HCI2020 05
MIMUW HCI2020 05
MIMUW HCI2020 04
MIMUW HCI2020 03
MIMUW HCI2020 02
MIMUW HCI2020 01
WCAG – liczy się duch, a nie litera
Design encounters—Lost in translation
Ad

Recently uploaded (20)

PPTX
Applied Anthropology Report.pptx paulapuhin
PPTX
UNITy8 human computer interac5ion-1.pptx
PPTX
Project_Presentation Bitcoin Price Prediction
PPTX
Drafting equipment and its care for interior design
PPT
Unit I Preparatory process of dyeing in textiles
PDF
Social Media USAGE .............................................................
PPTX
UNIT II - UID FOR MOBILE GAMES[INTRODUCTION TO MOBILE GAME DESIGN]
PPT
416170345656655446879265596558865588.ppt
PDF
Humans do not die they live happily without
PPTX
lecture-8-entropy-and-the-second-law-of-thermodynamics.pptx
PDF
1 Introduction to Networking (06).pdfbsbsbsb
PPT
Wheezing1.ppt powerpoint presentation for
PPTX
a group casestudy on architectural aesthetic and beauty
PDF
321 LIBRARY DESIGN.pdf43354445t6556t5656
PPTX
Necrosgwjskdnbsjdmdndmkdndndnmdndndkdmdndkdkndmdmis.pptx
PDF
IARG - ICTC ANALOG RESEARCH GROUP - GROUP 1 - CHAPTER 2.pdf
PPTX
Drawing as Communication for interior design
PPTX
Bitcoin predictor project presentation
PPT
EthicsNotesSTUDENTCOPYfghhnmncssssx sjsjsj
PDF
2025CategoryRanking of technology university
Applied Anthropology Report.pptx paulapuhin
UNITy8 human computer interac5ion-1.pptx
Project_Presentation Bitcoin Price Prediction
Drafting equipment and its care for interior design
Unit I Preparatory process of dyeing in textiles
Social Media USAGE .............................................................
UNIT II - UID FOR MOBILE GAMES[INTRODUCTION TO MOBILE GAME DESIGN]
416170345656655446879265596558865588.ppt
Humans do not die they live happily without
lecture-8-entropy-and-the-second-law-of-thermodynamics.pptx
1 Introduction to Networking (06).pdfbsbsbsb
Wheezing1.ppt powerpoint presentation for
a group casestudy on architectural aesthetic and beauty
321 LIBRARY DESIGN.pdf43354445t6556t5656
Necrosgwjskdnbsjdmdndmkdndndnmdndndkdmdndkdkndmdmis.pptx
IARG - ICTC ANALOG RESEARCH GROUP - GROUP 1 - CHAPTER 2.pdf
Drawing as Communication for interior design
Bitcoin predictor project presentation
EthicsNotesSTUDENTCOPYfghhnmncssssx sjsjsj
2025CategoryRanking of technology university

Mimuw hci2021-3

  • 3. I. Order vs Chaos
  • 6. Structure — De fi ne key elements of the composition — Think about their hierarchy and relationships
  • 7. — One big thing (title?) — Introduction / Lead — Content — Illustration / Photo — Navigation
  • 9. — The contents of one element of the structure should be closer to each other than to other contents
  • 10. DESIGN A design is a plan or speci fi cation for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or speci fi cation in the form of a prototype, product or process. The person who produces a design is called a designer, which is a term generally used for people who work professionally in one of the various design areas—usually specifying which area is being dealt with (such as a fashion designer, product designer, web designer or interior designer), but also others such as architects and engineers. more about design
  • 11. DESIGN A design is a plan or speci fi cation for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or speci fi cation in the form of a prototype, product or process. The person who produces a design is called a designer, which is a term generally used for people who work professionally in one of the various design areas—usually specifying which area is being dealt with (such as a fashion designer, product designer, web designer or interior designer), but also others such as architects and engineers. more about design
  • 12. DESIGN A design is a plan or speci fi cation for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or speci fi cation in the form of a prototype, product or process. The person who produces a design is called a designer, which is a term generally used for people who work professionally in one of the various design areas—usually specifying which area is being dealt with (such as a fashion designer, product designer, web designer or interior designer), but also others such as architects and engineers. more about design
  • 13. DESIGN A design is a plan or speci fi cation for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or speci fi cation in the form of a prototype, product or process. The person who produces a design is called a designer, which is a term generally used for people who work professionally in one of the various design areas—usually specifying which area is being dealt with (such as a fashion designer, product designer, web designer or interior designer), but also others such as architects and engineers. more about design Navigation Content Title
  • 14. Grid — Watch out for banner blindness — ATF is BS: go with the user fl ow — Margins are important
  • 26. Consistency — Choose the basic composition paradigm: • central (symmetry) • left-aligned • …
  • 27. Zbiorowy portret rodzin II Rzeczypospolitej ISBN 978-83-66739-13-0 opracowanie ANNA KROCHMAL ANNA K ROC HMAL Zbiorowy portret rodzin II Rzeczypospolitej poniedziałek czwartek wtorek piątek środa sobota niedziela 2020 grudzień 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 MIKOŁAJKI, DZIEŃ DARCZYŃCY WIGILIA BOŻEGO NARODZENIA BOŻE NARODZENIE BOŻE NARODZENIE SYLWESTER
  • 30. Basic rules — Big things on top — White space is important — Less is more — Contrast is good