McKinley & Rice Design Guidebook for 2019–2020.
How to efficiently, consistently, produce stunning UI·UX design.
Version 1.2 (Last edited Feb 8th, 2019)
The following guidebook is structured as follows:
- Purpose
- Required Skill Set for UI·UX Designers
- So What is UI·UX Design?
- Types of UI·UX Designers
- McKinley & Rice’s Official Aesthetic Theme
- Design Tools & Services In Use
- Major UI Design Philosophies
- Silicon Valley UI Design Trends Update 2019
- UI·UX Design Process
- Preparation
- Project Analysis
- Inspiration
- UI Kits
- Functionality Analysis
- Compilation
- UI Style Guide
- Creat wireframes
- Iteration 1
- Iteration 2
1. Purpose
— — —
We want our designers to be the best in the world. From our experience, it takes a relatively good Silicon Valley UI Designer about a week, and a relatively good Seoul UI Designer about 2 weeks, to finish a mid sized UI design project with quality. We want to beat that.
2. Required Skill Set for UI·UX Designers
— — —
Intellectual Skills:
- A highly trained eye for aesthetics.
- Deep understanding of the major UI design philosophies.
- Up to date knowledge of Silicon Valley UI design trends.
- Ability to dissect, analyze, and reverse engineer the functionalities in a given application.
Design Skills
- Ability to analyze color schemes.
- Ability to work in iterations.
- Ability to create UI Style Guides.
- Ability to research UI Design Kits relevant to the given project.
- Ability to research similar applications for a given project, compile them to discover their core common functionalities, and incrementally improve the UX of those functionalities.
- Ability to create SVG animations.
- Highly trained in at least 3 out of the following list of softwares: (1) Adobe Illustrator, (2) Adobe Photoshop, (3) Adobe XD, (4) 3Ds Max, (5) Adobe After Effects, or (6) Sketch.
3. So What is UI·UX Design?
— — —
To understand what We first must examine what is not good UI·UX design?
(1) It’s not about ‘complex’ designs. Good designs follow Ockham’s principle, that simplicity is king.
(2) It’s not about spending excessive time on each design. Good design, once mastered, is extremely fast and efficient. If it takes you a long time to create good design, either you should stop being a UI·UX designer and become an artist, or you might just be lazy and lying to yourself.
(3) It’s not about simply making things look good. design is more about math than about art. It’s a type of science — a social science, to be exact.
Then what is UI·UX design?
Design is inherently about solving problems. The first step in all design is to identify what the design problem is. Usually the problem comes in 2 steps, ‘Understanding what the Relevant Functionality & Information Is’ and ‘How to Effectively Execute the Relevant Functionality & Information’.
In short, UI·UX design is ‘a scientific process through which we solve problems regarding functionality and the display of information under certain constraints.’
For instance, the following is a UX Design Problem:
UX Design Problem: If the Client is selling 120 different types of mattresses, each a variant of the other, it is foreseeable that the customer will not be able to distinguish between product #119 and product #120. Thus he may be overwhelmed by the options.
Design Solution: Let’s artificially divide the products into classes. If each mattress is created by mixing together different layers of foams, let’s assume that the type of foam that is on the uppermost layer (the part that actually touches the body of the consumer) has the most impact on the mattress’s overall properties among all the foam layers of the mattress. Thus, the type of foam that is on the uppermost layer will be the basis on which we will divide the 120 products into classes.
4. Types of UI·UX Designers
— — —
There are 3 types of designers.
(1) Assistant Designers
These are designers with rudimentary knowledge of text, colors and spacing. (i.e. the lead says, ‘Draw me a butterfly’, and the designer draws a butterfly)
(2) Pseudo-Artist-Designers
These are designers who can actively find solutions to design problems. However because of their ego (they are incapable of learning new things and processing feedback), they work alone and cannot function in a team setting.
(3) Creative Directors
These are designers who actively find solutions to design problems, however they are capable of working in teams and leading a project (actively participating throughout even the development phases) to its completeness.
Thus, everyone should try to become Creative Directors. McKinley & Rice does not tolerate people who cannot process feedback, as they are incapable of bettering themselves.
5. McKinley & Rice’s Official Aesthetic Theme
— — —
(1) Rule 1: We want culture-neutral design. This means that we’re aiming for a general audience, and that the design should look visually appealing regardless of which culture the User belongs to.
(2) Rule 2: We want minimalist design. This is a corollary of the first rule. In order for design to serve a general audience, from Africans to Chinese to Englishmen, less elements should be there.
6. Design Tools & Services In Use
— — —
(1) Current Design Tools & Services:
- Adobe Illustrator
- Adobe Photoshop
- Autodesk 3Ds Max (for 3D modeling)
- Adobe XD
- Adobe After Effects (for simple animations)
- Birme (Birme.net, for quick bulk image resizing)
- Optimizilla (Imagecompressor.com, for quick bulk image compressing)
- Icons8 (Icons8.com, for standard vector icons)
- Unsplash (for royalty free images that don’t have a cheesy look to them)
- Pixabay (for royalty free images)
- Pexels (for royalty free images)
- Shutterstock (for royalty free images)
(2) Current Prototyping Tool
Currently there are almost 25 prototyping services that are battling to win the future of UI design, including Adobe XD, Framer, Marvel, Invision, Sketch, Supernova, Flinto, and more.
Of these we currently rely on Adobe XD
(3) Sketch — The Future
We will be migrating to Sketch by 2020, once everyone is equipped with a Mac. It’s quite similar to Adobe XD, but comes with a larger UI component resource library.
7. Major UI Design Philosophies
— — —
It is mandatory for all McKinley & Rice UI Designers to go through Apple’s Human Interface Guidelines, and Google’s Material Design guidelines at least once.
In addition, it is mandatory for all McKinley & Rice UI Designers to understand the subtle differences between (1) Skeuomorphism, (2) Flat Design, and (3) Material Design, which are the 3 pillars of UI design philosophy.
8. Silicon Valley UI Design Trends Update 2019
— — —
Design is ever-changing, and designers must keep up with the latest trends. Most places around the world are somewhere between 18 to 30 months behind Silicon Valley trends.
In 2019, even Facebook and Twitter UI·UXs are not good enough. The current Silicon Valley design trends are the following:
1. Whenever possible, get rid of borders.
2. Use icons whenever possible. (Less work during Multilanguage development.)
3. Try to add color at the last possible moment. (Solve the design problem first before you add color.)
4. Avoid using gradient shadows. (Gradient backgrounds are okay. Gradient shadows are not.)
5. UI·UX Design Philosophy is changing. Apple’s School of Skeuomorphism Design is rapidly fading away, and Google’s School of Material Design and Flat Design are trending.
6. For rectangular shapes, try to use either 1:1 Squares or 16:9 Rectangles. 1.2–1.4:1 shapes are reminiscent of CRT monitors and are going out of style.
7. Use popups whenever possible. (Less work than designing complete pages.)
8. Always think of animations. UI·UX is a 4-dimensional medium, which means that you can manipulate ‘time’ to your advantage.
9. Rounded Edges for Buttons are trending. Avoid hard rectangles.
10. Simple GIF type button & loading screen SVG animations are trending.
(i.e. loading animation upon landing, reference: www.lawtalk.co.kr)
11. Except for the scrollbars attached to your browser, never use scrollbars inside of frames or popups. Frames died out along with Flash animation in the mid 2000s.
12. Minimalism in Major sections, Complexity in Minor sections. Minor sections mean sections such as ‘Cart, Checkout, Mypage etc.) Unless the Client has good brand recognition, Users want these sections to be a bit more complex, so that it reflects that the Client is a credible business that is capable of maintaining complex websites.
13. Hardcore stock images are dying out. Try googling ‘Authentic photography’. Services that sell ‘stock image style’ stock images (i.e. Shutterstock) are fading out while services that sell ‘authentic’ stock images (i.e. Unsplash) are rising.
14. Duotones are trending in color. Google it if you don’t know what it means.
15. Double light and double exposure is trending in photography style. Google them if you don’t know what they mean.
16. In fonts, Serif is making a comeback. However, it’s difficult to execute Serif skillfully. If you aren’t very fluent in English (and thus have not trained your eye to identify good fonts), stick to Sans Serif.
17. As with pop culture, 1980s U.S. Vintage Retro themes are making a comeback to UI as well. This means neon is making a comeback in colors too. However, again, if you aren’t very fluent in English (and thus have not trained your eye to identify good retro themes), stick to Flat or Material themes.
18. Regarding Mobile Application UI design, please never forget to add the ‘Back’ button to any page that isn’t accessible from the top or bottom navigation bars. This is because certain mobile phones (i.e. iPhones) do not have a ‘Go Back’ button built inside their front touchscreens, and thus must rely on in app buttons to navigate their way back to the home screen. This is a very important but often overlooked rule in mobile UI design.
19. The core of UI is being able to rank all available information in descending order of importance. As mobile screens are much smaller than their desktop web counterparts, it is inevitable that some functionality and information will be omitted from the mobile versions. That’s why it is important to be able to judge which information can be deleted.
9. UI·UX Design Process
— — —
McKinley & Rice’s Design Team follows 11 steps that are imperative to the UI design process.
- (1) Preparation
- (2) Project Analysis
- (3) Inspiration
- (4) Research (Similar apps, UI Kits, etc.)
- (5) Functionality Analysis
- (6) Compilation
- (7) Create UI Style Guide
- (8) Create wireframes
- (9) Iteration 1
- (10) Iteration 2
- (11) Final Presentation
10. Preparation
— — —
We suggest that you ‘get into the mood’ before commencing work every day. It really makes a difference. Take 5 minutes in the morning to watch a beautifully crafted music video, or an inspirational short film to get you into the creative mood.
11. Project Analysis
— — —
The start of every project is understanding the project requirements. People tend to overlook this part, but one small misstep here can cost weeks of manpower. What is the product? What is the Client trying to sell? Why does the Client wish to build this product?
Understanding the product and how design manipulates people into making purchasing decisions is important in the 21st century. Watching U.S. TV drama can help you understand this. We suggest HBO’s Silicon Valley and AMC’s Mad Men for starters.
In this step you also have to decide on the marketing angle (How will you market the product?), and rank the information that will be displayed in their order of importance.
In this stage, you have to keep in mind 2 aspects:
(1) What are the minimal design requirements of the Client’s product? That is, what is the minimum level of design that will prevent the Client from being dissatisfied? (‘Key Performance Indicators’)
(2) What are the aspects that we can work on, in order to‘wow’ the Client? That is, what are aspects of the Client’s product that we can improve to give the impression that we have over-delivered?
12. Inspiration
— — —
(1) Behance
Behance, while it is not a bad site, is not extremely recommended. This is because items on Behance tend to focus heavily on ‘aesthetically stunning conceptual designs’ rather than real life solutions to actual design problems. For instance, many Mobile UI concept art on Behance are actually quite impossible to code across different resolutions and different platforms.
(2) Evernote Design Database
This is always a great place to start. It offers a curated aggregation of links to almost every important design resource available online.
(3) Collect UI
It offers a curated aggregation of UI pages and components by category (e.g. dropdown menus, shopping carts, navigation bars, etc.)
13. UI Kits
— — —
Please don’t reinvent the wheel. Like I said, we’re targeting within a week to finish mid-sized design projects (35 UI screens) with quality. This, dissected in to parts, means that you’ll have approximately:
- 1 day to research
- 1 day to analyze the required functionalities
- 1 day to form a Style Guide
- 1 day to create all the wireframes
- 1 day to create the Hi-fi layouts
- 1 day to edit as per feedback
- 1 day left over as a buffer
How is this possible? By utilizing pre-made UI kits. Good designers have a good library of resources that they can rely on, similar to chefs who have a list of good vendors they can immediately go to once they decide what to cook.
Below is a list of websites that host UI Kit libraries, from official libraries provided by Adobe, to commercial UI Kits created by individuals.
14. Functionality Analysis
— — —
Design and Development comes from the same soul, and thus must work closely together. Designers must analyze what functionality is included within each section, and make sure that the functionalities don’t contradict each other (e.g. if the service includes a reward point system, it must be redeemable at the checkout section)
For instance, take a look at the Netflix video streaming page on the left.
15. Compilation
— — —
Once you have a good amount of research done, it’s time to compile everything together and analyze what design components they all have in common.
For instance, most video streaming applications (Twitch, YouTube, Netflix, Amazon Prime, etc.) have buttons that allow you to change the resolution and speed of the video. How do these buttons usually look? Where are they usually located?
A good system that describes the core of the ‘Compilation’ stage is a practice called ‘Atomic Design’. The Atomic Design Methodology focuses on extracting similar design components (called ‘Atoms’) and combining these elements to form Molecules and Organisms, which in turn can be combined to create Templates and Pages.
16. UI Style Guide
— — —
It is mandatory to create a UI Style Guide for all McKinley & Rice design projects to before commencing serious work. If you don’t know why this is necessary, then you have obviously never worked in a large professional setting before.
Link: How to Create a Style Guide
Link: List of Great Style Guides
17. Create wireframes
— — —
Create the navigational flow of the pages. Only play around with text, fonts, stock icons, and spacing. Don’t use colors or hi-fi banners yet.
As fronted development will start from here, there should be no changes to the layout beyond this point.
18. Iteration 1
— — —
Start playing around with the colors. Create custom icons. Create the full resolution, hi-fi banners.
19. Iteration 2
— — —
Deploy and test the actual product. Make small changes where needed. If big changes are needed, you’ve failed the project.
