SlideShare a Scribd company logo
LAYOUTING
by John Robin Abejar
fundamentals and
tips
Page layout refers to the
process of placing and
arranging text, images,
and graphics on a
software page to produce
documents such as
newsletters, brochures,
propagandas and public
materials.
LAYOUTING
PAGE DESIGN & PUBLIC MATERIALS
LAYOUT ARTIST
The goal is to produce eye-catching pages
that grab the attention of the reader.
Collects and assembles type styles and
images, such as illustrations, photographs
and drawings, to create a visual design in a
computer or on paper
Deliver ideas and information through visual
communications
FUNDAMENTALS OF
PAGE DESIGN
To design and to
produce.
PURPOSE
To cater and serve to
the needs and interests
of the people.
To widely disseminate
information.
COMMUNICATION
Readers tend to want information quickly, so it is
important to communicate clearly, and make your
information easy to read and digest. Some effective
tactics to include in your web design include:
organizing information using headlines and sub
headlines, and cutting the waffle.
TYPEFACES
Serif
easier to read
contemporary looking
fonts without decorative
finishes.
Sans Serif
Can be used to specify or
standout the text or word.
Script
For showing affection,
passion, love and
dedication.
A A A
COLORS
A well thought out color palette can go a
long way to enhance the user experience.
Complementary colors create balance and
harmony. Using contrasting colors for the
text and background will make reading
easier on the eye. Vibrant colors create
emotion and should be used sparingly
(e.g. for buttons and call to actions). Last
but not least, white space/ negative
space is very effective at giving your
website a modern and uncluttered look.
IMAGES
A picture can speak a thousand words,
and choosing the right images can help
for easier story telling by positioning
and connecting with your target
audience.
NAVIGATION
Navigation is about how easy it is for people to
take action and move around your publication.
Some tactics for effective navigation include a
logical page hierarchy.
PRINCIPLES OF PAGE DESIGN
UNITY
Unity discusses the need to tie the various
elements of a work of art together. Unity is a
measure of how the elements of a page seem
to fit together - to belong together. A unified
work of art represents first a whole, then the
sum of its parts.
SIMILARITY PROXIMITY
CONTINUITITY ALIGNMENT
SCALE
AND
HIERARCHY
Scale is often used to help
communicate hierarchy by drawing
attention toward and away from
certain elements, thus signifying their
importance to the communication.
BALANCE
Balance is a pretty important thing in many regards, and
your designs are absolutely no exception.
SYMMETRY ASYMMETRY
WHITE SPACE
White space when used strategically can help
boost your design’s clarity and overall look by
balancing out the more complicated and busy
parts of your composition with space that helps
your design to breathe.
CONTRAST
Contrast is an incredibly useful tool for both
highlighting and hiding certain elements of
your design. By upping the contrast or using
a high contrast feature color, you can help
an element stand out and draw attention.
Likewise, by lowering the contrast, you can
make an element fade into the background.
Repetition is a key factor when it comes to multi-
page layouts. Repeating elements of your layout
and/or design helps each page flow into the next,
creating a cohesive set of pages.
REPETITION
REPETITION
REPETITION
BASICS
THINGS TO AVOID
BUMPER OR
TOMBSTONING
Two elements placed side by side.
SEPARATION
Separating related elements to each other.
BAD BREAKS
Most wrong practice in headlining.
BOX TO BOX
Inserting box to another box.
SCREAMING
HEADLINES
Using too big font size to emphasis important
stories.
USING MANY
FAMILIES OF
FONT
USING SAME FONT
SIZE IN HEADLINES
MARAMING SALAMAT!
Lagi’t lagi nating pakatandaan na malaki ang gampanin ng taga anyo ng
pahina sa paglalathala ng mga istorya dahil na sa ating mga kamay ang
daloy ng kwento.
MANGALAP
MAG-ANYO
MAGMULAT
MAKIBAKA

More Related Content

Similar to Layouting.pptx

WEB DESIGNING.pptx
WEB DESIGNING.pptxWEB DESIGNING.pptx
WEB DESIGNING.pptx
MEDICALCOUNSELING
 
Design Crash Course: Mastering Design Essentials – Unveiling Best Practices a...
Design Crash Course: Mastering Design Essentials – Unveiling Best Practices a...Design Crash Course: Mastering Design Essentials – Unveiling Best Practices a...
Design Crash Course: Mastering Design Essentials – Unveiling Best Practices a...
Habeebullahi Ayegbami
 
best Graphic Design presentation created by me
best Graphic Design presentation created by mebest Graphic Design presentation created by me
best Graphic Design presentation created by me
shivamds1205
 
ET_lESSON_6.pptx
ET_lESSON_6.pptxET_lESSON_6.pptx
ET_lESSON_6.pptx
Rhoan4
 
Introduction to Graphic Design.pdf
Introduction to Graphic Design.pdfIntroduction to Graphic Design.pdf
Introduction to Graphic Design.pdf
DigzignDigzign
 
Basic Elements & Principals for Create Best Graphic Design Services
Basic Elements & Principals for Create Best Graphic Design ServicesBasic Elements & Principals for Create Best Graphic Design Services
Basic Elements & Principals for Create Best Graphic Design Services
Helpful Insight
 
Kolade Agboola- Basic Visual Design Principles - FS Presentation.pptx
Kolade Agboola- Basic Visual Design Principles - FS Presentation.pptxKolade Agboola- Basic Visual Design Principles - FS Presentation.pptx
Kolade Agboola- Basic Visual Design Principles - FS Presentation.pptx
Future Software Resources
 
PRINCIPLES-ELEMENTS-OF-GOOD-WEBSITE-DESIGN-USING.pptx
PRINCIPLES-ELEMENTS-OF-GOOD-WEBSITE-DESIGN-USING.pptxPRINCIPLES-ELEMENTS-OF-GOOD-WEBSITE-DESIGN-USING.pptx
PRINCIPLES-ELEMENTS-OF-GOOD-WEBSITE-DESIGN-USING.pptx
APRILROSEVICENTE1
 
Communication design
Communication designCommunication design
Communication design
SchommerMedia
 
LAYOUT_Graphic--Design-Presentation.pptx
LAYOUT_Graphic--Design-Presentation.pptxLAYOUT_Graphic--Design-Presentation.pptx
LAYOUT_Graphic--Design-Presentation.pptx
MayMarasigan2
 
Graphic Design Essentials by Rahul KULKARNI.
Graphic Design Essentials by Rahul KULKARNI.Graphic Design Essentials by Rahul KULKARNI.
Graphic Design Essentials by Rahul KULKARNI.
Rahul KULKARNI
 
25 epic graphic design tips for non-designers
25 epic graphic design tips for non-designers25 epic graphic design tips for non-designers
25 epic graphic design tips for non-designers
Ram Chary Everi
 
Presentation Board Layout
Presentation Board Layout Presentation Board Layout
Presentation Board Layout
NYCCTfab
 
Web Design Trends in Australia - PPT
Web Design Trends in Australia - PPTWeb Design Trends in Australia - PPT
Web Design Trends in Australia - PPT
Sxope Consolidate
 
120 Hours Computer Course.pptx-presentation
120 Hours Computer Course.pptx-presentation120 Hours Computer Course.pptx-presentation
120 Hours Computer Course.pptx-presentation
asmeerana605
 
LESSON 5 Imaging and Design Impact of Good Branding.pptx
LESSON 5  Imaging and Design Impact of Good Branding.pptxLESSON 5  Imaging and Design Impact of Good Branding.pptx
LESSON 5 Imaging and Design Impact of Good Branding.pptx
JomarieCanoy
 
Graphic Design Workshop, 2018
Graphic Design Workshop, 2018Graphic Design Workshop, 2018
Graphic Design Workshop, 2018
Clearly Blue Digital Pvt. Ltd.
 
Principles and elements of design
Principles and elements of designPrinciples and elements of design
Principles and elements of design
smizener
 
Freelancing with graphic design
Freelancing with graphic designFreelancing with graphic design
Freelancing with graphic design
Sylhet IT Academy
 

Similar to Layouting.pptx (20)

Graphic design for
Graphic design forGraphic design for
Graphic design for
 
WEB DESIGNING.pptx
WEB DESIGNING.pptxWEB DESIGNING.pptx
WEB DESIGNING.pptx
 
Design Crash Course: Mastering Design Essentials – Unveiling Best Practices a...
Design Crash Course: Mastering Design Essentials – Unveiling Best Practices a...Design Crash Course: Mastering Design Essentials – Unveiling Best Practices a...
Design Crash Course: Mastering Design Essentials – Unveiling Best Practices a...
 
best Graphic Design presentation created by me
best Graphic Design presentation created by mebest Graphic Design presentation created by me
best Graphic Design presentation created by me
 
ET_lESSON_6.pptx
ET_lESSON_6.pptxET_lESSON_6.pptx
ET_lESSON_6.pptx
 
Introduction to Graphic Design.pdf
Introduction to Graphic Design.pdfIntroduction to Graphic Design.pdf
Introduction to Graphic Design.pdf
 
Basic Elements & Principals for Create Best Graphic Design Services
Basic Elements & Principals for Create Best Graphic Design ServicesBasic Elements & Principals for Create Best Graphic Design Services
Basic Elements & Principals for Create Best Graphic Design Services
 
Kolade Agboola- Basic Visual Design Principles - FS Presentation.pptx
Kolade Agboola- Basic Visual Design Principles - FS Presentation.pptxKolade Agboola- Basic Visual Design Principles - FS Presentation.pptx
Kolade Agboola- Basic Visual Design Principles - FS Presentation.pptx
 
PRINCIPLES-ELEMENTS-OF-GOOD-WEBSITE-DESIGN-USING.pptx
PRINCIPLES-ELEMENTS-OF-GOOD-WEBSITE-DESIGN-USING.pptxPRINCIPLES-ELEMENTS-OF-GOOD-WEBSITE-DESIGN-USING.pptx
PRINCIPLES-ELEMENTS-OF-GOOD-WEBSITE-DESIGN-USING.pptx
 
Communication design
Communication designCommunication design
Communication design
 
LAYOUT_Graphic--Design-Presentation.pptx
LAYOUT_Graphic--Design-Presentation.pptxLAYOUT_Graphic--Design-Presentation.pptx
LAYOUT_Graphic--Design-Presentation.pptx
 
Graphic Design Essentials by Rahul KULKARNI.
Graphic Design Essentials by Rahul KULKARNI.Graphic Design Essentials by Rahul KULKARNI.
Graphic Design Essentials by Rahul KULKARNI.
 
25 epic graphic design tips for non-designers
25 epic graphic design tips for non-designers25 epic graphic design tips for non-designers
25 epic graphic design tips for non-designers
 
Presentation Board Layout
Presentation Board Layout Presentation Board Layout
Presentation Board Layout
 
Web Design Trends in Australia - PPT
Web Design Trends in Australia - PPTWeb Design Trends in Australia - PPT
Web Design Trends in Australia - PPT
 
120 Hours Computer Course.pptx-presentation
120 Hours Computer Course.pptx-presentation120 Hours Computer Course.pptx-presentation
120 Hours Computer Course.pptx-presentation
 
LESSON 5 Imaging and Design Impact of Good Branding.pptx
LESSON 5  Imaging and Design Impact of Good Branding.pptxLESSON 5  Imaging and Design Impact of Good Branding.pptx
LESSON 5 Imaging and Design Impact of Good Branding.pptx
 
Graphic Design Workshop, 2018
Graphic Design Workshop, 2018Graphic Design Workshop, 2018
Graphic Design Workshop, 2018
 
Principles and elements of design
Principles and elements of designPrinciples and elements of design
Principles and elements of design
 
Freelancing with graphic design
Freelancing with graphic designFreelancing with graphic design
Freelancing with graphic design
 

Recently uploaded

ZAPATILLAS 2 X 110 ABRIL.pdf compra economico
ZAPATILLAS 2 X 110 ABRIL.pdf compra economicoZAPATILLAS 2 X 110 ABRIL.pdf compra economico
ZAPATILLAS 2 X 110 ABRIL.pdf compra economico
jhonguerrerobarturen
 
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
smpc3nvg
 
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
smpc3nvg
 
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With DesignsGame Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
184804
 
RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
cy0krjxt
 
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Mansi Shah
 
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
7sd8fier
 
一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理
peuce
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
contactproperweb2014
 
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
n0tivyq
 
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
asuzyq
 
Connect Conference 2022: Passive House - Economic and Environmental Solution...
Connect Conference 2022: Passive House -  Economic and Environmental Solution...Connect Conference 2022: Passive House -  Economic and Environmental Solution...
Connect Conference 2022: Passive House - Economic and Environmental Solution...
TE Studio
 
Virtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburghVirtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburgh
millarj46
 
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
7sd8fier
 
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
gpffo76j
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
Carolina de Bartolo
 
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptxUNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
GOWSIKRAJA PALANISAMY
 
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
taqyed
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
jyz59f4j
 
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
9a93xvy
 

Recently uploaded (20)

ZAPATILLAS 2 X 110 ABRIL.pdf compra economico
ZAPATILLAS 2 X 110 ABRIL.pdf compra economicoZAPATILLAS 2 X 110 ABRIL.pdf compra economico
ZAPATILLAS 2 X 110 ABRIL.pdf compra economico
 
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
 
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
 
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With DesignsGame Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
 
RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
 
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
 
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
 
一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
 
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
 
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
 
Connect Conference 2022: Passive House - Economic and Environmental Solution...
Connect Conference 2022: Passive House -  Economic and Environmental Solution...Connect Conference 2022: Passive House -  Economic and Environmental Solution...
Connect Conference 2022: Passive House - Economic and Environmental Solution...
 
Virtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburghVirtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburgh
 
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
 
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
 
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptxUNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
 
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
 
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
 

Layouting.pptx

  • 1. LAYOUTING by John Robin Abejar fundamentals and tips
  • 2. Page layout refers to the process of placing and arranging text, images, and graphics on a software page to produce documents such as newsletters, brochures, propagandas and public materials. LAYOUTING PAGE DESIGN & PUBLIC MATERIALS
  • 3. LAYOUT ARTIST The goal is to produce eye-catching pages that grab the attention of the reader. Collects and assembles type styles and images, such as illustrations, photographs and drawings, to create a visual design in a computer or on paper Deliver ideas and information through visual communications
  • 5. To design and to produce. PURPOSE To cater and serve to the needs and interests of the people. To widely disseminate information.
  • 6. COMMUNICATION Readers tend to want information quickly, so it is important to communicate clearly, and make your information easy to read and digest. Some effective tactics to include in your web design include: organizing information using headlines and sub headlines, and cutting the waffle.
  • 7. TYPEFACES Serif easier to read contemporary looking fonts without decorative finishes. Sans Serif Can be used to specify or standout the text or word. Script For showing affection, passion, love and dedication. A A A
  • 8. COLORS A well thought out color palette can go a long way to enhance the user experience. Complementary colors create balance and harmony. Using contrasting colors for the text and background will make reading easier on the eye. Vibrant colors create emotion and should be used sparingly (e.g. for buttons and call to actions). Last but not least, white space/ negative space is very effective at giving your website a modern and uncluttered look.
  • 9. IMAGES A picture can speak a thousand words, and choosing the right images can help for easier story telling by positioning and connecting with your target audience.
  • 10. NAVIGATION Navigation is about how easy it is for people to take action and move around your publication. Some tactics for effective navigation include a logical page hierarchy.
  • 12. UNITY Unity discusses the need to tie the various elements of a work of art together. Unity is a measure of how the elements of a page seem to fit together - to belong together. A unified work of art represents first a whole, then the sum of its parts. SIMILARITY PROXIMITY CONTINUITITY ALIGNMENT
  • 13. SCALE AND HIERARCHY Scale is often used to help communicate hierarchy by drawing attention toward and away from certain elements, thus signifying their importance to the communication.
  • 14. BALANCE Balance is a pretty important thing in many regards, and your designs are absolutely no exception. SYMMETRY ASYMMETRY
  • 15. WHITE SPACE White space when used strategically can help boost your design’s clarity and overall look by balancing out the more complicated and busy parts of your composition with space that helps your design to breathe.
  • 16. CONTRAST Contrast is an incredibly useful tool for both highlighting and hiding certain elements of your design. By upping the contrast or using a high contrast feature color, you can help an element stand out and draw attention. Likewise, by lowering the contrast, you can make an element fade into the background.
  • 17. Repetition is a key factor when it comes to multi- page layouts. Repeating elements of your layout and/or design helps each page flow into the next, creating a cohesive set of pages. REPETITION REPETITION REPETITION
  • 19.
  • 21. BUMPER OR TOMBSTONING Two elements placed side by side.
  • 23. BAD BREAKS Most wrong practice in headlining.
  • 24. BOX TO BOX Inserting box to another box.
  • 25. SCREAMING HEADLINES Using too big font size to emphasis important stories.
  • 27. USING SAME FONT SIZE IN HEADLINES
  • 28. MARAMING SALAMAT! Lagi’t lagi nating pakatandaan na malaki ang gampanin ng taga anyo ng pahina sa paglalathala ng mga istorya dahil na sa ating mga kamay ang daloy ng kwento.