Christopher Harris - Build Your UX and Ui Design Skills

Published in 2020 by Enslow Publishing, LLC.

101 W. 23rd Street, Suite 240, New York, NY 10011

Copyright 2020 by Enslow Publishing, LLC.

All rights reserved

No part of this book may be reproduced by any means without the written permission of the publisher.

Library of Congress Cataloging-in-Publication Data

Names: Harris, Christopher, author. | Gennari, Joel, illustrator.

Title: Build your UX and UI design skills / Christopher Harris; illustrations by Joel Gennari.

Description: New York: Enslow Publishing, 2020. | Series: Unplugged activities for future coders | Includes bibliographical references and index. | Audience: Grades 5-8.

Identifiers: LCCN 2018055033| ISBN 9781978510715 (library bound) | ISBN 9781978510708 (pbk.)

Subjects: LCSH: User interfaces (Computer systems)

Classification: LCC QA76.9.U83 H366 2019 | DDC 005.4/37dc23

LC record available at https://lccn.loc.gov/2018055033

Printed in the United States of America

To Our Readers: We have done our best to make sure all website addresses in this book were active and appropriate when we went to press. However, the author and the publisher have no control over and assume no liability for the material available on those websites or on any websites they may link to. Any comments or suggestions can be sent by email to .

Image Credits: Character illustrations by Joel Gennari, other art by Christine Pekatowski.

CONTENTS

INTRODUCTION

T hink about what happens when you turn on your computer. After a few loading screens, you arrive at the desktop. Its here you can find the shortcuts and buttons you use every day. Whether youre opening your favorite browser or loading up the newest game, these shortcuts and buttons are the foundation of your typical computer use. But have you ever thought about what all these tools are actually doing?

A computers desktop is an example of a user interface (UI). Broadly, this term refers to the way through which you (the user) are able to interact (or interface) with your computer. In particularunless you use an advanced operating systemyour desktop is a graphical user interface (GUI). This just means that the UI youre looking at uses pictures (or graphics) to convey information. A shortcut for a computer game, for example, might have a picture of the hero as its iconand instead of having to type out a complex command to tell your computer to open the game, you can simply click the shortcut in the GUI.

This ease of use is one reason why nearly every computer, smartphone, and tablet in the world uses a GUI. Designers of successful productswhether hardware or softwareare very interested in improving the user experience (UX). UX deals with how a user moves through an appinputting data and getting back results, working within different sectionsand gets their task done. If you have ever struggled to complete a task in a program, it may have felt like the program was bugged or broken. Or, it might have just had a poorly designed overall UX, possibly related to its UI.

For the most positive UX, programmers pay attention to the placement of menus, buttons, and other text elements in their UI. After all, if their software is confusing, people simply wont use it.

In addition to how easy and intuitive it is to use an application, UX and UI designers are also concerned with the general look and overall feel of their software. Think back to your computers desktopis everything drab, gray, and dull? More likely, its colorful, varied, and vibrant. Each of your shortcuts probably has a unique icon that not only looks good, but also conveys to youthe userexactly what that shortcut is going to do. In a modern GUI, the user is able to immediately and consistently recognize the programs they want to launch based on the information they are presented. At least, thats the goal.

One way to help you start to think more about UX and UI is to analyze the programs and websites you use daily. When you open up your favorite game or go to a website, are you clear on what each button, link, or similar element will do within the program or where it will take you? Are you ever surprised by the result of clicking a button or following a link? Those are sure signs of poor UX or UI design. You may have the experience necessary to correct the mistakes of the UX designer, but think about your parents or grandparents. Would they be able to go back and notice where they went wrong? The job of the UX designer is to make sure that everyone, regardless of their experience with computers, programming, or technology, can quickly and easily understand and use their application.

Designing an app in a way that makes sense sounds easy, but it can definitely be tricky. This is especially true because different styles of software will require different UI layouts and UX goals. A shopping website might need a few easy buttons to add items to a virtual shopping cart, but what about your schools website? By the same token, links to teacher biographies and homework help guides would be out of place on a shopping website. And even further, a website guide for novice computer scientists is going to look a lot different than an advanced video course for seasoned software developers! Every project has its own ins, outs, and design guidelines, so a good UX designer is absolutely critical to the success of an application.

Now that you understand the importance of a good UX and a good UIand how theyre relatedthis book is going to help refine your skills. Because design work is often not strictly related to any particular programming language, you can learn about good design practices using a pencil and paperno computer needed.

BECOME A UI DESIGNER

YOUR MISSION

Imagine this situation: Your best friend is planning an event and has asked you to design a digital flyer to post online so everyone can learn about the event. But you dont know anything about designing flyers! Lucky for you, youre about to learn how to make a good UI that will draw attention to the event.

Your Gear

Drawing supplies

Paper

LETS PLAY

Designing user interfaces is an art! If your digital product is supposed to appeal to a wide range of people, there are some guidelines you should follow. There are some things people just love to see. Your digital flyer should include at least some of the following features:

Colors that complement each other and the type of event

A font that matches the feeling of the event

A large title

Though every good UI designer needs to have strong coding skills, many of the best also have incredible artistic visionand the two are not as different as you might think! A programmer needs to be able to envision their final product, create the code necessary, and construct their program. Similarly, artists start with nothing more than an idea and take the necessary steps to accomplish their expression. The end result for both coders and artists is something everyone can enjoy. As you work to design UIs and UXs, make sure you always think about both computation and artistry.