Website functions: general Editorial content Blog RIA Inform Press release Multimedia Entertain Technical specs of the products Gaming Catalogue Website Sell e-commerce main Functions Reserved areas under login Community Link to social network Discuss search bar Forum FAQ/ help Assist Contact geo info / shop locator
Website core elements Collection Visual Brand Mood Tone of voice Update Processes Application Interaction User engagement Website Element s Business requirements Languages & editions Goal and priorities Functional requirements
Mood: visual Product Lettering Key element An example of classiﬁcation (luxury) Illustration
OUR TONE OF VOICE Tone of voice 07 tone_of_voice It is your company personality and goals expressed in wordsOur 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 sayis dictated by our principles, experiences and aspirations, FRIENDLY IMAGINA RD TIVEhow we say it is informed by our personality. WA TF OR CO NFWe’ve been through a rigorous process to deﬁne our IGH IDunique qualities. We’ve distilled these into a vision, big RA NGING GENER ENidea, principles and personality for the University. Here we ST CH ALLE O SI TY Texplore in more detail how each of these elements affects ION EXthe language we use. R AT CE E TO MAKE A LEDG O PO LL http://www.leeds.ac.uk/ OW AB SIT E KN NC LL I V TO CO E EI H www.leeds.ac.uk/comms/tov/ C MP R OA ACT tone_of_voice.pdf TO BE BORATIVE APP CONSISTENTLY IN O N INDIVIDUALS THE TOP 50 IN THE WORLD RANKINGS, 5TH IN THE UK. OLLA AC AN DO E OUR VISION OK N V SO RO CIE WEP TY OUR BIG IDEA OUR PRINCIPLES OUR PERSONALITY
Design Process PersonasBusiness requirements Functional requiremets Wireframes Layout
Personas Personas are ﬁctional 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. A user persona is a representation of the goals and behavior of http://en.wikipedia.org/wiki/Persona_(marketing) 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 ﬁctional 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. In design As used in the design ﬁeld, the Persona is an artifact that consists of a narrative relating to a desired user or customers daily behavior patterns, using speciﬁc details, not generalities. A very popular artifact is the persona poster that is usually presented in an 18 inch format with photo and text.
Define Business requirements 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. MoSCoW This 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: 1. Must have - a. or else delivery will be a failure 2. Should have - a. otherwise will have to adopt a workaround 3. Could have - a. to increase delivery satisfaction http://en.wikipedia.org/wiki/Business_analysis 4. Would like to have in the future - a. but wont have now Example Of Business requirements Detailed Business Requirements Deliverable Template - MIKE2.0, t
Functional requirements In software engineering, a functional requirement deﬁnes a function of a software system or its component. A function is described as a set of inputs, the behavior, and output Behavioral 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. Esempio Functional requirements http://en.wikipedia.org/wiki/Functional_requirement How to write a software requirements speciﬁcation (SRS) documen
Use Case Use cases describe the system from the users 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. http://en.wikipedia.org/wiki/Use_case
Wireframe 1. A wireframe is a visualization tool for presenting proposed functions, structure and content of a Web page or Web site. a. Unfortunately, the most common interpretation of this deﬁnition practiced in workplaces leaves much to be desired: 2. A wireframe is a line drawing that dictates exactly what functionality and content is located where on a Web page or Web site. a. 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 neednt bother themselves with size, location and functionality of the elements of a design and that their individual products —the UI and the copy—dont play much of a role in shaping the ﬂow and interaction on a web site. 3. Functional Wireframes (see example following page and read article linked) a. They democratize layout decisions, allowing the natural synthesis of a more uniﬁed ﬁnal design. http://www.visitmix.com/Articles/The-Future- b. They encourage collaboration and allow designers (visual, IA, content, interaction, etc.) to of-Wireframes arrive at a holistic vision. c. They help manage client and stakeholder expectations by focusing the discussion on page- level functionality during reviews.
Design PrinciplesWhile interaction design deﬁnes behaviors, gestures, and responses, visual design brings those elements to life on the screen. 1. Balance a. The 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 ﬁnd 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. i. Apple’s website is a great example of this. b. Another term that can be used with similar effect is proportion.Having a good proportion helps to maintain the balance of the site 2. Contrast a. This 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. 3. Economy http://www.drawar.com/articles/the- principles-of-great-design/99/ a. I 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 ﬁnds the best way to work within the limitations that we are presented. How many great meals are Moluv - The Worlds Best Web Design - made (designed) with a minimal amount of ingredients? Todays Best Looking Web S 4. Direction a. This is another place where many designs fail. Designers have to remember that they are designing Awwwards- Website Awards - Best to guide the eyes of the user to some goal. Going back to the Apple website, what if they had the websites around the World 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. i. Great designs are like a map that gently guide the user’s eye down a path. 5. Space a. White 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 ﬁnd 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?
Web Identity 1. Web identity is whole set of rules which run the corporate image on the web. 2. In detail they are: a. the communication objectives (web sites mood, look and feel) b. the rules for the management of a logo, of institutional layout and of the other elements of the coordinated image. c. thechnical characteristics of the website or Intranet (page size, compatible technologies and browsers, etc) d. 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. Example of a style guide manual
Designing Style Guidelines For Brands And Websites | Smashing Ma
Lesson 4 : website 1. Other resopurces a. http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-university b. http://www.marketingprofs.com/7/web-marketing-concepts-that-make-difference-bader.asp
Homework 1. Deﬁne your personas a. Should map also business & functional requirements 2. Design your website wireframes