Download - Planning your website
![Page 1: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/1.jpg)
Planning your websiteDesign Document, Wireframes and
Mockups
![Page 2: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/2.jpg)
Why planning?
![Page 3: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/3.jpg)
The Design Process
In order to make a successful project good communication is key!
The process of planning and designing a project involves many people from different disciplines working simultaneously and in collaboration
![Page 4: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/4.jpg)
![Page 5: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/5.jpg)
Advantages of planning Help communicate your idea to your
costumer/funder/stakeholder. Think about the flow of your site, the user
experience and the details that appear on each page.
Help you visualize the “website narrative” and how to tell the story of your project/site in the simplest, easiest and most direct way.
Time and cost effective- you can see what works or doesn’t work before you start writing code.
Give your page layout a great starting point and a solid foundation to build on.
![Page 6: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/6.jpg)
ALS
O…
Examples:
OMDC INTERACTIVE DIGITAL MEDIA FUND: http://www.omdc.on.ca/idm.html
BELL NEW MEDIA FUND: http://www.ipf.ca/Bell/English/guidelines_production.html
CANADA’S MEDIA FUND –Experimental Streamhttp://www.cmf-fmc.ca/downloads/create/2011-12_app_exp.pdf
CANADA MEDIA FUND- Convergence Streamhttp://www.cmf-fmc.ca/downloads/create/2011-12_app_prd.pdf
Most funding agencies in Canada today will require a detailed Design and Technical Document, Wireframes and Mock ups.
![Page 7: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/7.jpg)
So where do we start?First step - Design Document:
Define your idea
![Page 8: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/8.jpg)
Define your idea In a simple and clear way, describe the
concept of the project that you wish to develop
Describe what is the solution that your project will provide (the solution can be provided to answer a void in the industry, the community, or the company that you are pitching to).
Describe the goals of your project (the solution can also be a part of it).
![Page 9: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/9.jpg)
How do you plan to achieve your goals?(by a using a specific design, by appealing
to a specific community, by creating a unique user experience, etc)
What is the original content of your project? Essentially outline the narrative behind your project and what makes it unique.
(are you creating webisodes to enhance a television series, an interactive game, a series of online documentaries, a special web series?)
![Page 10: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/10.jpg)
Describe the platforms for your project and why they fit to your project. Make sure that you think about the audience and where they spend most of their time.
(is it web, mobile, touch screen, television, live event, radio etc)
Market Research- is there a similar project to yours out there? How is your project more appealing? Explain and show examples.
![Page 11: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/11.jpg)
User experience- describe in details how people would use the site. What is the user journey, what is the first thing that the users see, and what are the choices available for them. How do they interact with the content of your site.
![Page 12: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/12.jpg)
The Elements of User Experience
By Jesse James Garret
Jesse James Garrett is a co-founder of Adaptive Path, a user experience strategy and design firm, and co-founded the Information Architecture Institute.
His book The Elements of User Experience became pretty popular, not only among web designers but also among software developers and industrial
designers.
![Page 13: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/13.jpg)
By Jesse James Garret
![Page 14: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/14.jpg)
StructureHow will the pieces of the site fit
together and converge?
![Page 15: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/15.jpg)
Let’s start with a website map
A site map- is a document that displays a website tree structure and outlines
pages, sections and hierarchy.
![Page 16: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/16.jpg)
They can be simple
![Page 17: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/17.jpg)
Detailed
![Page 18: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/18.jpg)
or complex
http://upload.wikimedia.org/wikipedia/en/8/83/Main_Page_Usability.png
Their goal is to illustrate the navigation process, outline content and to make sure the user experience is natural and intuitive.
![Page 19: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/19.jpg)
SkeletonThe Skeleton makes the structure of the
site concrete. The best way to build a skeleton is to use wireframes.
![Page 20: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/20.jpg)
What are wireframes
Wireframes are visual representations of an interface used to communicate the structure, content information hierarchy, functionality and behavior of an interface.
![Page 21: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/21.jpg)
WIR
EFR
AM
ES
Structure- How will the pieces of your site be put together?
Content- What will be displayed on this site?
Information Hierarchy- How this information organized and displayed?
Functionality- How will this interface work?
Behavior- How does it interact with the user? How does it behave?
![Page 22: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/22.jpg)
Before you design
![Page 23: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/23.jpg)
You need wireframes
![Page 24: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/24.jpg)
TYPES
OF W
IREFR
AM
ES
SKETCHES
Good for fast feedback.Quick and experimental
![Page 25: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/25.jpg)
TYPE O
F WIR
EFR
AM
ES
Lo-Fidelity
Creating block diagrams and good for testing the flow of the website
![Page 26: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/26.jpg)
TYPES
OF W
IREFR
AM
ES
Hi- Fidelity-Detailed wireframes including comments.Describe content and behavior.Should be understood without explanation.
![Page 27: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/27.jpg)
Tips for good wireframes
•Be realistic about the content of the site•Try using real text if you can, many clients don’t know ‘lorem ipsum.
![Page 28: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/28.jpg)
If you are making a hi-fidelity wireframe, it’s best to include notes and comments for each element:
![Page 29: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/29.jpg)
Another example:
![Page 30: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/30.jpg)
Remember- Wireframes focus only on the content and interaction of the interface. Avoid using color, gradients and images.
Best practice – Only after you have locked your wireframes, then you can move to the next stage and transform your wireframes into real designs!
This is a not a good wireframe!
![Page 31: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/31.jpg)
Where to start?
Start with the largest parts of the interface and then work towards the smaller elements.
Keep your wireframes clean and easy to understand! They will be used by many people in your team- designers, developers, project managers, clients and more.
![Page 32: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/32.jpg)
![Page 33: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/33.jpg)
![Page 34: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/34.jpg)
![Page 35: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/35.jpg)
![Page 36: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/36.jpg)
![Page 37: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/37.jpg)
![Page 38: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/38.jpg)
![Page 39: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/39.jpg)
![Page 40: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/40.jpg)
Tools for designing wireframes
There are many different tools for designing wireframes and it’s best to use the tool that feels most comfortable to you.
Some designers use vector based tools: Fireworks, Photoshop, illustrator, PPT.Some designers use markup language to create
wireframes such as http://960.gs/
To learn more about the tools click here http://garmahis.com/reviews/wireframe-tools/
![Page 41: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/41.jpg)
Next Step: Design mock-ups
This is the stage of transforming your wireframes into colorful appealing designs.
We will talk about it in more length in our next class
![Page 42: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/42.jpg)
Case Study- Love Letters to the future
www.loveletterstothefuture.com
![Page 43: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/43.jpg)
Tips for successful design documents
Remember- your Design Document is like a pitch, it’s meant to convince
investors/potential clients/ funders (or in this case me) to invest in your project. It should look great, sound great and be original – from description to wireframes
and mockups!
![Page 44: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/44.jpg)
More tips
Today most funders are looking for innovative projects. Push yourself to think outside the box and how can you utilize the web platform to create innovative projects: Innovation in concept, technology platforms and business models.
![Page 45: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/45.jpg)
Strong visuals! visually appealing graphics will leave room for imagination and provide credibility to your idea.
Clarity -a detailed user experience explanation that flows like a story is interesting to read and will keep your client/funder engaged.
Detailed market research- understand the market, similar projects and user behavior will show that considered the feasibility of your idea and its relevancy.
![Page 46: Planning your website](https://reader035.vdocuments.us/reader035/viewer/2022070404/56813ab6550346895da2b8bd/html5/thumbnails/46.jpg)
Class Assignment
Choose an existing website of a television series, film, theatrical play, mobile app, a game, a campaign a product or any other site that interest you and create:
3-5 individual wireframes for your chosen site.
a website map Offer a critique on the site you chose-
how you would improve the user experience?