Prototype

Question 1

Prototype definition

Answer 1

Draft version of a product that allows you exploring ideas, showing the intention behind your design to the users before investing time and money into developing the final product.

Question 2

Common elements in a prototype

Answer 2

• Home page: Overview or index of all the content in that site.
• Landing Page: It is a “Learn more” page mostly featuring a single product or service with one clear call to action
• Product page: With product specifications, imagery, price… Call to action is “Add to cart”
• Features: log in, sign up, profile settings, messages, check out, like, share…

Question 3

Sitemap

Answer 3

Diagram showing the structure of a website or application.

• Showing how the navigation should be structured
• Helping identify where content will sit and what needs to be produced
• Clarifying the relationship between different pages
• Providing a structure for developers to start understanding the site

Question 4

User Interface design

Answer 4

Visual layout of the elements that a user might interact with in a website, app or any other technological product..

Question 5

Tools for User Interface design

Answer 5

Sketch - Interface and interactive prototype. Works with bitmaps and vectors.
Figma - Interface and interactive prototype. Works with bitmaps and vectors.
Photoshop - Specially for photo edition and artworks. It works better with bitmaps.
Illustrator - Specially for drawing vectors and typography. It works mainly with vectors.

Question 6

Vector

Answer 6

Computer graphics images in 2D, which are connected by lines and curves to form polygons and other shapes. They never look blurry because they don’t depend on pixels, you can zoom as much as you want. This is the format we use for logos, icons, expanded typography, etc. Common formats: .svg, .ai, .pdf, .eps.

Question 7

Bitmap

Answer 7

Or pix-map, it is a map of pixels. This is the format we use mainly for images. Common Formats: .jpg, .png, .gif, .tiff, etc.

Question 8

Typography

Answer 8

Typography is the most important part in graphic design.
When we design for digital we create typography styles and we use them all over the interface.
Headers font: we use hear something with more personality that connects with the brand identity.
Body Font: We select something more functional and easy to read in long text pieces.

Question 9

Icons

Answer 9

It is important to choose a good style for our icons and they all are consisten. There are many types, for example, line, flat, unicolor, multicolor, printed effect. We can also draw them as vectors in Figma or Illustrator and save them in .svg format.