Why planning? In order to make a successful project good communication is key! The process of...
-
Upload
imogen-freeman -
Category
Documents
-
view
222 -
download
0
Transcript of Why planning? In order to make a successful project good communication is key! The process of...
![Page 1: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/html5/thumbnails/1.jpg)
Planning your websiteDesign Document, Wireframes and
Mockups
![Page 2: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/html5/thumbnails/2.jpg)
Why planning?
![Page 3: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/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: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/html5/thumbnails/4.jpg)
![Page 5: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/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: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/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: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/html5/thumbnails/7.jpg)
So where do we start?First step - Design Document:
Define your idea
![Page 8: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/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: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/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: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/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: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/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: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/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: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/html5/thumbnails/13.jpg)
By Jesse James Garret
![Page 14: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/html5/thumbnails/14.jpg)
StructureHow will the pieces of the site fit
together and converge?
![Page 15: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/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: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/html5/thumbnails/16.jpg)
They can be simple
![Page 17: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/html5/thumbnails/17.jpg)
Detailed
![Page 18: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/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: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/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: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/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: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/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: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/html5/thumbnails/22.jpg)
Before you design
![Page 23: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/html5/thumbnails/23.jpg)
You need wireframes
![Page 24: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/html5/thumbnails/24.jpg)
TYPES
OF W
IREFR
AM
ES
SKETCHES
Good for fast feedback.Quick and experimental
![Page 25: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/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: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/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: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/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: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/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: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/html5/thumbnails/29.jpg)
Another example:
![Page 30: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/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: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/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: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/html5/thumbnails/32.jpg)
![Page 33: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/html5/thumbnails/33.jpg)
![Page 34: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/html5/thumbnails/34.jpg)
![Page 35: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/html5/thumbnails/35.jpg)
![Page 36: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/html5/thumbnails/36.jpg)
![Page 37: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/html5/thumbnails/37.jpg)
![Page 38: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/html5/thumbnails/38.jpg)
![Page 39: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/html5/thumbnails/39.jpg)
![Page 40: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/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: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/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: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/html5/thumbnails/42.jpg)
Case Study- Love Letters to the future
www.loveletterstothefuture.com
![Page 43: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/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: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/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: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/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: Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649da75503460f94a93aa5/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?