Techniques for representing the design of a digital product; annotated diagrams/sketches, storyboards, wireframe and grid 11 GEN
Techniques for the representation of a design plan including; annotated digital diagrams/ sketches storyboards, annotated notes, thumbnails 12 GEN
Components of a design plan; storyboard, thumbnails (hand/digital), wireframes/sketches(hand/digital) 11 ATAR
Project planning tools storyboards, site maps, flow charts 12 ATAR
For any project it is important to do planning so that we have an idea of what it is going to look like. This plan can then be used as a point of discussion for a client. The design plan shows what the product may look like.
These are rough sketches that show what the product may look like.
Annotations are notes written around the outside of the sketch.
These can be hand drawn or they can be done on a computer (digital)
Grid means they have grid paper so you can line up the sides of objects better
Visit http://alistapart.com/article/sketching-the-visual-thinking-power-tool to see how these can be used to show ideas for the product
download wireframe grid sheets free from here. photoshop grid sheets also available
download mobile phone sketch sheets to use free here
Visit wikipedia for more details on wireframes, or wireframe on website design templates
A sitemap is a one page picture showing the whole structure of a website
It shows all the webpages on a website
It is used in 2 places. One in planning for a website. Two is actually on the finished website which is hyperlinked. eg see example here
To draw a sitemap plan use rectangles joined together by lines
Draw a home page box, under that draw boxes for other webpages.
A flowchart is a series of boxes joined by lines that show flow of information
the boxes show the things/nouns and the lines show the flow of data between them. The data flow can go both ways
NOTE: image below from http://www.edm-consulting.com/design_services.html#
A storyboard is a sequence of pictures showing details for a product
These can be hand drawn, or made on a computer, there are even online versions (but they are a bit limited in what you can do)
Visit http://www.instructionaldesign.org/storyboarding.html , find advantages and disadvantages of storyboarding.
Visit http://www.lynda.com/Web-User-Experience-tutorials/UX-Design-Techniques-Creating-Scenarios-Storyboards/148581-2.html to see the storyboard course at lynda.com Just close the popup window to watch the movie (1 min 24 secs)
A thumbnail is a small version of a larger picture
It is quick to load on a webpage
Thumbnails take up less space on the webpage
They show a version of the image, if you like it, you click it to make it bigger.
An example of this is google images, where you search the thumbnails to find the picture you want.
It is used in design planning; to show placeholders where images will go in a design.
You draw a thumbnail of the actual picture
1. Learn the above points.
2. Apply these diagram and sketch techniques to your design planning.
Components of a design process to develop a digital product including; 11 GEN
identify a need
schedule of tasks (timeline)
research ideas
specifications
develop solutions
test solutions
modify and adapt
evaluate
Project management is thinking carefully about how to achieve a short term goal. Then it involves considering how to achieve it.
look for a purpose for the digital product
which person/group will need it; student services at school, a local football club
why will they need it
is it a website that a person would like to make
is it a poster that a person needs to advertise an event
brainstorm to see what tasks need to happen to make the product
make a list of the tasks
identify who is going to do each task, is it the same person for everything, can you get expert help from friends or the community
when should the tasks be completed by
make a timeline so you can see the timings for the tasks
for each task, see what ideas you can find out
are there exact products for you to get ideas from
are there other products that are similar to get ideas from
ask your friends for ideas
write these down in a brainstorm, or list
Who is going to use the product?, What do they want to see?
Where is it going to be used?, What do these products usually look like?
What does the design of this product need?
What is it going to look like?
Is it a poster that needs to be A4 or A3 or A2 size?
What do you need to make it?
Make a list of the exact things needed for this product; What software can you use to make it? Do you have to print it out? Upload to the internet?
Make up at least 2 rough sketches for this design
Think about different ways of how to make it look
Make notes around your sketches to help explain the parts of the sketches
Use arrows to point to the parts of the sketch you are explaining
Choose which or your rough sketches to use
Consider the research ideas and specifications above
You are ready to start making your product
Start making your design
Use your chosen design sketch as a guide
Ask for help with the software if you need help
While making it, ask your teacher or friends for feedback.
eg Does this look like it will be a good poster for our Athletics Carnival coming up soon
If you think their feedback will make a better product, then modify to adapt their ideas.
You have finished.
Time now to have a very close look at your product.
Does it meet the needs of the task?
Does it need to be changed?
Have you got time to change it?
If you were to do a similar product again, What would you change? How could you make it better?
1. Use these steps in the design process to create your digital designs.
Learn more from techitoutuk
For any project it is important to do planning so that we have an idea of everything needed to complete the project.
They have written notes on the designs to provide extra details about the design.
They are made by the designer and used to talk with the client (client brief) about what the design might look like.
The following tools help with project planning.
A storyboard is a sequence of pictures showing details for a product.
A website storyboard shows a plan of each webpage.
Visit excellent site for webpage storyboards https://www.sampletemplates.com/business-templates/website-storyboard.html
A sitemap is a one page picture showing the whole structure of a website
It shows all the webpages on a website
A flowchart is a series of boxes joined by lines that show flow of information
the boxes show the things/nouns and the lines show the flow of data between them.
A Gant chart shows tasks, time taken for each task, it also shows if a task needs to follow another task. eg ID 4 and 5 above follows 3
Make your own Gantt chart, for free, by registering at tomsplanner.com
Download free Gantt software from http://www.ganttproject.biz/
There are hundreds of project management software available eg http://www.capterra.com/project-management-software/
Visit the website above and spend a few minutes noting down names of three of these and also note what they can do to manage a project.
1. What is an advantage of using a Gantt Chart for a project?
2. Why do you think there is so much project management software available?
3. Start using Gantt charts as planning tools for some of your tasks.
EXTENSION ACTIVITY
4. Why does the word Gantt always have a capital letter? hint