ebook img

Modular Design Frameworks : A Projects-based Guide for UI/UX Designers PDF

95 Pages·2017·3.66 MB·English
by  JamesCabrera
Save to my drive
Quick download
Download
Most books are stored in the elastic cloud where traffic is expensive. For this reason, we have a limit on daily download.

Preview Modular Design Frameworks : A Projects-based Guide for UI/UX Designers

Modular Design Frameworks A Projects-based Guide for UI/UX Designers — James Cabrera Modular Design Frameworks A Projects-based Guide for UI/UX Designers James Cabrera Modular Design Frameworks: A Projects-based Guide for UI/UX Designers James Cabrera Holbrook, New York, USA ISBN-13 (pbk): 978-1-4842-1687-3 ISBN-13 (electronic): 978-1-4842-1688-0 DOI 10.1007/978-1-4842-1688-0 Library of Congress Control Number: 2017951445 Copyright © 2017 by James Cabrera This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed. Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights. While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein. Cover image designed by Freepik Managing Director: Welmoed Spahr Editorial Director: Todd Green Acquisitions Editor: Natalie Pao Development Editor: James Markham Technical Reviewer: Massimo Nardone Coordinating Editor: Jessica Vakili Copy Editor: Karen Jameson Compositor: SPi Global Indexer: SPi Global Artist: SPi Global Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail Contents at a Glance About the Author ������������������������������������������������������������������������������ ix About the Technical Reviewer ���������������������������������������������������������� xi Introduction ������������������������������������������������������������������������������������ xiii ■ Chapter 1: A Modular Future ���������������������������������������������������������� 1 ■ Chapter 2: Fonts, Colors, and the Invisible UI ������������������������������� 11 ■ Chapter 3: Defning Your Basic Unit ���������������������������������������������� 21 ■ Chapter 4: Adaptation, Reusability, Variation, and Iteration ��������� 37 ■ Chapter 5: Organization, Clustering, Pages, and Navigation �������� 51 ■ Chapter 6: What’s Next? ��������������������������������������������������������������� 67 ■ Appendix A: Breaking Down Examples into Modular Systems ����� 71 Index ������������������������������������������������������������������������������������������������ 85 iii Contents About the Author ������������������������������������������������������������������������������ ix About the Technical Reviewer ���������������������������������������������������������� xi Introduction ������������������������������������������������������������������������������������ xiii ■ Chapter 1: A Modular Future ���������������������������������������������������������� 1 Breaking Down the Buzzword ����������������������������������������������������������������� 2 The Shift Toward Design-Led Thinking ���������������������������������������������������� 3 Design and Development: Let’s Bridge the Gap �������������������������������������� 5 Should Designers Learn to Code? ����������������������������������������������������������� 6 Design with the Medium ������������������������������������������������������������������������� 7 The Advantages of Reusability ���������������������������������������������������������������� 7 Iterative Design ��������������������������������������������������������������������������������������� 8 Taking the Focus Off Aesthetics �������������������������������������������������������������� 8 Taking Charge������������������������������������������������������������������������������������������ 8 Summary ������������������������������������������������������������������������������������������������� 9 ■ Chapter 2: Fonts, Colors, and the Invisible UI ������������������������������� 11 Defning Visual Hierarchy ���������������������������������������������������������������������� 11 Establishing a Font System ������������������������������������������������������������������� 14 Custom Fonts and System Fonts ���������������������������������������������������������������������������� 14 Think About Function Before Form ������������������������������������������������������������������������� 15 v ■ Contents Establishing a Color System ������������������������������������������������������������������ 17 Let’s Design an Example ����������������������������������������������������������������������� 18 Wearables and Conversational UI ���������������������������������������������������������� 19 Summary ����������������������������������������������������������������������������������������������� 20 ■ Chapter 3: Defning Your Basic Unit ���������������������������������������������� 21 Understanding the Essence of Your Product ����������������������������������������� 21 We Need a Product to Sell �������������������������������������������������������������������������������������� 21 Theory in Practice ��������������������������������������������������������������������������������� 22 Facebook ���������������������������������������������������������������������������������������������������������������� 22 Airbnb ��������������������������������������������������������������������������������������������������������������������� 23 Uber ������������������������������������������������������������������������������������������������������������������������ 23 Amazon ������������������������������������������������������������������������������������������������������������������� 24 BuzzFeed ���������������������������������������������������������������������������������������������������������������� 25 Chase ���������������������������������������������������������������������������������������������������������������������� 26 Onward Inward �������������������������������������������������������������������������������������� 26 Inventory ����������������������������������������������������������������������������������������������������������������� 27 Flow ������������������������������������������������������������������������������������������������������������������������ 27 Design ��������������������������������������������������������������������������������������������������������������������� 28 One for All ��������������������������������������������������������������������������������������������������������������� 29 Building Our Own ���������������������������������������������������������������������������������� 29 Summary ����������������������������������������������������������������������������������������������� 36 ■ Chapter 4: Adaptation, Reusability, Variation, and Iteration ��������� 37 Preventing Confrmation Bias in Design ������������������������������������������������ 38 How to Adapt What You Have ���������������������������������������������������������������� 38 Recycling and Reusing Basic Units ������������������������������������������������������� 39 Variation ������������������������������������������������������������������������������������������������ 42 Example: Size ���������������������������������������������������������������������������������������� 42 vi ■ Contents Example: Availability of Data ����������������������������������������������������������������� 43 Taking It Further ����������������������������������������������������������������������������������������������������� 45 Making Iterations ���������������������������������������������������������������������������������� 45 A/B Testing �������������������������������������������������������������������������������������������������������������� 46 Example: Increase Click Rates �������������������������������������������������������������������������������� 47 Example: Increase Scroll Depth ������������������������������������������������������������������������������ 48 Summary ����������������������������������������������������������������������������������������������� 49 ■ Chapter 5: Organization, Clustering, Pages, and Navigation �������� 51 Organization ������������������������������������������������������������������������������������������ 51 Categorically ����������������������������������������������������������������������������������������������������������� 51 Consumption Paradigms����������������������������������������������������������������������������������������� 53 Clustering ��������������������������������������������������������������������������������������������������������������� 55 Designing with Cluster Modules ����������������������������������������������������������������������������� 59 Paging ��������������������������������������������������������������������������������������������������� 60 Navigational Design Elements ��������������������������������������������������������������� 62 Titles ����������������������������������������������������������������������������������������������������������������������� 62 Main Navigation ������������������������������������������������������������������������������������������������������ 62 Internal Filters �������������������������������������������������������������������������������������������������������� 63 Breaking Down the Basic Unit ��������������������������������������������������������������� 64 Summary ����������������������������������������������������������������������������������������������� 66 ■ Chapter 6: What’s Next? ��������������������������������������������������������������� 67 Fonts, Colors, and the Invisible UI ��������������������������������������������������������� 67 The Basic Unit ��������������������������������������������������������������������������������������� 68 Variations, Optimizations, and iterations ����������������������������������������������� 68 Clusters, Pages, and Navigation ������������������������������������������������������������ 69 A Never-Ending Job ������������������������������������������������������������������������������� 69 Summary ����������������������������������������������������������������������������������������������� 70 vii ■ Contents ■ Appendix A: Breaking Down Examples into Modular Systems ����� 71 Example 1: Herokid Studios ������������������������������������������������������������������ 71 Font System ������������������������������������������������������������������������������������������������������������ 72 Base Unit ���������������������������������������������������������������������������������������������������������������� 73 Variations ���������������������������������������������������������������������������������������������������������������� 74 Example 2: Huge ����������������������������������������������������������������������������������� 76 Font System ������������������������������������������������������������������������������������������������������������ 77 Base Unit ���������������������������������������������������������������������������������������������������������������� 78 Variations ���������������������������������������������������������������������������������������������������������������� 79 Example 3: iPhone 7 ������������������������������������������������������������������������������ 80 Font System ������������������������������������������������������������������������������������������������������������ 82 Base Unit ���������������������������������������������������������������������������������������������������������������� 83 Variations ���������������������������������������������������������������������������������������������������������������� 83 One in the Same ������������������������������������������������������������������������������������ 84 Index ������������������������������������������������������������������������������������������������ 85 viii About the Author James Cabrera is a self-taught Filipino-American designer based in New York City. With a formal education in Math and Physics, James forged his own path into design, working for companies like Foot Locker, Say Media, and Refinery29 over the past 10 years. His analytical approach unconventional thinking, and knack for problem-solving has greatly contributed to his success. He has also spoken at conferences internationally and frequently writes about his design strategies. James loves constantly learning new things, and sharing knowledge he has acquired over the years. In his free time he is currently focusing on art, photography, and videography. ix About the Technical Reviewer Massimo Nardone has more than 22 years of experience in Security, Web/Mobile development, Cloud, and IT Architecture. His true IT passions are Security and Android. He has been programming and teaching how to program with Android, Perl, PHP, Java, VB, Python, C/C++, and MySQL for more than 20 years. He holds a Master of Science degree in Computing Science from the University of Salerno, Italy. Massimo has worked as a Project Manager, Software Engineer, Research Engineer, Chief Security Architect, Information Security Manager, PCI/SCADA Auditor, and Senior Lead IT Security/Cloud/SCADA Architect for many years. Technical skills include Security, Android, Cloud, Java, MySQL, Drupal, Cobol, Perl, Web and Mobile development, MongoDB, D3, Joomla, Couchbase, C/C++, WebGL, Python, Pro Rails, Django CMS, Jekyll, Scratch, etc. He currently works as Chief Information Security Officer (CISO) for Cargotec Oyj. He worked as a visiting lecturer and supervisor for exercises at the Networking Laboratory of the Helsinki University of Technology (Aalto University). He holds four international patents (PKI, SIP, SAML, and Proxy areas). Massimo has reviewed more than 40 IT books for different publishing companies and he is the coauthor of Pro Android Games (Apress, 2015). This book is dedicated to Antti Jalonen and his family who are always there when I need them. xi

See more

The list of books you might like

Most books are stored in the elastic cloud where traffic is expensive. For this reason, we have a limit on daily download.