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? An Easy Guide To HSL Color In CSS3 Cet article est également disponible en français The CSS3 HSL color method is well-supported in modern browsers but somewhat neglected by coders, partly due to the fact that HSL is quite different from alternative CSS color models: It’s easy to translate from hexadecimal to RGB color codes, but difficult to translate from those color models into HSL. Hex and RGB PhotoShop color values can be directly transferred to your CSS, but PhotoShop’s HSB color model is not the same thing as HSL. HSL doesn’t give you a greater gamut: it works in the same color range as hex and RGB. Despite these restrictions, HSL is very much preferred by designers, and I’m about to show you why. First, you need a new mental model for color. Starting at the top of the wheel and moving clockwise, we proceed through the rainbow hues you recall from school: ROY G BIV. So the first component of HSL is easy: it’s a specification of how many degrees around on that wheel a particular color is.

#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

RepRapWiki RepRap is humanity's first general-purpose self-replicating manufacturing machine. RepRap takes the form of a free desktop 3D printer capable of printing plastic objects. Since many parts of RepRap are made from plastic and RepRap prints those parts, RepRap self-replicates by making a kit of itself - a kit that anyone can assemble given time and materials. It also means that - if you've got a RepRap - you can print lots of useful stuff, and you can print another RepRap for a friend... RepRap is about making self-replicating machines, and making them freely available for the benefit of everyone. Reprap.org is a community project, which means you are welcome to edit most pages on this site, or better yet, create new pages of your own. RepRap was the first of the low-cost 3D printers, and the RepRap Project started the open-source 3D printer revolution. RepRap was voted the most significant 3D-printed object in 2017. About | Development | Community | RepRap Machines | Resources | Policy

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.

Related: