How to design a user interface

User interface design (UI) is vital in developing any digital product. A well-crafted UI enhances the aesthetic appeal and significantly improves user experience design (UX).

In fact, UI and UX design tend to work hand-in-hand, that's why it's often referred to as UI/UX design.

In this article, we'll focus on practical, actionable advice you can apply directly to your visual design process. We'll cover the key considerations and provide a step-by-step tutorial using the tools available on Linearity Curve.

By the end of this article, you'll be equipped to design beautiful user interfaces for different screen sizes that are both user-friendly and effective.

Understand UI design principles and guidelines

We asked Yash Arora, Senior Product Designer at Linearity, about the user interface design principles he follows to create our amazing Linearity products.

"While there are no strict rules, since UI design is very nuanced, we follow some guiding principles."—Yash Arora, Senior Product Designer at Linearity

Here are the principles we follow, based on The Humane Interface framework by Jef Raskins (the creator of the Apple Macintosh project):

1. Simplicity: Stick to simplicity in design, making interfaces straightforward and easy to understand.
2. User-centered design: Design interfaces that adapt to the needs and abilities of users rather than forcing users to adapt to the technology.
3. Consistency: Consistency in design, behavior, and terminology is essential to reduce cognitive load and enhance the user experience.
4. Minimizing modes: Minimize modes or states in interfaces to prevent user confusion and errors.
5. Eliminating unnecessary complexity: Remove unnecessary features and complexities that don't add value to the user's experience.
6. Discoverability: Digital interfaces should be designed to allow users to easily discover how to use them without relying on documentation.
7. Direct manipulation: Users interact with objects or elements in a way that mirrors their real-world counterparts.
8. Feedback: Providing feedback to users' actions is crucial for them to understand the system states.
9. Efficiency and speed: Design interfaces that allow users to perform tasks quickly and efficiently.
10. Error prevention and handling: Interfaces should be designed to prevent errors. When errors occur, they should be handled gracefully to help the user get back on track.
11. The User Interface Iceberg: Understanding that most of the interface is hidden from the user's view can help in designing more humane interfaces.
12. Keyboard-first interaction: Keyboard-based interfaces can be more efficient and should not be neglected in favor of mouse-based interaction.

Besides Jef Raskin's Humane Interface framework, there are two other major UI design frameworks that are considered industry standards: Google's Material Design and Ben Shneiderman's Golden Rules of Interface Design.

We created a simplified overview, comparing all three frameworks and extracting 8 key principles for well-designed user interfaces:

Now that you have a handful of core UI design principles in your pocket, let's start our step-by-step user interface design process.

We'll be using Linearity Curve on iPad, but you can also design your UI on Mac or iPhone. You can toggle any of our Academy pages to display the iPad or Mac version of the user guide.

Create a new Curve document

You can create a blank new document in Linearity Curve by tapping on the + New Document card in the Gallery.

For this tutorial, we'll use a handy pre-designed Curve template containing various visual elements for creating a mobile graphical user interface. Download it below:

Go to your Downloads folder and tap on the .curve file. It'll automatically open in Linearity Curve.

Create your UI design using the template elements

Let's create a minimalistic profile page for a new blog publication platform.

We'll be designing flat elements without shading or shadows, but it's good to know that old-school skeuomorphism is making a comeback.

Here are the components of this profile page UI design:

• Profile picture
• Writer's name
• Link to more information about the writer
• 'Story Grid' containing all the writer's articles
• 'Start New Article' button
• 'Upload' button
• 'Exit' button

Start with the profile pic. Copy a large circle element and place it on the mockup phone.

Go to the Library Tab and navigate to the Unsplash tab. Drag and drop a free stock profile picture from Unsplash onto your Artboard.

Rearrange the layers in the Layers Tab so the circle and image appear above the phone layers.

Use the Selection Tool in Multi Select Mode and select the profile pic and circle.

When the Quick Actions Toolbar appears, tap on the Mask icon to crop the image to the circle shape.

Let's create a new layer to place your UI design. Move the cropped profile pic to this layer.

To create the 'Start New Article' button, copy one of the smaller circle elements and move it to your new layer so that it appears on top of the phone face.

Change the Stroke to white in the Style Tab.

Choose a Fill color in the Style Tab based on your visual representation's color scheme. This will also indicate the customizable elements in the app.

Next, copy a square UI element and place it on top of the phone interface.

Change the Fill to white and switch to the Selection Tool in Duplicate Mode to create a grid of four. This is the 'Story Grid' containing all the writer's articles.

Add a scroll bar design element on the right-hand side to show users there are more than four stories available. This also makes it accessible for the user to scan through the blogs quickly.

Draw a long, thin bar on the right-hand side using the Rectangle Shape Tool.

To round off the edges, add 20pt Corner Radius.

Duplicate this pipe shape, align it with the original, and shorten it. Change the Fill color of the original to dark gray.

Do you notice how the four shapes and the scroll bar seem to be floating in space? Adding another visual layer will anchor them.

Draw a rectangle shape over the articles area and add a 30pt Corner Radius (bigger shapes need more Corner Radius to get the same rounded effect).

Move this new shape below the blog tiles and scroll bar in the Layers Tab. Change the Fill color to a dark gray that will stand out a bit from the black background.

Copy one of the boxed arrow elements from the template and place it next to the 'Start New Article' button.

Make the Stroke color white. This is the 'Exit' button.

Add another boxed arrow element to the other side of the 'Start New Article' button. This arrow points up and will be the 'Upload' button.

Go to the Layers Tab and open the arrow Group, then select the arrow's Line Shape and shorten it to just above the box. Then, move the arrowhead to touch the top of the Line.

You'll want to discourage users from exiting the app, so leave that arrow button without a color Fill. But you want your users to upload media, so add a dark gray Fill to show that the arrow button on the right requires action.

Next, use the Text Tool to add the username at the top. Choose your Font, color, and style in the Style Tab.

We want to add a link to more information about the writer. Copy one of the box-and-arrow elements and place it next to the writer's username. Change the Fill colors to suit your interface's style.

To clarify this element's purpose, use the Text Tool to add the letter 'i' in lowercase on top of the button. 'i' is universally recognized to mean 'information.'

Change the Font Color to black.

Your base UI design is complete. Now, you can add more design ideas to give your client or team a taste of the look and feel of the customizable 'Story Grid.'

Add decorative visual design elements

Add background images from Unsplash for each of the blog tiles.

Use Multi Select Mode to select each square shape plus its image, then tap the Mask icon in the Quick Actions Toolbar.

Use the Text Tool to add blog titles. Make sure they're aligned and stay within the blog tile bounds.

The first iteration of your UI design follows the fundamental principles of simplicity and functional design. After user testing on an interactive interface, you'll tweak your original design to make it more user-friendly.

Now, let's take your visual representation to the next level to showcase this individual screen to your client and design team.

Create an eye-catching background

You can move your complete design to a fresh Artboard, where you'll add a custom background.

Go to the Layers Tab and tap on the + icon in the top right corner. Choose the New Artboard option.

Tapping anywhere on your canvas will automatically create a new Artboard the same size as the current one you're working on.

Tap on the Selection Tool and drag it over the entire phone interface to select all your design elements. Now you can drag them over to your new blank Artboard.

Add a background image from Unsplash and slightly lower the Opacity in the Style Tab. You can also add some Blur to help your UI design stand out more.

Duplicate the path and curve of the phone and add a white Fill color to add the phone's border.

For extra visual texture, add an image of hands from the Unsplash Library. Linearity Curve makes it so easy to delete the image background using the Background Removal feature.

Resize as needed and place the hands behind your phone interface design.

Export your UI design

Export your final design by going to the File name menu item and tapping on the Export dropdown.

Select an appropriate image format option, such as .jpeg or .png., and then tap Export.

Design interfaces with insight

In this tutorial, we've journeyed through the essentials of UI design, grounded in established principles from Google's Material Design, Jef Raskin's The Humane Interface, and Ben Shneiderman's Golden Rules.

You've gained insights into creating user interfaces that are not only visually pleasing but also functional, intuitive, and user-centric.

As you apply these principles in your projects, remember that Linearity Curve offers the ideal platform for bringing your UI designs to life. With its intuitive tools and features, Linearity Curve is perfectly aligned to help you implement these foundational design principles.

If you haven't yet, sign up for a Linearity Curve account to start crafting stunning, user-friendly designs today.

Frequently asked questions