Shift Nudge - Interface Design Course - Pro - Style

Style is the physical manifestation of all of the foundational elements. You can dictate style an any number of ways to create certain looks. This will breakdown the different ways to do it.

Design Direction

https://www.instagram.com/p/CANq9dlFKNR/?igshid=4t9aa0mk7x0f

Design direction is the why and the how mixed together.

Typography, Layout, and Color are essential to nail down from a fundamental perspective, but when you mix Style and direction into those ingredients, that’s when design becomes magical.

It’s hard to prescribe magic. You just have to see it.

The direction is a filter for making design decisions.

The direction determines the concept and the design implements that concept.

There’s nothing wrong with NOT having a mind-blowing, earth-shattering, concept that has extremely deep metaphors and easter eggs.

BUT, not having at least “some” direction will lead you down a path of confusion, flip-flopping, and poor decision making.

You need some type of vision for the end product and a lot of times that only becomes really clear once you’ve begun the experimentation process.

Super simple design direction

If the design process is going from point A to point B, then design direction (or art direction) is literally the instructions for how to proceed on your route.

A large portion of your expirementation in the early parts of your project is nailing down your “direction.” This is where you translate everything you know about a project into a visual language. This where you take inspiration and blend it into the boundaries provided by the product.

Really spend enough time thinking through your overall “direction.” Vet it with stakeholders, get buy in, and fine tune as you go. Always keep the direction as a beacon to follow when you hit sticky design decisions.


Deciding on a “direction” can save you tons of time

  • Art direction defines the design path from point A to point B
  • Keeps you from getting derailed in the details
  • Keeps you on track
  • Keeps you from flip flopping on your design decisions
  • Keeps you from seeing something on dribbble and questioning your value as a designer (not that I’ve ever done that…)

Progression of the Shift Nudge brand and icon set through tons of experimentation


Homework


Design a 2 product cards. One for selling a pack of kids crayons and one for selling a high-end fountain pen. Feel free to use a dribbble-sized shot with single floating module, or any other form you’d like to experiment with. Use the exact same format for both products, but really focus on the conceptual direction with the help of the beginning adjectives…

Crayons

  • Adjectives: fun, friendly, playful, happy
  • Image (or image gallery)
  • 2-3 sentence description
  • Add to Cart button

Fountain Pens

  • Adjectives: sharp, elegant, premium, classy
  • Image (or image gallery)
  • 2-3 sentence description
  • Add to Cart button

Subtlety is Key

Being subtle is paying extreme attention to detail.

Something that is subtle is not obvious: a professional food taster might be able to perceive subtle differences of flavor that most people don’t notice. Subtle is used for things that are hard to describe because of their complexity or delicacy: a way of thinking, arguing, or creating a work of art.

“Elements of Typographic Style,” a book by Robert Bringhurst.

…a (type) face of modest merits should be handled with great discretion, formality, and care. It should be set in modest sizes (better yet, in one size only) with the caps well spaced, the lines well leaded, and the lower case well fitted and modestly kerned. The line length should be optimal and the page impeccably proportioned. In short, the typography should be richly and superbly ordinary, so that attention is drawn to the quality of the composition, not to the individual letterforms.

subtle | ˈsədl | adjective

  • (especially of a change or distinction) so delicate or precise as to be difficult to analyze or describe: his language expresses rich and subtle meanings
  • (of a mixture or effect) delicately complex and understated: subtle lighting
  • making use of clever and indirect methods to achieve something: he tried a more subtle approach
  • capable of making fine distinctions: a subtle mind
  • arranged in an ingenious and elaborate way.
  • archaic: crafty; cunning.

Subtlety in the details of your design provides a connection between your interface and the end-user. You can take all the things you know about a potential user, the goals of the business, and more… and can subtly craft an interface that matches those desired outcomes.

Being subtle is like a tiny flex in your designs that make things really come together without getting on stage and posing. We don’t want the UI to be the attention, we want to support the action the user is or should be taking.

Pay special attention to things that taken out of context may seem inconsequential.

  • Button radius
  • That special hex code color on the perfect background
  • The subtle inner and drop shadows on a button
  • The slight glow that appears when an interactive element is hovered.
  • The subtle animated shift on Spotify’s header as you scroll through an artists page
  • Subtle lines and artistic elements added to a design (eddie on dribbble?)
  • Changing the color of the cursor when a different text color is chosen (Figma)
  • The subtle differences of style a 1px vs 4px gap of space can make (Cinesampler)
  • The subtle shadow and color changes on the on/off toggle in iOS
  • The subtle increase of drop shadow opacity and the slight raise in Y coordinate on stripe.com’s CTAs
  • The subtle change of left, right, center alignment on stripe.com’s page
  • The subtle animation of the iOS 11 Pro camera to video record animation https://www.apple.com/iphone-11-pro/

Subtlety is like goldilocks poorige—not too hot, not too cold, but just right

Most “styling” in interface design will come in the from the addition of color, drop shadows, inners shadows, glows, strokes, and more.

It’s very important to get the fundamentals aspects of your design in a good place, because adding effects to your buttons or headers will not fix bad design.

Homework


No specific design homework, just begin to train your design-eye to notice subtle details in the everyday things around you. :eyes:

Corner Radius

As simple as corner radius sounds, this is a big determining factor of the overall look and feel of your interface design.

The little detail of the corner radius on your UI elements will add big perception for a specific feel of your app.

It might go slightly unnoticed by a user, but it’s cummulative impact in combination with all other pieces of attention to detail will be very high.

  • know the specturm of sharp and elegant to fun and friendly
  • know the corner radius mathematical rule
  • know that one corner radius doesn’t need to apply to every single element or button
  • choose and explore different corner radius options
  • figure out what corner radius any app is using (inspector or redrawing)

From Sharp to Fully Rounded

  • Sharp—Classy, Elegant, Corporate, Crisp

    Uber, ExxonMobil, ZPPR

  • Rounded slightly—Softer, Startup, Safe, Friendly, Utilitarian

    SmartLine, Stripe.com, Shiplify, MyMonero, Contrast

  • Rounded even more, Pills—Super friendly, Organic, Easy, Soft, Young, Fresh

    FibreStream, Cinesampler, Flowkit, Steady

  • Non-traditional—Heavily branded, Non-traditional, Different

    Fortnite, Dr. Phillips Center

  • Circle buttons – use only for simple actions (radio button selection, closing modals or overlays, etc.)

https://www.figma.com/file/ybCPqmxihWjCo3gMcxyLDq/Style-%E2%80%93-Corner-Radius?node-id=0%3A1

Homework


Design an app login in a modal overlay.

Include the following:

  • Some type of background color (off-white, grey, gradient, patternor imagery)
  • Structural modal within a container (mobile or dribbble shot size)
  • Fake logo
  • Title (Log In or Sign In)
  • Input fields (make them a full box not just an underline)
    • Email
    • Password
  • Forgot Password link
  • CTA for logging in or signing in
  • Small text below “Haven’t signed up yet? Create an account.”

Focus on the following corner radius options:

  • The card modal corner radius
  • The input field radius (make it a box not a line)
  • The CTA button radius

Try different modal structures with dropshadows and slightly darker backgrounds.

Match the CTA button radius with the corner radius on the cards themselves.

Borders & Dividers

Borders and dividers are going to be another one of those small individual details that add up to make a big difference to the overal visual impact of your designs.

They can be used in a variety of ways and it may be tempting to use them to separate everything, but make sure you resist that tempation, because it’s very easy for an interface to become super busy and crowded with borders.

  • most dividers should be very subtle
  • if you can use negative space instead, definitely consider that instead
  • borders on buttons, or solid shapes?
  • overuse of borders can make things feel dated and old
  • consider removing/hiding border on rollover or selection—borders might clash with your highlighted state.

https://www.figma.com/file/CVmv4FhOk34Q6RoZrxC8bx/Style-%E2%80%93-Borders-Dividers?node-id=0%3A1

Here’s a good twitter thread about how design tools treat borders, shadows, etc.

https://twitter.com/Treggify/status/1297038650715168768?s=20

Homework


Design a mobile screen with a “favorite” or “curated” list of contacts with 5-10 people. It can people you actually know or a list of characters from The Office, etc. you decide.

One contact should contain:

  • A profile photo
  • A name
  • A description of the contact [Mobile phone, Message, etc.] Use an icon as well if you’d like

Create different artboards for each variation of the design using…

  • .5px borders
  • 1px borders
  • 2px borders
  • 4px borders (the large you go, you’ll need to go lighter with the color so it’s not too visually heavy)

Now try the same design with no dividers whatsoever, except for the negative space measurement between the elements.

Now try to apply your favorite version of design to a larger “contacts” screen where there are 5-7 people who start with the letter A, then B, then C, and so on.

You only need to show 3-4 sections to get the idea going.

Depth, Lighting & Shadow

Really interesting article on light source and shadows


https://ciechanow.ski/lights-and-shadows/

Depth, Lighting, and Shadow

There are sometimes when you may need to create some type of environment of your interface. It might be subtle or it maybe completely overt.

Either way the rules are the same.

Your light source should always effect your interface elements in a consistent way.

The most ubiquitous light source is the sun and possibly overhead indoor lighting.

In both examples we tend to experience light coming from above.

This might not be true for sunrise or sunset, but let’s leave those as outliers for now, while we explore the more fundamental principle of light coming from the top.

Depth and lighting will only come into play, depending on the style of your designs and the amount of depth you’d like to show.

Practical usage

  • Environmental gradients might tend to work better by having a darker color at the top and a lighter color on the bottom, so it more closely resembles a blue sky.
  • Gradients have a little more flexibility in interface design, because they can be used as a splash of color, vs. creating a realistic environment. Plus we see all types of random gradients throughout the day, with tons of different light sources. We accept this naturally because it occurs all over.
  • Buttons (refer to Figma file)

How to deconstruct any button or 3-dimensional object you come across.

  • Determine color gradient
  • Pay close attention to highlights and shadows
  • Look for a border (is it there? is is a solid color or a gradient?)

Lighter in color typically means closer to you on the Z-axis. Darker is further away.

Light sources

  • Lower shadow (sun on horizon, longer shadows)
  • Top down shadow (creates a darker more prounounced shadow)

Shadow Syntax

Most design tools have the following properties associated with drop shadows and inner shadows.

X Y Blur Spread

  • A positive X value will make the shadow go to the right (a negative value will go left)
  • A postive Y value will make the shadow do down (a negative value will go up)
  • The blur value will determine how many pixels to blur the shadow show example
  • Spread (a common value in CSS) will spread the blur values from the edge to the edge of the blur value. Note: feature currently available in Figma

As a general rule for dropshadows. Try to keep a 1:2 ratio for Y:Blur. So at it’s smallest, try a 1px Y value with a 2px blur at like 10-20% black on a light background as a starting point. This is a mere starting point. You are the designer and you can tweak these values until you’re satisfied.

Often times, inner shadows might just be a 1px value (sketch example of white button on grey background vs. an orange or colorful button) shadows, etc.

  • white inner shadow set to 10% opacity (pay attention to background color and button color to finalize the % to use)

https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FU6fkbfM4ZKob2f5KE3CJfiRb%2FDepth%3Fnode-id%3D0%253A1

Homework


Create a variety of buttons on a light and dark backgrounds

  • Flat button
  • Raised button
  • Floating button
  • Indented/Pressed button
  • Hovered button

See how subtle you can go with a highlight and a shadow before you can’t see it. Set the value of the opacity right at that moment where it’s barely visible.

Opacity & Blur

Overlays are great for keeping context within a UI. You can get away with a big juxtapostion of style, or you can keep it more minimal. It’s up to you.

Opportunities for overlay styles

  • Pop-over modals that require user action
  • Dropdown menu items

→ When to consider opacity

  • avatar borders
  • dividers, etc. that sit on top of gradients
  • background overlays
  • hover to reveal
  • map controls
  • any floating elements

→ iOS Blur Background (figma, sketch, XD)

  • Blurs in title bars and nav bars
  • Blurs in buttons
  • iOS native blur vs. web blur
  • modals

https://www.figma.com/file/YSVyK04Bpihi0nqgNZb2BF/Opacity-and-Blur?node-id=0%3A1

Homework


Design an alert modal. Something like…

Inside the modal…

  • Your avatar (profile picture) with a slight opacity border (not too light, not too dark)
  • “Hey there, would you like to learn more about opacity?” — Title
  • Maybe later — secondary cta
  • Yes, please! — primary cta
  • Experiment with a solid color modal background and with like 90% opacity background.

Use opacity on the border of your avatar and test it as well with a dark and light photo, as well as a few others for good measure. Try to get 4-5 different types of photos to test with.

Behind the modal…

  • Title: “Opacity”
  • Body: search wikipedia for opacity or search the web for lorem ipsum. Doesn’t really matter as long as a decently nice background is present.
  • CTA: “Learn more about opacity”

Create a full screen rectangle (full width and full height) to go over the background and under the modal.

  • Experiment with black at 80% or so
  • Experiment with white at 80% or so
  • Experiment with a saturated color at 80% or so

Experiment with Background Blur

Duplicate everything and now experiment with different values of an additional background blur.

Note: You’ll need to adjust your opacity and blur amount to get the proper desired effect.

Deconstructing Styles

https://www.figma.com/file/jvIYAH7n264LLyAf1ANV91/Deconstruction?node-id=0%3A1

Homework


Pull 2 or 3 different designs that you really find interesting and try to deconstruct how they’re created by following some of the same techniques shown in the videos above.

Button Styles

Button style can dramatically affect the art direction of your interface.

  • sharp crisp, no rounded edges—hard and sharp. can look modern if used correctly, but can also easily seem unfinished or uneccessarily harsh.
  • slightly rounded-1-12px or rounded edges. most common in UI design at large. has a friendly feel to it. Quite literally takes the edge off. It’s safe in the real world (think coffee table or the edge of a glass) and it’s also safe on the web
  • fully rounded or pill-shaped: super duper friendly and also gaining lots more traction in the design world,
  • text only buttons: make sure you have enough differentation with the rest of UI and consider differnet types of decoration. super subtle backgrounds, underlines, combination of icons
  • icon-only buttons: these can be tricky and make sure you use them sparingly. icon-only presents several challenges, but the main one is that they can be too abstract. they can be confusing

https://www.figma.com/file/uOWI0vbjIFDln4labrKCXc/Button-Styles?node-id=0%3A1

Homework


Design a small card that will serve as a mini-style guide for a family of buttons. Choose any typography or color scheme you want to use.

Card should include

  • Title (button styles or any kind of interesting theme name you can come up with)
  • You avatar and a byline “mini-style guide by [your name]”
  • Body copy

Save (primary)

  • Sort / Filter / Cancel (secondary)
  • Dropdown with a down arrow Select... ▼
  • Close (secondary icon only (x))
  • Edit (text only button, underline or different color)
  • Delete

Create a secondary screen using your defined styles for title, primary, and secondary

Are you sure you’d like to delete this? This action cannot be undone

  • Delete (primary)
  • Cancel (secondary)

Marketing Site Style

Style is an indefinable quality that makes something distinctive or attractive

An indefinable quality that makes something distinctive or attractive

Duplicate and iterate. Get feedback without worrying about praise (as much as you can help it)

Pay special consideration to small elements of style when you’re working on your interface. Afterall the whole is only a sum of all its parts.

  • Little hashmarks
  • Small icons
  • Arrows and what type of shapes they need
  • Play buttons
  • Corner radius
  • Small patterns
  • Margin and padding
  • Tweak, tweak, tweak
  • Experiment and expirement some more

Accents and decorations can add a little “oomph” to your designs. If you think about someones clothes, the accents and decorations are like the accessories—Hat, glasses, watch, socks, belt, necklace, etc.

These things on their own are not going to make the design looks good, but the can really take things to the next level—especially if they’re incorporated early on and not just tacked on.

  • dashed circles around cutout imagery
  • lots of playful varied-sized circles, some with texture some without
  • strong theme of circles and dotted lines without being too distracting

  • little squiggly lines overlayed a light circle

  • squiggly lines behind a cutout photo

Define your Interactive accents and your Non-interactive accents. Otherwise it will be very confusing what is what.

Your creating a system and each part of the system has inherit meaning. Don’t put present anything on the screen that doesn’t have a specific and thought out role.

Form vs. Function

Interfaces exist as a tool to help someone do what they need to do. Those tools aren’t going to be very useful if they don’t function properly.

So when you hear the term form vs. function, it really means how it looks vs. how it works. The absolute best product whether in the real world or the digital world is going to be the one the looks and functions amazingly well.

BUT, the subtle difference between the two that I want to stress the most…

Err on the side of function as a default.

Function is a reflection of requirement or purpose of the design which comes from human needs and wants.

In his 1896 article “The Tall Office Building Artistically Considered”, Sullivan wrote:

“Whether it be the sweeping eagle in his flight, or the open apple-blossom, the toiling work-horse, the blithe swan, the branching oak, the winding stream at its base, the drifting clouds, over all the coursing sun, form ever follows function, and this is the law. Where function does not change, form does not change…It is the pervading law of all things organic and inorganic, of all things physical and metaphysical, of all things human and all things superhuman, of all true manifestations of the head, of the heart, of the soul, that the life is recognizable in its expression, that form ever follows function. This is the law.”

I’m not definitely stating that form (look and feel) should always play second fiddle. I just want to stress that function should be an equal if not greater primary target for you designs.

If it looks great but doesn’t work, then no one will use it. If it looks bad, but is perfectly functional, it will still get use.

(my wife’s van is like 15 years old and has 200k miles on it. It does not look great, but we have small kids who like spilling things everwhere and writing on the seats with pen. the van is highly functional. the form is lacking)

But we are currently willing to make that trade-off based on the context of our day to day experience.

When there is a descrepancy between form and function, do your best to make function and ease of use your primary objective.

There will always be things you like and don’t like, which will get reflected in your designs. it’s totally OK and encouraged(!) to put your personal style in your designs. Just make sure that you aren’t designing for design-sake alone. Make sure you’re accomodating the final user as best as possible.

Homework


No physical thoughts to ponder here other than drilling in this mindset…

It’s your job as the designer to hold this delicate balance between form and function.

The best products will work really well and look amazing.

There is room to flex on form (vs. function) in things like marketing pages, graphics, etc. but even then, the function of these nice forms is to entice and persuade with beauty.

When it comes to interactivity, function plays a heavier role, but the better the form and function are merged as one, the better the experience will be overall.

Design is not just what it looks like and feels like. Design is how it works.—Steve Jobs

This course is fully owned by Studio MDS, LLC. It has been stolen and illegally uploaded (partially). A DMCA prosecution and takedown is underway. This is a clear violation of Section 5 of the terms of service shiftnudge dot com/terms.