Prototyping for Designers by Kathryn McElroy

Author:Kathryn McElroy
Language: eng
Format: epub
Publisher: O'Reilly Media
Published: 2017-01-03T18:03:28+00:00

Figure 5-45

Choose your tools wisely, and don’t waste too much time learning every new one

Try to test mid-fidelity prototypes on the actual device the product will be used on. This testing will give you vital feedback and allow you to observe how the user uses real inputs such as finger, mouse, or keyboard.

mid-fidelity Coded Prototypes

Another way to build a mid-fidelity prototype is to code it. Jumping into code early allows you to test an idea in the actual medium that the final product will be made in. Coding a basic prototype with HTML and CSS is relatively straightforward for mid-fidelity. It allows you to create a responsive design that can be tested across different browsers and devices. Once you get comfortable with code, you might find yourself building out wireframes directly in code to save time. It all depends on the type of digital products you’re making and how you prefer to work.

I believe that all designers should at least understand the basics of code and be empowered to create HTML- and CSS-based prototypes. Working with a markup language will help you understand the limitations of your digital medium. Jared Spool, an expert in software usability and research, states “understanding what your medium does well and where isn’t as effective makes for more informed design decisions.”3 The better you understand how coded interfaces are built and work, the faster you can design experiences that are implementable and still serve the user.

Coded prototypes should include visual design, even in the initial stages. Visual design should never be left until the end of the process; it should be developed alongside the functionality and fidelity levels of the prototypes. Visual cues help users interact more intuitively with the system, and include spacing, color, typography choices and sizes, and iconography.

It’s easy to update and change the visual design of a coded prototype by updating the CSS with styling changes. It’s even easier to update and maintain if you use a CSS extension language like Sass (Syntactically Awesome Stylesheets); see Figure 5-46. Sass introduces shortcuts such as variables that you can set at the beginning of your style sheet, like your base colors, and then you can call those variables in the rest of the styles. If your base color changes, you only have to change it in one place to update the color everywhere in your document. To learn more about Sass, check out “The Absolute Beginner’s Guide to Sass,” which is a great introduction (http://bit.ly/2gPxKyf).

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.