Visual UI Design – Day 4: Chat Window

by An. 0 Comments

(Realizing that one deliverable a day is a tad ambitious, especially if I intend to move onto more complex interfaces. I’m gonna allow myself more than a single day to work on a deliverable if needed — but still have to end up with 30 to show.)

I ran out of exercises from Flyosity, so no more training wheels. Time to dissect free PSDs.

There’s no shortage of resources to download high quality PSDs:

Galleries: 365psd | Design Kindle | Design Moo | Premium Pixels | Icon Deposit | Free UI Kits
People: Sebastien Gabriel | Jeremy Sallee | Blaz Robar

And of course, Dribbble.

I chose to replicate the following Chat Window from 365psd. (source)

Process

Here’s my method of dissecting and learning from a free PSD:

1) Visualize the core, underlying structural components that make up the overall design
Is that container actually composed of two rectangles? Which shape sits on which? In this case, it looked like a white rounded rectangle made up the base. Then the left sidebar over it, then the top menu bar.

2) Hide all layers except for the main components – check if guess is correct and begin replicating
This is straightforward, as main components are usually just layers of differently sized rectangles.

3) If something appears to have a Layer Effect or is more than just a solid shape, try guessing which layer effects are used, and the approximate settings for each
 After going through just the three Flyosity tutorials for Days 1-3, I’m finding that it’s surprisingly not hard to accurately tell when a 90 degree 1px white drop shadow + 90 degree black 1 px inner shadow with ~60% opacity is being used. I used to just toggle the settings until the design looked about right, or obediently filled in the same settings when following tutorials, so I never really understood how they worked. But it’s quite easy once you do take the time to find out. Will explain in a future post.

4) Apply the assumed effect settings, look at the actual settings, then apply those manually
At this point, I’m usually still off by a setting or two, so the element will obviously not look right. I’ll check the PSD to see how the creator did it, then manually apply the settings to my version. It’s tempting to just use the Copy Layer Style option, but actually adjusting the changes helps reinforce the learning even if you’re entering in exactly what’s in the original PSD.

5) Notice discrepancies, however small
Sometimes, even when I think I recreated an element exactly, it’ll look a bit off. My version will have blurrier edges or an extra pixel line of pixel. Usually this happens with shapes (or anything other than Layer Effects), as you can’t actually see from the PSD how the creator created the shape. I’ll either search online for a reason or double check settings until I figure out what’s going on. This is making me understand the term ‘pixel perfection’.

6) Keep layers organized and appropriately named
Good ‘free PSD creators’ usually have their layers named and neatly grouped, but a few layers slip through. Ensuring that layers are organized while going through saves a lot of time later on.

Right-clicking the layer visibility (eye) icon also allows you to color code layers, which is a useful way to further organize or instantly make certain layers distinct. This is the first time I’ve used layer colors – I used red to mark major sections (the messages, contact list) and yellow to mark smaller elements (buttons). Will be thinking of other ways to make use of the colors.

The Result
I took a few liberties with the content (selecting the contacts displayed from people I follow on Twitter), and I didn’t replicate the mini top bar icons as I’m not concerning myself with specific shape creation yet. I’ll also admit I wasn’t entirely pixel perfect on the top left window buttons, so they don’t have the same healthy glow.

Takeaway Tips

  • Clipping Mask - Hold Option/Alt and click between two layers
    I can’t believe I’ve never made use of this. A non-destructive way of bounding a layer to the shape of another.

    Article: Elated – Creating and Using Photoshop’s Clipping Masks

    For example, instead of drawing a rounded rectangle top bar that exactly fitted the width of the chat window, then converting the bottom corners to straight edges, I could quickly draw a bar without carrying about its width, then have use a clipping mask to have it fit the shape of the window layer:

  • Smart Objects – A photoshop document within a layer; change all objects with one layer
    Another highly useful feature I can’t believe I never tried. Any time you need to duplicate an element and use it multiple times in one document, use Smart Objects. It allows you to make changes to just one element and have the duplicates be automatically updated.

    Article: Elated – Working with Smart Objects in Photoshop

  • Sharp vs. Crisp Anti-Aliasing (Text)
    I couldn’t figure out why my text looked blurrier than the original. Then I noticed my anti-aliasing setting was set to Sharp, whereas the original had it at Crisp. I still don’t entirely know the nuances of the different anti-aliasing methods, but this helped for now:

    Article: Smashing Magazine – The Ails of Typographic Anti-Aliasing



    Sharp Anti-Aliasing

    Crisp Anti-Aliasing

Visual UI Design – Day 1: Mac Tweet Window

by An. 0 Comments

There are tons of step-by-step Photoshop tutorials out there, but not many explain the approach/reasons for using certain settings and Layer Styles, especially for the purposes of UI design.

One of the few gems I’ve found is Mike Rundle’s blog, Flyosity, where he sometimes breaks down the underlying concepts of interface design in pixel detail. Here are a couple of those great posts I highly recommend:

I usually abstain from buying tutorials or how-to eBooks (unless it’s one of those official ones, say, published by O’Reilly) but I readily gave up six future cups of coffee for his 30-paged Design Then Code: Lighting & Realism in Interface Design PDF guide after getting a sense of the quality and helpfulness of his posts on the topic.

The first (out of three) tutorials in the guide walks through recreating the tweet window for the Mac Twitter app and explains why each step is being taken and its effect on the design. Good mix of theory and how-to. There were a few areas where I needed more clarification and emailed Mike about. Mike responded promptly and thoroughly to my questions, so that was rather awesome of him.

In the future, I’ll share more about my process and what I learned from creating the UI element of the day, but since this was paid content, I don’t want to give away what was in the guide.

The Results

Here’s the original:



And here’s my replication (not the right dimensions, but that wasn’t the point):



Small exercise, but it helped me start to get a better idea of how to adjust Drop/Inner Shadows, Strokes, Gradient Overlays, and Inner/Outer Glows together for an overall effect. I knew what each did before, but never really knew what to do with the specific settings.

Takeaway Tips

Some key learnings from the blog posts and this tutorial (they seem obvious now, but I hadn’t realized them before)

  • Text always either sits on top (90 degree drop shadow) or is set in (-90 degree drop shadow) the surface it’s on
  • Always ask where the global light source is
  • Every element should have some sort of gradient or shadow (even the stroke itself)

It’s pretty cool that just with a bit more attention to detail and a slightly better understanding of Photoshop tools, you can create something neat like this.

30 Days of Visual UI Design Practice

by An. 0 Comments

I consider myself decent at Photoshop, but readily admit that I’ve barely scratched the surface of its capabilities and have only a basic understanding of all the tools. As a result, most of my design work thus far have been very 2D and flat. Which is enough for the most part, but I’d like to be able to create more subtle, realistic application interfaces, and eventually design for mobile.

So for 30 days, I’m going to work specifically on improving my visual UI design skills. I’m focusing on the the actual creation of the visual interface elements in Photoshop (maybe Illustrator for icons), and not the behavioral UX considerations just yet. The latter might come towards the end depending on the progress I make, but the goal at hand is to advance my Photoshop ability and learn how to create the types of interfaces found on UI Parade and mobile apps in general. Essentially, the look associated with skeuomorphic designs.

Mike Rundle captures my goal exactly in the intro of his Design Then Code guide:

Designing great user interfaces is an art form but there are real, concrete methods by which pixels are pushed and realistic interfaces are created. Poor designers slap together gradients and drop shadows, but true interface craftsmen understand why techniques are used and how to create textured, realistic widgets that appear to jump off the screen…how to craft beautiful interface widgets in Photoshop, and the theory behind the design techniques.

The 30 Days

A deliverable will be shared here every day for 30 days.

Days 1-20: The first 20 days will consist of following tutorials and recreating existing interfaces. These can be icons, shots I like on Dribbble, iOS apps – basically trying to replicate great work; nothing original.

Days 21-30: The last 10 days is where I create my own UIs. More about that when Day 21 draws closer.

I’m doing this because I’m realizing that I accomplish my goals best when I specify a number I can realistically and consistently hold to, while having them still be a challenge (e.g. ‘Read three books a month’). This is meant to be 30 straight days, but I already foresee having to excuse myself on upcoming days where I’ll be at all-day events, so really, it’s as many days in a row as possible until I reach 30 days. The point is to keep myself practicing consistently.