background preloader

7 Rules for Creating Gorgeous UI (Part 1)

7 Rules for Creating Gorgeous UI (Part 1)
Introduction OK, first things first. This guide is not for everyone. Who is this guide for? Developers who want to be able to design their own good-looking UI in a pinch.UX designers who want their portfolio to look better than a Pentagon PowerPoint. If you went to art school or consider yourself a UI designer already, you will likely find this guide some combination of a.) boring, b.) wrong, and c.) irritating. Let me tell you what you’ll find in this guide. First, I was a UX designer with no UI skills. My portfolio looked like crap, reflecting poorly on my work and thought processMy UX consulting clients would rather buy someone’s skills if their expertise extended to more than just sketching boxes and arrowsDid I want to work for an early-stage startup at some point? I had my excuses. “I majored in engineering — it’s almost a badge ofpride to build something that looks awful.” These “rules” are the lessons from those hours. This article is not theory. This is the Krav Maga of screens. Related:  User Experience

MockFlow - Online Wireframe Tool What an Actual Product Design Process Looks Like Cap Watkins, Design Manager at Etsy shared his and his team’s design process a while ago and I consider it to be one of the most invaluable posts on the topic by far. I came across his 3-part series before reading Etsy Creative Director Randy J. Hunt’s seminal book Product Design for the Web, but revisiting it afterwards really clarified so much for me. I hope to apply these principles towards my own process and make it work for myself and our team. Below are a summary of his steps (along with suggested tools), but I highly suggest checking out his entire series because it’s pure gold top to bottom. What are you doing? Create your own document answering these questions then pass it around for everyone to scrutinize and discuss with; once a consensus is reached refer to it frequently throughout the process to constantly remind everyone of the problems and goals to design for. Suggested tools: Any text software eg. Gather products with similar features and flows you’re trying to solve for.

What's the tradeoff for using an icon driven navigation? #130 Monitoring with God Need to ensure your background processes stay up and running and don't use too many resources? Check out the god gem as shown in this episode. Download: source codeProject Files in Zip (121 KB)mp4Full Size H.264 Video (27.9 MB)m4vSmaller H.264 Video (16.9 MB)webmFull Size VP8 Video (42.3 MB)ogvFull Size Theora Video (38.9 MB) 7 Rules for Creating Gorgeous UI (Part 2) Rule 5: Make text pop— and un-pop Styling text to look beautiful and appropriate is often a matter of styling it in contrasting ways— for instance, larger but lighter. In my opinion, one of the hardest parts of creating a beautiful UI is styling text— and it’s certainly not for unfamiliarity with the options. If you’ve made it through grade school, you’ve probably used every method of calling attention to or away from text that we see: Size (bigger or smaller)Color (greater contrast or lesser; bright colors draw the eye)Font weight (bolder or thinner)Capitalization (lowercase, UPPERCASE, and Title Case)ItalicizationLetter spacing (or— fancy term alert— tracking!) There are a few other options that are possible for drawing your attention, but not particularly used or recommended: Underline. Up-pop and down-pop You can divide all the ways of styling text into two groups: Styles that increase visibility of the text. Lots of up-pop going on with the “Material Design” title.

UX for Mobile: The Rise of Fat-Finger Design We already know that users are turning to mobile for all kinds of needs: from simple-search to shopping, to the use of financial apps. And we also know that mobile-friendly websites are better ranked. But at the beginning of 2018, Google announced the mobile-first indexing since a lot of user searches are made on a mobile device. And if you have any doubt about it, Statista clearly shows that the global digital population as of July 2018 is 4.1 billion, from which 3.8 billion are uniquely mobile internet users. It’s estimated that this population will grow to 4.78 billion until 2020. Where to Begin First things first. Context Matters Whenever you are designing you should keep in mind the user context, and there are many layers to it. Responsive? Mobile can be developed in many ways so you must decide if it is a responsive website, adaptive, a native app, or a hybrid app. The choice is yours, just make sure that you are careful about conventions. Be Fat-Finger Friendly Navigation Is Key Forms

Brakeman - Rails Security Scanner Build Your Own Adobe Creative Suite with Free and Cheap Software Design for Fingers, Touch, and People, Part 1 Capacitive Touch Now, in 2017, when someone talks about touchscreens, they mean capacitive touch. This is the type of touchscreen on all mobile phones, tablets, entertainment systems, cars, kiosks, and increasingly, other small devices that are currently in production. Capacitive touch uses the electrical properties of the body. That’s why it doesn’t work with any old pen as a stylus, when wearing gloves, or even when your skin is too dry. While high-resolution detectors exist, they are used only for special devices such as fingerprint sensors. This is not a perfect system. A few years ago, Motorola put a handful of devices in a little jig, so they could robotically control the pressure, angle, and speed of touch sensing precisely. While the irregular spacing of the lines in Figure 3 is my fault—I’m not a robot—the other issues demonstrate the limits of the touchscreen. Size, Pressure, and Contact Patches Obsolete Standards The ISO is not the only group promoting obsolete standards.

scottjehl/picturefill How do I recreate this color overlay layer effect in Photoshop? Original image Add a layer for your color and put it under your image. Then use the blending mode "Luminosity" on that image. You can change the background color you want without changing the main picture. Select your image layer, and go in the menu "Image", then select "Adjustment" and then "Desaturate." Add a new layer with a color on top of that image and set it to the blending mode "Color." To add a more dramatic effect, you put the color image on top of these 2 layers and use the "Overlay" blending mode at 60% transparency. Use the color mode "Duotone." Fist set your image to grayscale mode, then Duotone mode in the menu "image/mode." Then in the Duotone menu, you can choose 1-2-3-4 colors and mix them together. If you need to keep this to print in spot colors or Pantone, you can save the image in EPS and leave it in Duotone mode.

Design for Fingers, Touch, and People, Part 2 Few people hold their phone with two hands and two thumbs on the screen. At least, they don’t usually hold their phone that way. But people shift their grip when typing, and 41% of users hold their phone with both hands and tap using their thumbs when typing. Summary Design for every user and every type and size of phone.Design for the variable ways in which people work with their devices, not just one way.Set aside your biases. Don’t assume everyone has your phone or uses it in the same way you do. 2. Regardless of the type of touchscreen device, people prefer to touch the center of the screen. I set up a study that let users move the content to the position on the screen where they naturally wanted it to be. Therefore, key clickable items should not be along the edges, but in the center of the screen. This explains both why list designs work so well, as well as why Google’s Material Design—which brings function buttons away from the edge of the screen—is a good design solution. 3. 4. 5.

Vertically Center Multi-Lined Text If you only have a single word or a single line of text, there is a clever way to vertically center it in a block with CSS. You set the line-height of that text to be equal to the height of the box. Works great, but is a major fail if that text needs to wrap. A "speech bubble" is a classic example of somewhere we might want text to be centered both horizontally and vertically and be adaptable to multiple lines. View Demo Download Files The HTML is nothing fancy. <div class="area"><div class="bubble"><p>To look best, text should really be centered inside this bubble both vertically and horizontally. The "bubble" we'll set to display: table;, which really doesn't do much by itself, but then we can set the <p> element inside to be a table-cell, which allows us to use the vertical-align property on it. Does the trick beautifully I think. What about IE <= 7 ?! IE 8 is supporting CSS tables, but IE 7 and below do not. ... could be worse. First wrap the inside <p> in a new <div> and then: Share On