lesson 4 - website project
TRANSCRIPT
Lezione 4
- 99 -
Lesson 4Website project
Homework
- 100 -
HomeworkYOUR GOALS
Website Functions
- 101 -
Website main Functions
AssistFAQ/ help
Contact
geo info / shop locator
Discuss
Community
Link to social network
Forum
search bar
Entertain
RIA
Multimedia
Gaming
Inform
Editorial content
Blog
Press release
Technical specs of the products
Sell
Catalogue
e-commerce
Reserved areas under login
Website functions: general
Webisite: the elements
- 102 -
Website core elements
WebsiteElements
Mood
Visual
Tone of voice
InteractionApplication
User engagement
Goal and prioritiesBusiness requirements
Functional requirements
Languages & editions
ProcessesUpdate
Collection
Brand
Website: mood
- 103 -
Mood: visual
Key element
Product
Illustration
Lettering
An example of classification (luxury)
Glamour
- 104 -
http://www.gucci.com/us/index2.asp
http://www.marcjacobs.com/#/en-us/home
Style Glamour
http://www.versace.it/
Sexy
- 105 -
http://www.robertocavalli.com/it/cavalliJust.do?toSection=home_donna
Sexy
New Romantic
- 108 -
http://www.lestropeziennes.it/home.htm
New Romantic
http://www.stellamccartney.com/
Rock
- 109 -
http://www.brianatwood.com/
Rock
http://www.dsquared2.com/
Minimalist
- 110 -
Minimalisthttp://www.gianfrancoferre.com/
http://www.givenchy.com/
http://www.sergiorossi.com/
Interaction design
- 112 -
Interaction Design (IxD) defines the structure and behavior of interactive systems. Interaction Designers strive to create meaningful relationships between people and the products and services that they use, from computers to mobile devices to appliances and beyond. Our practices are evolving with the world; join the conversation
Definition of IxD
http://www.ixda.org/
Interaction: content
- 113 -
Articles -
Quotes -
Puzzles -
Forums -
Feedback/Guestbook -
Reviews -
Case Studies/Success Stories -
Jokes -
Newsfeeds -
Resource Directories -
Newsletter & Archives -
Blogs -
Job Listings -
Testimonials -
There is no doubt that free reprint articles are the best way to populate websites. You can maximize the benefits of articles by writing them yourself or by offering a small fee to writers for customized versions of their popular articles.
An interesting set of quotes on topic will help motivate and inspire visitors. Add and delete quotes regularly to keep your site fresh. Find quotes at http://www.annabelle.net/ and http://www.brainyquote.com/.
People love games and puzzles. Appeal to the child that exists inside all of your visitors and they will reward you with their time and attention. One place to get a new monthly puzzle is http://tinyurl.com/6spgk. Consider investing a small sum to have a custom crossword puzzle developed for your site.
Follow in the footsteps of successful websites by adding free forums to your site. Check out forum software at http://www.yabbforum.com/ and www.phpbb.com Ask loyal visitors to serve as moderators for specific topic threads.
Allow visitors to ask questions or comment on an issue raised by your site or your blog. Make this information public (so long as it is in good taste) and searchable by visitors.
Everyone loves a success story. Interview your best customers and add their stories to your website to bolster your credibility and satisfy your content needs. Be careful to make the success story interesting and motivational rather than commercial.
Does your site cover a topic that frequently generates breaking news? Add current news to your site via feeds available at such websites as http://www.news4sites.com/services/index.php?t=sites and enjoy a higher rate of return visits from your readers.
Why should you jump on the current trend of blogging? Search engines adore blogs and visit them often because they tend to be updated frequently. You can use a blog to replace your e-mail newsletter and to feature your product or service reviews and other bits of pertinent information that do not merit a special e-mail to your customers.
Consider adding fresh job listings to your site that fit your topic. For instance, you could feature telecommuting jobs if your site topic is "work at home." Make sure you have the permission of the employer prior to posting their openings on your site.
Request testimonials form current and past clients and sprinkle them throughout your website. Remove outdated testimonials and add fresh ones on a regular basis. Give your clients live links (opening in a new browser window) to their website within the testimonial.
Instead of the usual reciprocal link campaign consider adding a resource directory to your site that actually points your visitors to valuable sites that complement your own. List only the sites you choose and do not incur search engine wrath by insisting upon reciprocal links. All links in the directory should open to a new browser window.
You don't have to recreate the wheel and attempt to create a huge list for your newsletter. Offer regular updates by e-mail or blog to current and potential clients and include links to pertinent articles or resources. Keep archives publicly accessible and search engines will visit often.
A sense of humor is often lacking on the internet. Imagine how impressed you would be by an attorney who has such a good sense of humor that he keeps all the best attorney jokes on his website. Follow in the footsteps of that attorney and visitors will look forward to visiting your site.
Unbiased reviews are universally popular. Add reviews of books, software, hardware, scripts, movies, television shows, schools or spas to your site and visitors will return again and again.
1.a.
2.a.
3.a.
4.a.
5.a.
6.a.
7.a.
8.a.
9.a.
10.a.
11.a.
12.a.
13.a.
14.a.
http://www.rocketface.com/archive/sticky_sites_rule.html
Interaction on a website: Content
Tone of voice
- 114 -
Tone of voice
TONE OF VOICE GUIDELINES
WRITE.
http://www.leeds.ac.uk/
www.leeds.ac.uk/comms/tov/tone_of_voice.pdf
Our tone of voice is the way in which we write and speak, what we say and how we say it. Like a person, what we say is dictated by our principles, experiences and aspirations, how we say it is informed by our personality.
We’ve been through a rigorous process to define our unique qualities. We’ve distilled these into a vision, big idea, principles and personality for the University. Here we explore in more detail how each of these elements affects the language we use.
OUR TONE OF VOICE
WE PROVOKE
A C
OLLA
BORA
TIVE
APP
ROAC
H
TO KNOWLEDGE TO MAKE A POSITIVE IMPACT ON INDIVIDUALS AND ON SOCIETY
COLL
ABOR
ATION
CHALLENGING GENEROSITY EXCELLENCE
STRAIGHTFORWARD FRIENDLY IMAGINATIVE CONFIDENT
TO BE CONSISTENTLY IN
THE TOP 50 IN THE WORLD RANKINGS,
5TH IN THE UK.
OUR VISION
OUR BIG IDEA
OUR PRINCIPLES
OUR PERSONALITY
07
It is your company personality and goals expressed in words
Design process
- 115 -
Design Process
Personas
Business requirements Functional requiremets
Wireframes
Layout
Personas
- 116 -
In design
As used in the design field, the Persona is an artifact that consists of a narrative relating to a desired user or customer's daily behavior patterns, using specific details, not generalities. A very popular artifact is the 'persona poster' that is usually presented in an 18 inch format with photo and text.
Personas are fictional characters created to represent the different user types within a targeted demographic, attitude and/or behaviour set that might use a site, brand or product in a similar way. Personas are a tool or method of market segmentation. The term persona is used widely in online and technology applications as well as in advertising, where other terms such as pen portraits may also be used.Personas are useful in considering the goals, desires, and limitations of brand buyers and users in order to help to guide decisions about a service, product or interaction space such as features, interactions, and visual design of a website. Personas are most often used as part of a user-centered design process for designing software and are also considered a part of interaction design (IxD), have been used in industrial design and more recently for online marketing purposes.[1]A user persona is a representation of the goals and behavior of a real group of users. In most cases, personas are synthesized from data collected from interviews with users. They are captured in 1–2 page descriptions that include behavior patterns, goals, skills, attitudes, and environment, with a few fictional personal details to make the persona a realistic character. For each product, more than one persona is usually created, but one persona should always be the primary focus for the design.
http://en.wikipedia.org/wiki/Persona_(marketing)
Personas
Personas characteristics
- 117 -
Personas
Description
Relative relevance
Who they are
What they want
Relation with the brand
Relation with the media
Goals
Action path
Personas: what to define
Business requirements
- 118 -
http://en.wikipedia.org/wiki/Business_analysis
MoSCoWThis is used to prioritise requirements by allocating an appropriate priority, gauging it against the validity of the requirement itself and its priority against other requirements.MoSCoW comprises:
There are a number of techniques that a Business Analyst will use when facilitating business change. These range from workshop facilitation techniques used to elicit requirements, to techniques for analysing and organising requirements.
Define Business requirements
Must have -
Should have -
Could have -
Would like to have in the future -
or else delivery will be a failure
otherwise will have to adopt a workaround
to increase delivery satisfaction
but won't have now
1.a.
2.a.
3.a.
4.a.
Example Of Business requirements
Functional requirements
- 119 -
Esempio Functional requirements
In software engineering, a functional requirement defines a function of a software system or its component. A function is described as a set of inputs, the behavior, and outputBehavioral requirements describing all the cases where the system uses the functional requirements are captured in use cases. Functional requirements are supported by non-functional requirements (also known as quality requirements), which impose constraints on the design or implementation (such as performance requirements, security, or reliability). How a system implements functional requirements is detailed in the system design.
http://en.wikipedia.org/wiki/Functional_requirement
Functional requirements
Use case
- 120 -
http://en.wikipedia.org/wiki/Use_case
Use Case
Use cases describe the system from the user's point of view.Use cases describe the interaction between one or more actors (an actor that is the initiator of the interaction may be referred to as the 'primary actor') and the system itself, represented as a sequence of simple steps. Actors are something or someone which exists outside the system ('black box') under study, and that take part in a sequence of activities in a dialogue with the system to achieve some goal. Actors may be end users, other systems, or hardware devices. Each use case is a complete series of events, described from the point of view of the actor.[1]
Use case example
- 121 -
Templateswww.technosolutions.com/use_case_template.htmlhttp://office.microsoft.com/en-us/templates/TC300046141033.aspxhttps://wiki.doit.wisc.edu/confluence/display/CRSGD/Use+Case+Template+With+Descriptions
1.
2.
3.
Use case template
Interaction design
- 122 -
User Experience
Wireframe
- 123 -
A wireframe is a visualization tool for presenting proposed functions, structure and content of a Web page or Web site.
Unfortunately, the most common interpretation of this definition practiced in workplaces leaves much to be desired:
A wireframe is a line drawing that dictates exactly what functionality and content is located where on a Web page or Web site.
This interpretation drastically limits the potential of a web design. It sets a glass ceiling for the visuals and copywriting, two supremely important aspects of great web design. It promotes the notion that visual designers and copywriters needn't bother themselves with size, location and functionality of the elements of a design and that their individual products—the UI and the copy—don't play much of a role in shaping the flow and interaction on a web site.
They democratize layout decisions, allowing the natural synthesis of a more unified final design.They encourage collaboration and allow designers (visual, IA, content, interaction, etc.) to arrive at a holistic vision.They help manage client and stakeholder expectations by focusing the discussion on page-level functionality during reviews.
Functional Wireframes (see example following page and read article linked)
1.
a.
2.
a.
3.a.
b.
c.
http://www.visitmix.com/Articles/The-Future-of-Wireframes
Wireframe
Wireframe Example
- 124 -
http://www.visitmix.com/Articles/The-Future-of-Wireframes
Functional Wireframes: an example
!"#$%&'(&)$*+,$!"#$%&'()$"*+%,-)(.,(/%.
0-)1*2$,/&."(*,$"(')"1*(-.*!"#$%&'#()*3)%.#%'&.1*#$%*4!5*6"7)".*89:9**;-)7.*(-.1.*3)%.#%'&.1*7$$<*
'"2*#..7*7)<.*(=>),'7*3)%.#%'&.1?*
#/"2'&."('7*2)##.%.",.*@.(3.."*(-.*(3$A*#/",()$"'7*
3)%.#%'&.1*1)&>7=*'11.%(*(-.*)"#$%&'()$"*(-'(*3)77*
@.*2)1>7'=.2*$"*'"=*B)C."*>'B.*'"2*"$(-)"B*&$%.9**
0-.=*2$*"$(*&'<.*'"=*B/'%'"(..*3)(-*%.B'%21*($*
7'=$/(*'"2*>$1)()$")"B*$#*(-'(*)"#$%&'()$"9**0-.*
#/",()$"'7*3)%.#%'&.*#$%*'"=*B)C."*>'B.*)1*1)&>7=*'*
>),($%)'7*%.>%.1."('()$"*$#*)(1*.D/)C'7."(*#/",()$"'7*
1>.,)#),'()$"9**E'C)"B*1')2*(-'(?*=$/*&'=*.F>.,(*
,.%(')"*'1>.,(1*$#*(-.*7'=$/(*($*,'%%=*$C.%*($*(-.*
C)1/'7*2.1)B"9*
$#*.',-*3)%.#%'&.*)"2),'()"B*(-.*,$"#)2.",.*7.C.7*
(-'(*(-.*7'=$/(*3)77*,'%%=*$C.%*($*(-.*".F(*>-'1.9*
-.G('<.-$72.%1*1-$/72*%.C).3*(-.1.*3)%.#%'&.1*3)(-*'*
<.."*.=.*$"*>'B.H7.C.7*)"#$%&'()$"9*+1<*=$/%1.7#*(-.*
#$77$3)"B*D/.1()$"1A
H*!1*'"=*)"#$%&'()$"*&)11)"BI
H*G-$/72*,.%(')"*)"#$%&'()$"*@.*('<."*$/(I
H*!1*(-.*)"#$%&'()$"*,7.'%I*!"(/)()C.I
$"*.',-*3)%.#%'&.9*!#*=$/*-'C.*1/BB.1()$"1*#$%*#)"'7*
7'=$/(?*@=*'77*&.'"1?*,-)&.*)"9
/012.3*&+,(#%-.'%,(/0
456('#&+,1'%,23&$/'+'!%4$'3
7681$9:;61);567#6+7(08-9$%':6/-;<8-=>>?
J$>=%)B-(*K*4),%$1$#(*J$%>$%'()$"9*+77*L)B-(1*L.1.%C.29*M$*N$(*M)1(%)@/(.9
<(=2 !); 7.>
!
Page Vs Wireframe
- 125 -
http://visitmix.com/
!"#$%&'(&&&&!"#$
%&'(')*+ ,-.+ -./0( 121)(+
)"**"+&,-
34567!85!"
.,/-012/3
-88 *7
9':;/!85!"
<74"; ;=">?@A";/B5!57!9':;/!85!";CDE;'!F7A4>?57!;-AGH5?"G?@A";!";)5IH>!?;J7?H>AK
L;CEEM CEEN;9':D;-88;A5OH?I;A"I"AP"QD;9':;/!85!";7!;(#5??"A;R;9':;/!85!";7!;=>G"S77T;R;+@SIGA5S";R;U7!?>G?;0I;R;,"O>8;+?@FF
&&&&4*"056-7&"8&93:9&;&2#<=36-7&8"1>
!!!!"! #!$%!$&'(%)!&%*%+,%!-.%/!,-0&1%!*+2,)!3+4%!+/!%4%/(!+/5!,.%+67+((%/5!-(3%&!%4%/(,8
9:;<=>:? @:AABC
&">Q;97A";V
>:D:E<!F>G<GEH?
CC
I'1&-J-&K+(,!>-*%!L*+M>&7
#$%&"'()*%+,-',./%0&)'!" 1-'20/'34'56678''
A-&%K!G.,0K!N-*-&91:-';8'<1),-'=>+?$'!" 1-'@AA'A4'""""8'
A-&%K!G.,0K!91:-';8'<1),-'=>+?$'!" 1-'@AA'A4'""""8
A-&%K!G.,0K!N-*-&91:-';8'<1),-'=>+?$'!" 1-'@AA'A4'""""8'
A-&%K!G.,0K!N-*-&91:-';8'<1),-'=>+?$'!" 1-'@AA'A4'""""8
B%&)C'?-C).'D?&/?.)8
'B%&)C'?-C).'(1.)$8
'B%&)C'?-C).'(1.)$8
'B%&)C'?-C).'(1.)$8
'B%&)C'?-C).'(1.)$8
>&7>&7
>&7>&7
CC
CC
CC
CC
CC
<3%!=O*'/%,,!-J!>%+*>&7
E:1$F+'()*%+,-'2>%-%1-''!" 1-'20/'34'56678''
A-&%K!G.,0K!N-*-&91:-';8'<1),-'=>+?$'!" 1-'@AA'A4'""""8'
A-&%K!G.,0K!91:-';8'<1),-'=>+?$'!" 1-'@AA'A4'""""8
A-&%K!G.,0K!N-*-&91:-';8'<1),-'=>+?$'!" 1-'@AA'A4'""""8'
A-&%K!G.,0K!N-*-&91:-';8'<1),-'=>+?$'!" 1-'@AA'A4'""""8
B%&)C'?-C).'D?&/?.)8
'B%&)C'?-C).'(1.)$8
'B%&)C'?-C).'(1.)$8
'B%&)C'?-C).'(1.)$8
'B%&)C'?-C).'(1.)$8
>&7>&7
>&7>&7
CC
CC
CC
CC
>:D:E<!DBII:E<?
?#<=3&@*<03%"*A31 B-K.3#!;!I'1&-J-&K+(,!
<--*6'(!',!J-&!$%2!5%4%*-.%&,)!5%,'O/%&,!+/5!0,%&,)!K+6'/O!'(!%+,'%&!(-!1&%+(%)!1-/,0K%)!+/5!,(M*%!I'1&-J-&K+(,8!
?#<=3&@*<03%"*A31
?#<=3&@*<03%"*A31
B3-9<*9 B*2##31
97A";,>SI;V
>&7
9+&!-0(C!G!*-4%!3-$!G!*--6!'/!KM!+4+(+&!P Q!91:-'<1)4'20/'G3'5667
>&7
A-&%K!'.,0K!5-*-&!%/0K!.'1-!5%*+!M-,3'!$%'K!'RRM!K+!/O-!!P Q!91:-'<1)4'20/'G3'5667
>&7
N-*-&!%/0K!0/0!.'1-!5%*+!M-,3'!$%'K!'RRM!K+!/O-!!P Q!91:-'<1)4'20/'G3'5667
>&7
:/0K!0/0!.'1-!5%*+!M-,3'!$%'K!'RRM!K+!/O-!!P Q!91:-'<1)4'20/'G3'5667
>&7
9+&!-0(C!G!*-4%!3-$!G!*--6!'/!KM!+4+(+&!P Q!91:-'<1)4'20/'G3'5667
>&7
A-&%K!'.,0K!5-*-&!%/0K!.'1-!5%*+!M-,3'!$%'K!'RRM!K+!/O-!!P Q!91:-'<1)4'20/'G3'5667
>&7
N-*-&!%/0K!0/0!.'1-!5%*+!M-,3'!$%'K!'RRM!K+!/O-!!P Q!91:-'<1)4'20/'G3'5667
>&7
:/0K!0/0!.'1-!5%*+!M-,3'!$%'K!'RRM!K+!/O-!!P Q!91:-'<1)4'20/'G3'5667
9>BI!B=>!A;S?
97A";-A?5G8"I;V 97A";/B5!57!I;V
2#=
=,'/O!LM(3-/!$'(3!H%,(+*(
T!5%4%*-.%&)!LM(3-/!1+/!(+6%!+!*'((*%!O%(('/O!0,%5!(-8!G/!(3',!2*-O!.-,()!G!20'*5!+!,'K.*%!+..*'1+('-/!(-!!3%*.!M-0!0/5%&,(+/5!(3%!.-$%&J0*!*'((*%!/0+/1%,!-J!LM(3-/8!V
>&7 HF-+'H?I&% CC,'(F!'J1/)'!" 1-'20/'K4'56678''B%&)C'?-C).'L.1I.F$$%-I8
W
Layout
- 126 -
While interaction design defines behaviors, gestures, and responses, visual design brings those elements to life on the screen.
http://www.drawar.com/articles/the-principles-of-great-design/99/
BalanceThe sum is greater than the parts. We all know this, but how often do we look at the parts of a design to make sure they are there to balance out the sum? Too often you find designs where it seems on element tries to take control of the design. Every design will have dominant elements to it, but they are always balanced out nicely by smaller elements. This is where paying attention to detail really pays off.
Appleʼs website is a great example of this. Another term that can be used with similar effect is proportion.Having a good proportion helps to maintain the balance of the site
ContrastThis is something that I have yet to master. Great design provides the eye with necessary variety. Without contrast, good design becomes boring. It loses itʼs power. While balance and proportion are used to maintain cohesiveness, contrast is used to maintain interest. Usually this applies to the colors that are used on a site. When a site sticks with a singular color scheme, it causes the eye and mind to lose focus.
EconomyI like the term economy because it reminds me of a budget. In any design we are limited by something. It could be budget, space or materials. Economy takes into account that less is more and finds the best way to work within the limitations that we are presented. How many great meals are made (designed) with a minimal amount of ingredients?
DirectionThis is another place where many designs fail. Designers have to remember that they are designing to guide the eyes of the user to some goal. Going back to the Apple website, what if they had the large image at the bottom of the page instead of the top? Wouldnʼt your eye be drawn to the bottom initially instead of having it work its way down? This is why ads on sites bother me so much. They arenʼt integrated in the design to help enhance direction. Instead, they seemed to be placed to purposefully disrupt the direction of the design. You want your readers to read your content, but instead they keep getting pulled to the blinking image on the right.
Great designs are like a map that gently guide the userʼs eye down a path.
SpaceWhite space. Sometimes I see a design that uses too much and other times I see one that uses too little. I donʼt know what it is, but good designers just seem to have a good eye for spacing. Great designers understand the importance of using a grid and within that grid they can find the spacing that is required to pull great effect from the design. The problem with white space is that many people perceive it to be applicable only to minimal designs. Why wouldnʼt the spacing of elements play just as an important role on a content-rich site than it does on a poster?
1.a.
i.b.
2.a.
3.a.
4.a.
i.
5.a.
Design Principles
Web identity manual
- 127 -
Example of a style guide manual
Web identity is whole set of rules which run the corporate image on the web.In detail they are:
the communication objectives (web site's mood, look and feel)the rules for the management of a logo, of institutional layout and of the other elements of the coordinated image.thechnical characteristics of the website or Intranet (page size, compatible technologies and browsers, etc)restraints to which an software developer must be bound to in order to create a web site or section of it perfectly on line with the style of a company and the institutional communication.
1.
2.a.
b.
c.
d.
Web Identity
Processes
- 128 -
Website maintenance Checklists
http://www.popinteractive.com/webinsights/20031231.asphttp://blogs.voices.com/thebiz/2009/01/website_maintenance_checklist.htmlhttp://www.charlotteswebstudios.com/article.php?ttd=2&ark=25
http://www.smashingmagazine.com/2009/06/29/45-incredibly-useful-web-design-checklists-and-questionnaires/1.
2.
3.
4.
Maintenance
Tech
ApplicationDesign
Content
Plan maintenance
Other resources
- 129 -
Lesson 4 : websiteOther resopurces
http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-universityhttp://www.marketingprofs.com/7/web-marketing-concepts-that-make-difference-bader.asp
1.a.b.
Homework
- 130 -
Define your personasHomework
Should map also business & functional requirementsDesign your website wireframes
1.a.
2.
