UI Archives - LunarLincoln

Sep

Design Inspiration

200-2 Any strong project first begins with a strong set of tools. Tool #1: Your brain – filled with all those ideas, images, and skills. But my second set of tools in the digital design world are links. What? Yep. Links. Links to great articles. Links to great inspiration. Links to great resources. Below I’ve grouped some of my all-star links into the categories that compose the beginning stages of a design project. The basic building blocks if you will. Enjoy.

[separator type=”” size=”” icon=””]

Patterns and Arrangements

And by patterns I don’t mean background visual patterns like this or this, but user patterns. Should the fields have background? Should “forgot password” appear at the top or the bottom? Can I put 10 icons in the navigation bar (please don’t)? The most important question – What is the difference between iOS and Android in UI design?

Animations

An animation adds polish, delight, and energy to your app. More than just a spinning circle, an animation can make using an app a memorable experience instead of a series of colored squares you tap your finger on.

Some great resource for animations: Capptivate.co and UIGifs.com

Colors/Pairing

Do you want the app bright or dark? Medium blue or bright blue? But not corporate blue. Not ocean blue. You know a “bluey-blue”…
(╯°□°）╯︵ ┻━┻)

When you find yourself having this sort of conversation – hold the presses and go here: Kuler or here ColourLovers or here Coolors.

Style

You can take all three of the above categories and still build drastically different apps when you implement a “style“. Do you want modern and sleek? Bright and playful? Traditional and trustworthy? Each style elicits a different combination and selection of colors, textures, and placement. I like to get an overall idea of stylistic choices from the parents of design aggregation: Dribbble and Pinterest.

That rounds out my link-tastic high-level run down of starting a design process.
Go forth and make beautiful and wonderful things!

May

Pixel Pushing – Custom Drawing for iOS

The devices we carry in our pockets everyday are becoming increasingly complex and are able to capture and log more data than ever before. As a result, it is inevitable that in an upcoming meeting you will be asked to do the following:

“We want charts. Bar charts, line graphs, pie charts, lots of stats, a graph for every person, every place, every hashtag, every action – we want to show it all”…..”Oh, and wouldn’t it be cool if it animated into place too?”

Dust off your middle-school geometry folks, because today with Core Graphics we’re going to draw some graphs.

Watch Wiley’s Cocoaheads talk to learn everything you ever wanted to know (and some you didn’t) about Core Graphics

This talk covers the following:

UIView Properties
CALayer View Properties
UI Bezier Paths (Lines & Shapes)
IBDesignable
IBInspectable
Implicit & Explicit Animations

Or download the slide deck for the highlights.

[responsive_video link=”https://youtu.be/YEu9IgaUus0?t=9s”]

Nov

One Design to Rule Them All – Android’s Material Design

Google has debuted a new style guide for their recent OS – Lollipop. It is called Material Design and the internet is BLOWING UP with articles about this new guide. Well we’re about to jump on this bandwagon too and explain why this is such a big deal.

dogdoor The #1 problem Android has had since its creation is also it’s own selling point. Diversity. Many different phone manufacturers made many different phones and added their own “takes”, if you will, on the Android interface. Free market! Do what you want! Anything goes!

That sounds great, right? Right!?!

One person’s “diversity” is another persons “market fragmentation”. Alot of ugly, bloated, inconsistent interfaces were made. There are over 4,000 different phones to potentially design for! Every company wants to add their own bizarro system apps. See below:

Look at all that bloatware – plus Verizon – you’re using three different icon styles. wtf.

So, after almost a decade of Android phones – Google has taken a stand on their ever growing phone market.

Enter: Material Design.

So is this just a new, shiny band-aid on a giant over-designed problem? Actually – Google has done a wonderful job.

It incorporates the growing trend for flat design, but most importantly, it clearly and thoroughly addresses gestures, touch, and movement. As screens become larger, interactions are critical. Consistency across devices allow users to feel knowledgable and comfortable with ALL Android devices. Moving menu buttons or changing the direction screens swipe is the equivalent to putting your wallet in the wrong pocket. It’s just wrong, and leaves the user feeling disoriented.

Fortunately Material Design sets best-practices for all aspects of Android design and development. Google is already implementing it across all of their wide-reaching features – setting the example for others. I’m excited to see developers and manufacturers begin implementing these changes and can’t wait for a newer, cleaner Android (that doesn’t require me to root my phone). It’s beeeeyutiful.

Will this be a game changer for iOS design snobs? Open software outside of Apple’s restrictive app store PLUS beautiful interfaces? We’ll see.

PS. Wiley (who worships at the foot of the golden apple) believes I am being too optimistic about this new design spec. Rebuttal article is forthcoming.

PPS. Travis is very excited about the new elevation feature (DROP SHADOWS ZOMG) – (But I agree!!! Putting things underneath other things – what a novel idea).

Jul

Font-tastic

Similar to colors, font’s can make or break your design. It’s often the things that are the most subtle, that make the most impact.

Font selection, kerning, line height, style, these are all things you definitely should be thinking about. With the wonderful invention of FontFace, you no longer are limited to the standard web fonts.

Comic sans the whole site! Or don’t. Please don’t.

Or use this wonderful resource of “new” webfonts. Or convert one of your favorite fonts to a “webfont” with FontSquirrel (a font aggregator with great taste).

Now, I recognize I have a serious problem with fonts – similar to Pokemon, I feel, I’ve “gotta collect them all”. 52 body styles of Neutra? Bring it on! 100 different “handwriting fonts”? Why not? Fonts based purely on dingbats? Sh’yeah.

At the end of the day, though, less is more.
Build your app or website with no more than 3 fonts:

A display font (the fun/elaborate one for titles & big things)
A body font (basic serif or sans serif)
And maybe a third one for variation – pull quotes, sidebars, submenus, etc (another simple complementary serif/sans to pair with the body).

After selecting the “look” of your fonts, then you can get down the nitty-gritty – the “science of fonts” if you will. This article pretty much sums up the extremes you can go to, in creating the ideal font spacing, sizing, etc. Review it, think upon it, and go forth and make beautiful typography.