Published on | Prototyping: From UX to Front End — Medium Cuberto

A designer typically has a long stream of projects, each demanding innovative and imaginative solutions. How to keep up and keep sane? You need a balanced approach.

Traditionally, there’s a distinction between UX and UI.

UX is all about collecting data about the brand, product, client, designing the user interface, and is generally a process totally aligned with rational, left-brain activity. Here, everything gets resolved with logic. This development stage gets plenty of airtime in articles, conferences, and courses which, in a mere 16 weeks, can transform you into a certified UX specialist. All of this is great.

But I want to touch on something else, something about which there’s very little information floating around: the visual design. For a long time, I asked myself how to explain UI and how to become a badass designer. In most cases, it’s not at all straightforward. During conferences, designers are talking about the “look and feel” and other total abstractions, so it’s hard to understand how to attain elite status in the world of UI. That’s why we decided to map out our many years of experience and highlight the fundamentals of making headway in UI.

You’re using the wrong tools

You begin your designing career by mastering Photoshop, Illustrator, Sketch, and other tools to build your portfolio and get your foot in the door at a studio or agency. You’re told that what’s expected of you is a beautiful, high-end layout. This results in a skewed perception. You begin to think that your primary job is to shuffle pixels, edit photos, select fonts. Partly, yes. But that’s just the tip of the iceberg.

There’s lots of discussion about the pros and convenience of Figma, Sketch, InVision Studio, and so forth, but it’s all subjective.

Think about it: text editors are game-changers that have an edge on graphic editors when it comes to power.

You can type and delete anything instantly, develop a plan, build connections, and delineate all those ideas into which you’ll eventually breathe life with the help of graphics. We believe that at the conception stage, 80% of your time should be devoted to text editors, and only 20% to graphics.

Text editors can also involve paper and handwriting, but that’s a personal preference. Every designer’s desk should have a clean sheet of paper and before diving in, it’s essential to trace out the task’s outline, main themes, and throw together a quick sketch, whether it’s the complete future interface or just a doodle for an icon.

While a designer doesn’t have to be an artist, it’s a no-brainer that being able to visualize ideas on paper is vital. With the aid of paper, you’ll clear your head and get a handle on what’s going to happen with the graphics editor.

Brainstorm

Yet another underrated method for designers immersed in creative work. It’s super helpful if your team has the awesome habit of putting your heads together and chatting about projects. While one set of eyes is good, two is undeniably better. Here’s how we organize our brainstorm sessions:

Flesh out the objective. At the outset, your goal should be crystal clear.
Generating ideas. The pivotal stage on which your entire brainstorm depends. Flip the off-switch on critical thinking. Now is the time to run with unusual, absurd ideas. Nothing is off-limits. Jot it all down.
Grouping, selecting, and evaluating ideas. Methods of analysis and evaluation vary. Challenges and technical limitations are a prime jumping-off point.

Here, it’s important to chill out, disengage from anything unnecessary, and make note of every idea that pops into your head without getting stuck in the details of how on earth it’s going to work. Get your hippie on and open up to any associations, connections, and feelings.

Inspiration

The inspiration stage is just the beginning. It’s also that subtle something that will define the aesthetics and feel of your finished product. The first step is putting together a mood board and visual cues.

This is when you collect relevant, themed references, tossing out everything you don’t need. It’s a skill that evolves with time and immersion into what’s trending. It helps refine your taste, so you can kick off your own trends later. There are some rare instances when it’s just in your DNA, but if it’s not, don’t sweat it. An eye for beauty comes with experience.

There are those skeptics who call this stage stealing or copying. They’re wrong. If you’re going to build an interface, you don’t have to only rely on interfaces for inspiration. You can search for stimulation in related places, like graphic design. A clever pattern or piece of architecture can spark the vision for the form and construction of your future interface. You can even seek your muse in nature, whose shapes are always ideal. Do your thing, but it’s important to discover the elusive feelings you want to communicate through design. Don’t collect an entire album of references and take a little bit from everywhere. Approach it with a sixth sense. I suggest spending at least half a day or even an entire day pursuing the unique style syntax of your future product. No project gets off the ground without this distillation phase.

Thinking in concepts

The difference between a novice designer and an expert? The newbie gets attached to a design and becomes discouraged when it doesn’t get the green light and he has to kiss all that effort goodbye. Seasoned designers don’t get hung up on one version, developing multiple iterations before hitting on the perfect one.

Be bold and build several vision boards, trying out different stylistic approaches. Come up with as many variations as possible. The same task can have several different iterations. Remember that at the conception stage, you’re better off with 10 half-baked versions than a single complete one. After you’ve poured 2–3 days of blood, sweat, and tears into just one screen and sent it out for review, hearing the client’s or art director’s rejection is brutal. Your energies will be completely depleted. It’s smarter to choose from multiple iterations and then test it out, to get an idea of which version to proceed with.

Presentation

When working on visual style, we usually rely on 2–3 example screens (if you make more, you’re risking wasted time in case of rejection). Then we send it to the client for review. If you have an idea in mind for animating your interface and how to show the interaction between screens, don’t be lazy. Go ahead and demonstrate your concept. It’ll be much more understandable and effective if you don’t have to explain to your client, either verbally or in writing, how the interfaces are supposed to be interacting.

The visual component is major for clients, and a static image won’t do anything to shed light on interactivity. That’s why the second most important thing is tactile experience. A dynamic interface gives the client some idea of what that’s going to be like. Here at Cuberto, we frequently send concepts in animated form and attach a static mockup, especially when dealing with sites.

Cuberto sets the trend in creative websites and mobile apps. We dare what others don’t. info@cuberto.com

Follow us on Dribbble and Instagram

To Sketch or Not to Sketch? Design Process. was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

To Sketch or Not to Sketch? Design Process.

Cool stuff, every week

More Articles