webdev-il.blogspot.com Open in urlscan Pro
142.250.186.65  Public Scan

Form analysis
0 forms found in the DOM

Text Content

Jul
6



EXAMPLES OF BAD MAGAZINE LAYOUT

I've collated some of the main design mistakes that occur in magazine and page
layout. You may be thinking "why is this on a web design & development blog?"
Well a lot of the design mistakes apply equally to web design, especially
considering the trend to use more magazine style layout and typography based
websites.
You can learn a lot from what doesn't work and apply it to your own designs.

In this article I'll look at the following problems with examples:


 * Alignment of elements
 * Text touching edges
 * white text on white / Black on black
 * Columns - too wide / too thin
 * Font styles - too many
 * Colour clash
 * Unbalanced layout - images/text/whitespace
 * Difficult to read
 * Images - don't look natural


Examples of bad magazine layout:

Alignment of elements
Aligning elements (images, text boxes, text, headings, etc.) is a basic skill.
 The placement and size of these elements should follow some logical idea for
example:  edges line up, gutters and margins of equal size. The use of grid
systems helps in the design process (links to grid systems at the bottom of this
post).

This magazine example has a great right hand page and a nightmare on the left.
 The top images don't conform to the text column width or the overall page
margin and even the gutter between the images is a different size compared to
those below the image.  The group of images in the bottom corner have no spacing
around them and to top it off a thin image is wedged into the bottom page
margin.



Here is an art book where the top right corner doesn't have the same margins as
the top left.



And another magazine layout with non-aligned elements. Also take a look at that
top centre  image - why should that one pop out to the page edge?




Text touching edges
Text should be easy to read - but when it touches the edge of a text box or
image it becomes really difficult.  The example above does have the text
touching the edge of the red header but that is probably a design decision.  The
one below is just bad placement.  The black stroke on the red letters and
overall alignment doesn't help either (alignment of header, author and inset
image).



Columns - too wide / too thin
Columns of text too wide are more difficult to read.  We associate these with
serious letters or books and the implication is that we have to settle down with
a wide column and give it all our attention. The example above also has too wide
columns.
On the other hand too thin columns become difficult to read, require weird
hyphenation or start making ragged right hand edges (if left aligned) or rivers
of whitespace (if they are justified).



White text on white / Black on black
Using images as backgrounds with text on top increases the likelihood for the
text to become unreadable -  especially over high contrast images.
This magazine cover shows how white text on white just doesn't show up.



Font styles - too many
There is a limit to the number of font sizes and styles you can use before it
starts to look messy.  On a single page a hierarchy of 3 levels is usually
considered to be enough.
This magazine has different styles for headings, subheadings, quotes, tagline,
tables, headers, footers and a side bar - and that's before the chart has been
chucked in!



(also notice that the alignment of the little graphic in the table is weird)

Colour clash
The above example shows how a good colour scheme (in this case cyan, black, &
white) can be ruined by a clash of colour. That chart is just one rainbow
abomination - along with its ugly black text.

Here is another example of a magazine cover that shows how the pink colour
scheme (taken from the lips of the photo) is thrown into sharp relief by an
opposing colour (that green text) and also how a high contrast background (black
hair, white backdrop) makes over-lying text really hard to read.



Unbalanced layout - images/text/whitespace
Whitespace is great and is a useful design element (and it doesn't have to be
white!) however balance is usually needed in design.
This example shows how the layout is unbalanced with a dominant right side (and
also huge caption text compared to the body text)



This other magazine spread is almost there, however the margins on the text
don't match the structural lines in the photo.  If the edge of the glass was
offset from the centre line the same distance as either of the margins then this
would be beautifully balanced.




Difficult to read
Readability of text is vitally important.  Check out this example that at first
glance looks okay, until you try to figure out where the first word of the first
paragraph actually is!




Images - don't look natural
And lastly my favourite problems.  Things that you can do with photoshop can
lead to some really un-natural images.
Check out the weird head:



..the missing leg



and the missing thigh!




If you're interested in magazine-style web layout then check out the following
post about web design styles.

And also using grid systems for web design.

Posted 6th July 2011 by tobyonline
Labels: digital publishing interface design typography web design web graphics

6


VIEW COMMENTS




WEBDEV-IL


WEB DEVELOPMENT HINTS, TIPS AND TRICKS ABOUT WEBSITE DESIGN,WEB PROGRAMMING AND
MULTIMEDIA.

Sidebar
 * Classic
 * Flipcard
 * Magazine
 * Mosaic
 * Sidebar
 * Snapshot
 * Timeslide




FREE DIGITISED INFORMATION SIGNATURES

104


BOOTSTRAP MODAL SHOW ONLY ONCE PER VISIT

12


GET GOOGLE STYLE WEBSITE ANALYTICS BUT WITH 100% PRIVACY

8


JAVASCRIPT POWERED ANIMATED BACKGROUNDS

14


ELECTRONJS HOW TO DEFINE PATH NAMES TO EXTERNAL RESOURCES AND WRITE PERSISTANT
DATA

9


MOST COMMON SCREEN RESOLUTIONS 2019

6


DISABLE WEB PAGE CACHING - HOW TO INSTRUCTIONS

16


HOW TO DELAY, SLEEP AND LOOP WITH ELECTRON JS

3


DOWNLOAD APK FILES TO YOUR PC WITHOUT LOGGING INTO GOOGLE

76


HOW TO CLICK A BUTTON USING THE RETURN KEY WITHOUT RELOADING A PAGE

18


HOW TO CREATE AND DOWNLOAD A TEXT FILE FROM WITHIN A WEB PAGE

16


COPYRIGHT CURRENT YEAR USING JAVASCRIPT OR PHP

8


QUICK STYLING FOR YOUR BOOTSTRAP NAVBAR

4


MAGAZINE STYLE PAGE FLIP WITH HTML5

39


WEB DEVILS WEB TRENDS FOR 2018

36


DISPLAY CODE AS HTML WITH LINE NUMBERS

28


HOW TO MAKE A WINDOWS INSTALLER FOR YOUR WEB APP

124


HOW TO MAKE WEB BROWSER FULL SCREEN WITH JAVASCRIPT

36


TRIGGER AUDIO AND PLAYING SOUNDS WITH JQUERY AND JAVASCRIPT

15


HOW TO CAPTURE KEYSTROKES AND KEYBOARD EVENTS FOR WEB AND HTML

5


FRONTEND PDF CREATION USING HTML AND JAVASCRIPT

87


TOP 15 FREE WORDPRESS PLUGINS

31


CONFIGURE CUSTOM 404 PAGE NOT FOUND ON APACHE USING VIRTUAL HOST AND HTACCESS

2


FIX PARTITIONS AND MASTER BOOT RECORD PROBLEMS

5


MAXIMUM UPLOAD FILE SIZE FOR WORDPRESS 4.6 4.7

32


THE MESSAGING ECO-SYSTEM

3


EASY SSL ENCRYPT YOUR WEBSITE

7


CHECKING WEB SERVER PORTS

3


SIMPLE HTML PHP TO PDF CONVERTER

46


HOW TO ADD AUTOMATIC NUMBERING IN INDESIGN

17


SOCIAL MEDIA IMAGE SIZES 2016


WEB BASED GIS MAPPING

2


STATIC HTML WEBSITE BACKUP SOFTWARE

16


BOOTSTRAP STYLE GUIDE QUICK REFERENCE

4


LATEST SCREEN SIZES TO USE IN RESPONSIVE DESIGN 2016

33


HOW TO STREAM A PLS FILE IN A WEB PAGE

10


INTRODUCTION TO WSGI AND WSGISCRIPTALIAS

3


FREE EMBED CODE GENERATOR

1


WHERE ARE THE UNDERSEA INTERNET CABLES?

1


MATERIAL DESIGN - THE WEB AND APP DESIGN LANGUAGE

17


BEGINNERS GUIDE TO THE MEAN WEB STACK (MONGODB EPRESS.JS ANGULAR.JS NODE.JS)

4


JOB REFERENCE LETTER GENERATOR

7


ANDROID APP EMULATOR FOR WINDOWS

1


CHECK HOW A WEBSITE LOOKS IN INTERNET EXPLORER 11 ALL THE WAY DOWN TO IE 5.5


UP-TO-DATE MOBILE DEVICE SCREEN RESOLUTION

1


REAL-TIME HACK ATTACKS


COPYRIGHT NOTICE WITH CURRENT DATE PHP CODE


WEB PAGE BOOKMARKING SYSTEM FOR PAGES AND SECTIONS USING COOKIES

1


FREE META TAG GENERATOR

1


CHECK WHICH DIV IS AT THE TOP OF THE VIEWPORT

Jul
9



FREE DIGITISED INFORMATION SIGNATURES

Free subtle energy digitised information signatures that are designed to
harmonise electromagnetic frequencies - available at:
http://digitised-subtle-energy-information-fields.org




This non-profit website provides digitised information signatures that you can
incorporate into your latest products and technology.
Free to download under the Open Source Creative Commons
Attribution-NonCommercial-ShareAlike 4.0 International License.

 * Add the binary files or digital sequences into digital technology to enhance
   the global effect.
 * Broadcast the digitised information signatures along with other network
   communications.
 * Create and distribute novel ways that the public can interact with these
   digitised information signatures.


Visit http://digitised-subtle-energy-information-fields.org
Posted 9th July 2019 by tobyonline
Labels: digital publishing multimedia web design

104


VIEW COMMENTS



Labels
Labels
 * web design160
 * interface design91
 * web graphics78
 * HTML47
 * CSS45
 * content44
 * digital publishing44
 * web browser35
 * UX31
 * mobile30
 * javascript29
 * CSS326
 * HTML526
 * trends26
 * jQuery25
 * web server24
 * software21
 * SEO16
 * hosting16
 * multimedia15
 * typography15
 * animation14
 * flash14
 * CMS13
 * blogs12
 * forms12
 * PHP11
 * video11
 * print10
 * responsive9
 * AJAX7
 * Accessibility7
 * ActionScript5
 * IE5
 * email4
 * security4
 * applications3
 * book review3
 * cookies3
 * hack3
 * social media3
 * sound3
 * PDF2
 * bootstrap2
 * compliance2
 * drupal2
 * favicon2
 * marketing2
 * MEAN1
 * RSS1
 * apps1
 * electronjs1
 * map1
 * maps1


Subscribe
Subscribe
RSS Feed
    View RSS Feed

Blog Archive
Blog Archive
 * 20198
   * July1
     * Free digitised information signatures
   * June3
   * April1
   * March1
   * February2
 * 20188
   * June1
   * May4
   * January3
 * 201712
   * December2
   * October2
   * September1
   * May3
   * March2
   * February1
   * January1
 * 20168
   * December1
   * September1
   * May2
   * April2
   * March1
   * February1
 * 201524
   * October1
   * September3
   * August6
   * July4
   * June2
   * May2
   * March2
   * February2
   * January2
 * 201410
   * December2
   * November1
   * September1
   * August1
   * July1
   * May1
   * April1
   * March1
   * February1
 * 201314
   * October3
   * August2
   * July4
   * May5
 * 20122
   * August2
 * 2011112
   * December7
   * November3
   * October3
   * September3
   * August7
   * July9
   * June11
   * May13
   * April12
   * March21
   * February15
   * January8
 * 201064
   * November16
   * October4
   * September4
   * August9
   * July5
   * June7
   * May5
   * April2
   * March1
   * February10
   * January1
 * 200924
   * December5
   * November14
   * October5


Text
Text

© copyright webdev-il.blogspot.com

<span class="Apple-style-span" style=" ;font-family:verdana,
arial;font-size:small;"><p align="center">© copyright
webdev-il.blogspot.com</p></span>
Loading

Dynamic Views theme. Powered by Blogger.