NED12 A design process revealed

A fellow student Tracy found this article by Douglas Bowman, A Design Process Revealed, very relevant to our first assessment task. It relates the processes behind designing a CSS Zen Garden submission. It is heartening to be told that no great artistic talent is necessary; design is a systematic process which can be grouped into phases as follows:

* research and discovery
* competitive analysis
* exploration
* thumbnail sketching
* typography
* imagery
* composition
* execution and implementation
* review

NED12 Photoshop exercises

The "practice" exercises in Module 2 are driving me crazy! it is not that they are simple, or boring and repetitive; it is the vague and confusing wording of the task descriptions. I'm not alone in this, several of the other students have been having difficulty interpreting what is required from the task.

A lot of us are still learning to use Photoshop, some good links shared on the forum - del.icio.us/hamjak/photoshop. Thank goodness design is more than learning Photoshop.

Update 29/09 - Kathleen found a really good resource in Janee's Photoshop Tutorials. I am working my way through them and find them easy to follow, with good exercises to help remember things like shortcut keys etc. I have always been so confused by layers and paths, this set of lessons is making it a lot clearer.

NED11 Results

Marks in today - a total 80/100. I'm very happy I passed!

No more paid content NY Times

Since starting at Uni my research efforts have been thwarted a few times by subscription-only content on the Web. Amongst the various publications, NY Times articles have appeared in search results looking very interesting and relevant, but would only take me as far as a login page.

So it is rather good news that NY Times have decided to do away with online subscriptions. This follows a review of their business model which showed that the potential ad revenue generated by traffic from search engines was greater than the revenue from paid subscriptions.

Read all about it on NY Times - Times to End Charges on Web Site

NED12 Visual weight

Visual weight an illusion of physical weight, such as with bold face type.

Balance where visual weight appears to be equally dispersed throughout the design.
- Symmetrical balance: mirrored distribution on either side of an imaginary vertical access
- Asymetrical balance: the arrangement of unequally weighted elements in a design.

Further reading:
* Visible Narratives: Understanding Visual Organization by Luke Wroblewski
* Composition and Design Principles by Marvin Bartel
* The Principles of Design by Joshua David McClurg-Genevese

NED12 Designing a unified interface

Another important element of design - unity. Coherence, usability, better communication. Psychological studies have shown that users want to see unity, if they don't see this they lose interest.

Unified design needs a consistent visual style throughout the document/site. Visual devices include visual style, alignment, balance, flow, and a grid.

Creating unity with visual style:
* Use similar colors
* Use similar shapes
* Use similar line weights
* Use similar typography
* Use similar photographs
* Use similar illustration styles
* Use same artist for all graphics
* Repeat the elements above you use throughout your site

Further reading:
Some examples of unified design through repetition, proximity, continuation.
Unity - Basic principles of design, from About.com

NED12 Alignment and the grid

Elements that are lined up with each other share a visual connection that can enhance design and increase usability and legibility. Consistency, predictability are essential elements to any well designed information system.

Grids are commonly used in design (and I've heard the term bandied about a lot!) to help with alignment. A good grid design is a flexible one - it can have as many or few grids as desired, and there will be times when breaking out of the grid is appropriate. The goal when working with a grid for web design is to create a consistent layout that allows you to plug in text/graphics, without having to rethink the design approach on each page. (Lynch & Horton 2001)

A new term introduced here - registration, in reference to precise alignment, positioning of elements down to the last pixel.

Further reading:
* Why use a grid? Mark Boulton
* Grid systems for the Web Part 1, Part 2 Fixed, Part 3 Fluid, Mark Boulton
* Grids are good [PDF] excellent presentation by Khoi Vinh and Mark Boulton
* Smashing Magazine's Designing with grid-based approach lists references and resources
* Designing grid-based blog template, Michael Angeles
* Design By Grid articles, tutorials and resources

NED12 Getting colours right on the screen

Gamma correction - generally what looks good on a Mac, appears too dark on a PC and conversely, images created on a PC often look light and washed out on a Mac. Gamma is set by adjusting a numerical value - Macs have a default gamma setting of 1.8; on PCs the default is around 2.5 (but there are many variables). W3C has set a Web standard to 2.2 for all platforms (also suggested by CGSD back in 1998), creating an easy medium.

I followed the steps listed in Joe Gillespie's article on Palettes to make a gamma correction on my PC. The first thing that happened was everything got a lot brighter and I could distinguish darker shades a lot better. My browns don't look so red now, either.

Did you know the word "pixel" was created from picture element? Lynch and Horton mention this in an explanation of bit colour display.

My own display is set to 32-bit colour, but I discovered that it actually has the same number of colours as 24-bit display, the extra byte is for an alpha channel which optimises memory - 'The only reason this is done is that on the Intel 32-bit PCI/AGP/Memory data bus its more efficient to get at data that is "32-bit aligned". [with 24-bit data you often actually have to read the pixel's data twice--and then mask for the bits you are interested in]' (John Schilling, Scala, 2002)

Using your noggin

Another link courtesy of my sister, Luciano Passuelo's new site LiteMind is all about exploring ways to use our minds efficiently. My favourite articles would have to be How to Recall an Entire Book in 5 Minutes or Less and What is Mind Mapping? (and How to Get Started Immediately) since both of these things are pretty good to have a handle on for uni.

Luciano is a fan of famous quotes also, and has convinced me it is not just idle entertainment.

Instinctive reasoning

I get a daily quote on my Google start page each morning. This one today by Bertrand Russell is profound:

If a man is offered a fact which goes against his instincts, he will scrutinize it closely, and unless the evidence is overwhelming, he will refuse to believe it. If, on the other hand, he is offered something which affords a reason for acting in accordance to his instincts, he will accept it even on the slightest evidence. The origin of myths is explained in this way.

Of course, underneath this quote (I get two a day) was a gem from Walt Disney:

I love Mickey Mouse more than any woman I've ever known.

NED12 Colour theory

Some reading to get through this weekend:

Digital Color Wheel
Colors on the Web
Color Theory

Colour schemes created via the colour wheel:

• Analogous - colours next to each other on the wheel, match well, no contrast - serenity, comfort.
• Complementary - colours directly opposite each other on the wheel - high contrast, vivid, stand out.
• Split complementary - combination of a colour with the analogous colours of its complementary on the wheel.
• Triad - three colours located at equal distance from each other on the wheel.
• Tetrad - four colours found at each corner of a rectangle or square placed on the colour wheel.
• Diad - two colours that are two colours apart on the wheel

Some terms to remember:

• Hue - another name for colour!
• Tint - a light colour created by mixing with white
• Shade - a dark colour created by mixing with black
• Value - increases according to the amount of black
• Saturation - the level of colour - full colour = vibrant

Types of colour:

• RGB - red green blue; additive colour scheme, uses the absence/presence of light to create colours, primary colours combine to create white.
• CMYK - cyan magenta yellow black; subtractive colour scheme, uses the absence/presence of pigment to reflect or absorb light, primary colours combine in equal amounts to create the appearance of black.

Effective colour combinations:
A school of thought believes the most effective combination is red, black and white, but the commonly used rule is to use three colours - a main colour, a similar secondary colour and a contrasting highlight.

Thinking like a genius

Since introducing my sister to StumbleUpon she has been finding all these cool sites and sending them to me. She thought my studies could use a bit of help and guidance and sent me this link to Thinking like a Genius. It's all about thinking productively and creatively rather than reproductively, something they taught us in REA11.

I also found this resource on Critical thinking on the Web (all by myself!) which looks pretty good - lots of links and quotes and references there.