Lecture11 A Image

SFDV2001 – Web Development

Lecture 11 A: Design

(SFDV2001:18) Design 2

What is Design

Design is not art, it is not manufacturing or construction.

Design is about the customer not the designer. Design is the process of finding solutions to

problems. For the web these problems usually start with

the need to convey information, and produce a visually appealing page that people will return to.

Design is the art of gradually applying constraints until only one solution remains


Style vs Content There is a debate between style and content. Some designers:

believe that style is more important than the content.

want to show off, making “cool” websites. Some tech people believe:

presentation is irrelevant. that more information is always better.

Large organisation have rules about types of content. style of presentation.

No simple solution to this argument.


Quotations

Questions about whether design is necessary or affordable are quite beside the point: design is inevitable. The alternative to good design is bad design, not no design at all.

Form follows function - that has been misunderstood. Form and function should be one, joined in a spiritual union.

No matter how beautiful, no matter how cool your interface, it would be better if there were less of it.

Douglas Martin

Frank Lloyd Wright

Alan Cooper


Not Print Design Much of the work on visual design, has a

tradition in print design But there are some very distinct differences:Paper Webedges of paper scrollingbalance resizingflow of the eye just part of displaygrid based layouts areasfont control few fontscolour control colours vary


Similarities Although web design is not print design there

are similar concepts. Visual hierarchy Indexing Structure of information Flow of information Consistency Font size Ink to content ratios Balanced graphics .....


Design Principle Usability Lecture 3: Morag Navigation Lecture 4: Morag Consistency Hierarchy Maintainability Aesthetic


Process Design is a process


Usability Jacob Nielsen – “The usability guy”

Usability as the principle design constraint. Clean, consistent, easy to use. "Ultimately, users visit your website for its content.

Everything else is just the backdrop.“ Conveying information is the principle goal of

95% of web pages. The interface has to be usable to find content

Usability testing. Usability is the key concept to keep in mind while

balancing other constraints.


Navigation Linking and indexing

where to put links, breadcrumbs. visited links: using a colour theme. colour pallet for a site.

Roll-over effects. Icons link to organisations. People ignore banner ads.


Consistency

Cognitive load. The mental cost of working out something new. Familiarity detectors linked to pleasure centres in

the brain. More efficient is not always better.

Keyboards – Qwerty vs Dvorák Consistency vs performance

Coherence of site. Meeting expectations.

99% of the time, people are on other web sites


Efficient vs consistent

Note the vowels are all under the fingers as are common letters htns

Consistency has won out over efficiency.


Hierarchy Humans love to group things

Animals, people, objects, ... Improves understanding. Improves recovery of information. Humans find it easy to learn things provided in a

hierarchy. Broad and shallow

Web sites need to be shallow as depth takes time. Sitemap. Breadcrumbs. Sibling links viewable, usually on the left.


Hierarchy

a b c

m on

p rq

a – n – q : Breadcrumbs


Grids and Alignment Lining things up

Humans have vertical and horizontal line detectors in our brains

Alignment familiar from word processors Grid layout - print media

Most print media has a strong grid Discord

If things are out of alignment people feel unsure about relationships

Proximity and alignment used as hints to the hierarchy


Maintainability Not a one off

Websites are updated regularly Design for flexibility and expansion Do not optimize to much for current content Minimal time requirement for adding content

Think about structure early Allow for more links, pages, images, content

Comment your HTML CSS and well commented HTML is a good start


KISS Keep it Simple Stupid

If you are unsure, make it as simple as possible Boredom is not a reason to change everything

Simplicity is the ultimate sophistication. Leonardo da Vinci

The simplest explanation is usually the best.

Ockham's Razor

Make everything as simple as possible, but not simpler.

Albert Einstein


Principle applied to Page Size Page size is crucial for websites.

Length and width important, for printing and viewing.

When deciding think about each of the principles:Usability too long or wide is unusableConsistency keep pages about the same length on the

whole site, if possible.Hierarchy long pages do not conform to a hierarchical

breakdown.Navigation fragment links and easy to find contentMaintainability updating by adding a page rather than

rewriting parts of a large document


Page Dimensions Never require horizontal scrolling. Page length, 2-3 screenfuls.

more than 2-3 pages perhaps break up into multiple pages, unless primary role is printing

fragment links for internal navigation Above the fold Never require horizontal scrolling. Pages will be resized, avoid fixed width tables.


Above the Fold Printing term from newspapers First 410 pixels of a website

Must convey the key message Users will “bounce” off your site if they do not

think it has the information they need Remember the “4 second” rule

fold / bottom of screen


Aesthetic Design eye

Process of design / redesign Part of function is to be pleasurable to use

beauty is part of pleasure some things do the job, but are ugly and so people

do not use them Car design

F1 cars – all about function – beautiful form Lada – functional but not very pretty, perhaps


Design Eye Take the content of an alertbox article and

redesign the layout. Simplify text Add visual information Clean up the code and add

CSS for semantic markup Add a printable version Add a Flash interactive version for education

Not all of what they do is perfect but an interesting perspective.


Simplification

Don’t underline any text that’s not a link, even if your links aren’t underlined. Reserve underlining for links. Because underlines provide a strong perceived affordance of clickability, users will be confused and disappointed if underlined text doesn’t have an actual affordance to match this perception.

Use bold or italics for emphasis with text that’s not a link.If you are going to use underlines, reserve the technique for links. Underlines on the web have a general expectation to act like links, and users will be confused or disappointed if underlined text doesn’t match this expectation.


Group Dynamics Technical people and artistic people have

different ways of communicating and very different approaches to problems.

Respect is perhaps the most important concept to keep in mind. Do not tell other people that their ideas suck. Do not state things in a negative way, restate in a

positive way or as a question. Communication techniques and a firm leader

are important.


Who is in charge Technical:

I make the page so I am in charge Design:

I design the page so I am in charge Truth:

depends on the boss/client You have to work together. Somebody needs to have the final say.


Design is a Craft Competence vs skill

Every adult can learn, to some level of competence, any discipline.

You can learn to sing, play an instrument, draw, program, design, act, and speak in public. But you probably can't learn to be a star.

Natural talents Easy to learn some things and have a flare for a

particular activity. Great design requires more than following a set of

rules. You can learn to paint a house, but can you create

a beautiful mural?


Practical Considerations Know your own skills “KISS – Keep It Simple Stupid” “Above the fold” Adding things “because they are cool” is almost

always a mistake If you design a page make it:

Simple / clear Consistent Usable Maintainable

Education

Lecture11 A Image