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.

Did you know? 94% of first impressions are design-related, and changing the color of a call-to-action (CTA) button can boost conversion rates by 21%.

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.

Jumpstart your ideas with Linearity Curve

Take your designs to the next level.

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:

General UI design principle Google's Material Design Jef Raskin's The Humane Interface Ben Shneiderman's Golden Rules of Interface Design
Consistency Unified experience across platforms Monotony in commands and operations Strive for consistency in design elements
Simplicity Simple, intuitive design elements Simplify to enhance usability and efficiency Reduce short-term memory load
Feedback Clear, responsive interaction design Provide immediate and clear feedback Offer informative feedback on user actions
Error handling Guidelines for usable, error-proof design Design should prevent errors and aid recovery Offer error prevention and simple handling
User control Empower user interaction and customization Support internal locus of control Support user control and freedom
Efficiency Design for efficient and effective usage Minimize unnecessary complexity Enable frequent users to use shortcuts
Functional aesthetics Bold, intentional use of color and typography Focus on functionality over aesthetic elements Implicit support for coherent visual and functional design
Motion and animation Meaningful and coherent motion design (Not a specific focus) Motion provides meaning
UI design is one of the essential parts of product design. Learn more about how to become a product designer.

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.

Step 1

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.

Linearity Curve 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.

Step 2

Create your UI design using the template elements

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

The target market for this app is young creatives who want to share their writing with a niche community of like-minded people. This mobile app design needs to be simple to use, good-looking, and customizable.

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.

Duplicate circle UI design template Linearity Curve

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

Add Unsplash image to UI design template Linearity Curve

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

Rearrange layers in Linearity Curve UI design

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

Multi Select Mode Image Masking in Linearity Curve UI design

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

Masked image UI design in Linearity Curve

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

Add new layer in UI design Linearity Curve

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.

Copy circle element in UI design using Linearity Curve

Change the Stroke to white in the Style Tab.

Change Stroke color in UI design Linearity Curve
Placing the 'Start New Article' button all the way at the bottom of the screen makes it most accessible to phone users (closest to the thumb).

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.

Change Fill color in Linearity Curve UI design
Filling the button with color draws attention and invites action. Leaving it empty makes it look more like an upload button, whereas a Fill color makes it look like an action button.

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

Copy UI square element Linearity Curve

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.

Blog grid UI design Linearity Curve

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.

Scroll bar UI design Linearity Curve

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

Scroll bar rounding UI design Linearity Curve

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

Scroll bar UI design Linearity Curve

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).

Adding corner radius to UI design Linearity Curve

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.

Grid background UI design Linearity Curve

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

Copy box and arrow UI element Linearity Curve

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

Exit button UI element Linearity Curve

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.

Edit and Upload button UI elements Linearity Curve

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.

Upload button UI design Linearity Curve

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.

Add Fill color Upload button UI element Linearity Curve

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

Text Tool in UI design Linearity Curve

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.

More information profile button UI design Linearity Curve

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.'

Type button text UI design Linearity Curve

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.'

Step 3

Add decorative visual design elements

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

Add Unsplash image for blog tile UI design Linearity Curve

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.

Blog grid UI design Linearity Curve

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.

Step 4

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.

Create new Artboard in Linearity Curve

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

New Artboard created in Linearity Curve

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.

Move elements to new Artboard in Linearity Curve

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.

Lower opacity and add Blur in Linearity Curve

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

Add white Fill color to UI element in Linearity Curve

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.

Remove background automatically in Linearity Curve

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

UI design final Linearity Curve
Step 5

Export your UI design

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

Export format options Linearity Curve

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

Final UI design export in Linearity Curve

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.

These principles form a strong foundation for any UI/UX designer aiming to craft effective digital experiences.

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.

Jumpstart your ideas with Linearity Curve

Take your designs to the next level.

Frequently asked questions

What's the key to good UI design?

The key to great UI design is simplicity and subtlety. Emphasizing a minimalistic approach reduces clutter and focuses on essential functionalities, leading to a more intuitive and user-friendly interface.

Subtlety in the animation and color change of design elements like colors, typography, and spacing can significantly enhance usability without overwhelming the user.

This approach aligns with the core principles of UI design, advocating for designs that are easy to understand and interact with while providing a seamless and enjoyable user experience.

How can I enhance UI design for touchscreens?

Imagine things in 3D. In reality, everything on a digital surface is just pixels, but UI design is about turning pixels into tactile surfaces. This is especially true for touchscreens—how can you make the user intuitively understand how to use various touch surfaces?

Subtle shading, highlights, drop shadows, and color changes convey raised and recessed surfaces. These visual textures also provide feedback to let the user know which elements are clickable and when they've completed an action.

While this is part of the skeuomorphism trend in design, flat design and glassmorphism are also popular design approaches in UI design.

How can I ensure my UI design is user-friendly?

Use wireframes. These are your interface's simplified blueprints (usually made in grayscale). It enables you to map out where everything goes and how to make the UI design more impactful and user-friendly.

Add ample white space. White space is essential in UI design. It differentiates clickable areas and actions the user can take. Negative space also makes it easier for users to tap on smaller touchscreen devices (ever get frustrated when buttons are too small and close together?).

Another reason why you absolutely must add white space is because it gives your interface design a clean and uncomplicated look. Your users won't feel confused and overwhelmed at first glance.

How to design a user interface | Linearity
How to design a user interface | Linearity