C.R.A.P.   Color balance : The colors of the entire illustration- grey, black, white and the contrast orange, seem like they were chosen without much.

Slides:



Advertisements
Similar presentations
Typography Typography exists to honor content. — Robert Bringhurst,
Advertisements

Design Principles By Wesley Rolston. Five Design Principles Proximity alignment Repetition Balance Contrast.
2006 Adobe Systems Incorporated. All Rights Reserved. 1 INTRODUCTION TO TYPOGRAPHY DESIGN.
contrast, repetition, alignment, proximity
Graphic Design Principles
Principles of design caroline burdett. repetition balance proximity simplicity contrast.
Difference between content, layout and styles Miss Allgar
Evaluating the gestalt.  “Gestalt” means the unified whole.  We’ve approached design by using Gestalt research, planning our work by understanding how.
Lesson 1:.  This lesson will cover the four primary principles of design: ● Contrast ● Repetition ● Alignment ● Proximity.
Design Principles 3.02 Understand business publications.
Introduction to Design Principles The Wonderful World of Page Design Contrast / Repetition / Alignment / Proximity / Color Theory ENGL 106 Fall 2012.
® Copyright 2008 Adobe Systems Incorporated. All rights reserved. ® ® 1 INTRODUCTION TO TYPOGRAPHY DESIGN Vocabulary and Guidelines.
Process of __________, arranging, & ______________ visual elements of art to accomplish or address a particular purpose  Elements of Visual Design 
Design Principles 3.02 Understand business publications Slide 1.
 Effective advertising is NOT an accident!  Effective advertising MUST be well designed!
WEB DESIGN TIPS FOR DESIGNING A WEB PAGE. PURPOSE OF WEBSITE To inform To persuade To market/sell To entertain To advocate KNOW YOUR PURPOSE!
N airn A cademy. Desk Top Publishing The DTP example shown to the right is taken from the 2002 Higher Graphic Communication Paper, Question 6 and will.
BASIC PRINCIPLES OF DESIGN DESIGN, MULTIMEDIA, AND WEB TECHNOLOGIES (DMWT)
Creating Good Presentations. Planning a Presentation (Remember all the things you learned in speech class) PowerPoint as a Visual Aid (Remember all the.
Design Principles Rachelle Leung HBU EDUC 6307 September 12, 2011.
the rhetorical situation  audience  purpose  context design principles  arrangement  emphasis  contrast  repetition  alignment  proximity (some)
Design Principles The good and the bad Alyssa Mendiola Summer 2009.
Creating visually attractive and appealing publications.
Credits The design principle of alignment is when Items are arranged in order relative to each other. Alignment provides cohesion to the product so.
Non-designer’s design principles Dr. Shuyan Wang.
Fonts and Typography Section 7.3. Typography Typography: the style, arrangement, and appearance of text Well designed text makes your page more readable.
MARKETING 40S Four Basic Principles C.R.A.P. (Contrast, Repetition, Alignment, Proximity)
Basic Design Tips for Web Pages. Alignment Left, right, center Choose one alignment and use it on the entire page Align form elements, table elements,
3.02 Understand business publications
Design Principles 3.02 Design Principles revised 9/24/09.
Elements of Design Presentation designed by Dr. James Lenze Model: Williams R. (2004), The Non-Designer’s Design Book, Second Edition, Peachpit Press What.
Don’t have to be a designer to know when something just ain’t right…
Designing Reader- Focused Documents C H A P T E R 10.
Design Principles 3.02 Understand business publications.
Creating Basic Elements of a Newsletter Chapter 10.
Design Principles EDUC 6307: Design of Print Based Media Summer 2009 Ranelle Woolrich.
VISUAL RHETORIC All the C.R.A.P. you need to know… The Purdue Writing Lab.
Posters, Magazines, Websites
With a focus on screen design and CRAP. The Joshua Tree Epiphany.
2 VISUAL JOURNAL Hannah Hanif Ng Jas Min Prethiba Esvary Subramanian 0801G65256 Sim Pei Xuan
Design Principles 3.02 Understand business publications Slide 1.
Design Principles 5.01 Understand business publications Slide 1.
Design Principles 5.01 Understand business publications Slide 1.
Design Principles 3.02 Understand business publications.
Although this is an older issue of the magazine (2008) it looks very dated. The type for the page banner is definitely more hard core rock than designer.
Desktop Publishing Business Cards Your LogoYour own footer.
1 Desktop Publishing 2 White Space as a design tool n surrounding pages n between columns n within and around headlines n between lines and paragraphs.
CRAP The Wonderful World of Page Design
Graphic Communication
1.01 Understand typography, multiuse design principles and elements.
Chapter 9 Layout and Design
Document Design is CRAP
Principles of DESIGN.
Design Principles 3.02 Understand business publications
Advanced Design PRINCIPLES 2.01 Investigate typefaces and fonts.
Design Principles Rvsd. Feb 2016
3.02 Understand business publications
Principles of DESIGN.
Additional Information
Principles of DESIGN.
CRAP The Wonderful World of Page Design
Design Principles 3.02 Understand business publications
Introducing: CRAP TECH MENTORING
1.01 Understand typography, multiuse design principles and elements.
“The point of design is to encourage and facilitate communication between the viewer and the media being viewed. Effective design initiates this connection.
Kelly Cheng Mohamed Khaidir Natalia Singa Tan Der Ching
Accessibility Guide.
1.01 Understand typography, multiuse design principles and elements.
2.00 Understand Publications
Design Principles 3.02 Understand business publications
Presentation transcript:

C.R.A.P

  Color balance : The colors of the entire illustration- grey, black, white and the contrast orange, seem like they were chosen without much thought. Go back to the basics, we went with black, blue and white to color drawings, when asked to add in a different one, it was most usually red or orange, this artwork reminds us of that.  Text : The blurry text makes it hard to decipher if all the letters used are from the same font family.  Contrast: The contrast between grey and blue in the header is not very obvious. the illustration is also consistent with its text body being flushed to the left. CONTRAST Picture 1

  Color balance : There is a consistency present with the color of font used in the headline and body text, which suggests a direct link between the two. The font present is consistent, so if the left flush.  Layout : The little flowers on the plain white background create a splash on its plain background. the pictures as many as they be, are placed in an orderly fashion.  Text : The text placement varies from side to side to denote the differences in content. The dark picture in the middle makes the faces on either side to stand out. CONTRAST Picture 2

  Typography design & font : Just the right number of font types in this composition. However there is an inconsistency in typography; walls of uppercase and lowercase text are unevenly distributed.  Layout design: Appropriate amount of white space used on the layout which balances out the other elements in this design such as the text and graphics. The header tends to be heavily detailed (with arrows and graphics) while the footer has less elements, providing more white space to balance out the header.  Layout alignment: Paragraphs are inconsistent, having alternate alignments – left or centered.  Color balance: There is not much repetition in color. Only consistent color repetition is the red text seen at the beginning of the paragraphs with lower case text which is utilized to highlight a point. Most text is in black; the lack of different repetition in the text color scheme makes the layout design rather dull. REPETITION Picture 1

  Typography design & font: Consistent font for titles and content text. The font is repeated throughout the entire layout. Instead of changing the font, color is used to highlight different points and parts of paragraphs (indicating whether it is a title, content text or important point). A very crisp and clean font was chosen to make the layout professional and legible.  Layout design: A great balance between the layout design elements and the amount of white space. Consistent gaps between paragraphs and image, giving more focus to each individual element.  Layout alignment: The images and text are consistently aligned to the left in multiple columns. All paragraphs can be improved through justification to give a neater layout.  Color balance: The colors chosen are for purpose and for design. Titles and sub-titles are in bright blue while the content is mostly in dark blue with significant keywords highlighted in light blue, these colors are allocated to these different text to differentiate them. While bright colors are chosen for design purposes to make the page looks attractive. REPETITION Picture 2

  Layout Alignment : A little unorganized, the page layout looks disordered which makes the image looks haphazard.  Typography Design & Font : They are aligned all unevenly. Some of them are left aligned and center aligned which will confuse the reader as the attention should be given to the Information Architecture (IA). Inconsistent justification, Some of the text is fully justified and some of it is left justified.  The grid system : Not applied in this image as we can see the title of the web and the sub text are not aligned and the page doesn’t flow well.  Visual connection : A little weak in the positioning of elements on the layout. Diverting the viewers focus all over the place. ALIGNMENT Picture 1

  Typography Design & Font : The text is justified consistently and the font size is the same. All paragraphs are flushed to the left. On the left page, all paragraphs follow a unique curved alignment to give the text some style.  Layout Alignment : Each section has its own “hard edge” ( the paragraphs form an invisible line with each other). The images are placed in one particular section which will draw the reader’s attention to that particular section of the page which is less confusing.  The grid system : It is applied on the layout as we can see the elements of the page are well categorized. The page looks well structured and it flows well.  Visual connection : Solid connection between the elements on the page. Readers have the tendency to focus their eyes on particular information. ALIGNMENT Picture 2

  Typography Design & Font : The proximity is a little weak as the elements are not well categorized, so the viewers are overwhelmed with the information, which is not effective.  Color Balance : The first word of the paragraph, which is in orange color doesn’t seem to make sense on the paragraph. It will confuse the readers and it doesn’t generally explain any details.  Layout Design : Not effective in disseminating important messages since the design does not aid the viewers by arranging the contents into groups which would create some kind of connection between the elements. The layout design also is a little messy; the readers will find it difficult to know the flow/sequence of the text, especially the two paragraphs at the bottom. PROXIMITY Picture 1

  Layout Alignment : Excellent proximity in between elements giving enough white space or “room for the eyes to rest”  Typography Design & Font : The text is fully incorporated with the objects and the images of the design. Each of the subheadings use the same colors as the head lines which aims to help readers in identifying the different relationship. Another obvious way of grouping two different parts is by using the image as a physical barrier.  Layout Design : The proximity in this design is effective since grouping the elements helps the viewers to understand the information-packed layout. PROMIXITY Picture 2

 Summary of Critiques Typography, Layout Design, Color Balance, Layout Alignment & etc.

Typography Design & Font: Inconsistency in casing Blurry text, difficult to decipher Sufficient number of font types Inconsistent alignment Weak proximity, not well categorized Typography Design & Font: Inconsistency in casing Blurry text, difficult to decipher Sufficient number of font types Inconsistent alignment Weak proximity, not well categorized Color Balance: Weak/unharmonious combination of colors chosen Lack repetition in color Occasional orange text at beginning of paragraph - confusing Color Balance: Weak/unharmonious combination of colors chosen Lack repetition in color Occasional orange text at beginning of paragraph - confusing Color contrast on header does not stand out Layout Design: Not cluttered Header very detailed, footer not so, creates balance Weak positioning of elements Messy flow of text sequence Poor positioning of elements Layout Design: Not cluttered Header very detailed, footer not so, creates balance Weak positioning of elements Messy flow of text sequence Poor positioning of elements Appropriate amount of white space Layout Alignment: Grid system not applied Inconsistent paragraph alignments Entire layout properly centered Layout Alignment: Grid system not applied Inconsistent paragraph alignments Entire layout properly centered

Typography Design & Font: Consistent font for titles and content text. Text placement varies denotes content difference Consistent usage of color and font design for subheading Text complements images Typography Design & Font: Consistent font for titles and content text. Text placement varies denotes content difference Consistent usage of color and font design for subheading Text complements images Color Balance: Strong consistency in usage of color especially in text Colors chosen are for purpose and for design Good color palette choice Color Balance: Strong consistency in usage of color especially in text Colors chosen are for purpose and for design Good color palette choice Layout Design: Flower spirals in background add splash of color Excellent balance of layout elements and white space Good proximity in element grouping Layout Design: Flower spirals in background add splash of color Excellent balance of layout elements and white space Good proximity in element grouping Solid visual connection – great for focus Layout Alignment: Images and text are consistently aligned Justification could improve neater look “Hard edge” present in between paragraphs Images cleverly placed to draw focus Layout Alignment: Images and text are consistently aligned Justification could improve neater look “Hard edge” present in between paragraphs Images cleverly placed to draw focus