Bureaucrats, emailconfirmed
1,221
edits
→Designing
mNo edit summary |
|||
| Line 194: | Line 194: | ||
A stuctured aproach of this is defining "Requirements". This is defining the things your product needs to do at the end – in early phases the very essential ones. | A stuctured aproach of this is defining "Requirements". This is defining the things your product needs to do at the end – in early phases the very essential ones. | ||
==Sketches== | ==Sketches== | ||
[[File:UI-Sketch-Flickr-Kyle_McDonald.jpg|thumb|50px|left]] | |||
Sketches are helpful in generating different ideas. They help you to structure your thoughts and keep good ideas for later refinement or combination with other ideas. Don't worry about your sketches as long as you can understand them yourself! They are just for dealing with your own ideas and especially used in early project phases directly after research and whenever you have and idea you want to remember. | Sketches are helpful in generating different ideas. They help you to structure your thoughts and keep good ideas for later refinement or combination with other ideas. Don't worry about your sketches as long as you can understand them yourself! They are just for dealing with your own ideas and especially used in early project phases directly after research and whenever you have and idea you want to remember. | ||
==Mockups== | ==Mockups== | ||
[[File:Wireframe_Flickr-JoeCrawford.png|thumb|150px|left]] | |||
Mockups are more advanced than sketches: often cleaner and more carefully crafted. Mockups are used for communicating in a team and to see how the elements of your interface play together in the screen layout. They are a graphic representation of what will be visible on the computers screen. So you can communicate your ideas about an application to your team-mates. It is usually decent to just draw the element's outlines - this type of mockup is known as "wireframe" as well. | Mockups are more advanced than sketches: often cleaner and more carefully crafted. Mockups are used for communicating in a team and to see how the elements of your interface play together in the screen layout. They are a graphic representation of what will be visible on the computers screen. So you can communicate your ideas about an application to your team-mates. It is usually decent to just draw the element's outlines - this type of mockup is known as "wireframe" as well. | ||
Like sketches mockups can be drawn on paper. Chequered sheets are useful here cause they provide a grid so your wireframe will look better and organized. | Like sketches mockups can be drawn on paper. Chequered sheets are useful here cause they provide a grid so your wireframe will look better and organized. | ||
There are a couple of tools for creating Mockups like Balsamique. Many people use Visio or OmniGraffle (two popular diagramming applications) as well. | There are a couple of tools for creating Mockups like Balsamique. Many people use Visio or OmniGraffle (two popular diagramming applications) as well. | ||
[[File:Mockup_Fennec.jpg|thumb|250px]] | |||
For Mockups you use in your team or for trying out screen layouts you don't want to waste time on shiny graphics. In contrast to this you may want to do a Mockup to present it to somebody who does not know about the design process and is just interested in how the finished project looks like. In this case you need to spend more time on graphics. Often you can use "Stencils", pre-created Interface-Element collections that are used with the diagramming applications above or an image-editor like Photoshop. | For Mockups you use in your team or for trying out screen layouts you don't want to waste time on shiny graphics. In contrast to this you may want to do a Mockup to present it to somebody who does not know about the design process and is just interested in how the finished project looks like. In this case you need to spend more time on graphics. Often you can use "Stencils", pre-created Interface-Element collections that are used with the diagramming applications above or an image-editor like Photoshop. | ||
==Prototypes== | ==Prototypes== | ||
All ways of desing above have in common that they can more or less look like the intended product but they dont have any functionality. "Models" of your software that provide functionality are called "Prototypes". They are maily used for testing your ideas. In latter chapters I will teach how to build a prototype and to conduct a test with it. | All ways of desing above have in common that they can more or less look like the intended product but they dont have any functionality. "Models" of your software that provide functionality are called "Prototypes". They are maily used for testing your ideas. In latter chapters I will teach how to build a prototype and to conduct a test with it. | ||