Design 101: Design basics for non-designers
Welcome to Design 101, your one-stop shop for the core principles of digital design. Our mission here at Uizard is the democratization of design, whether you know your wireframes from your wireflows or not, we are here to level the playing field and ensure that design is accessible to all.
We also understand that unlocking your design potential can be tricky, especially with all the jargon you may encounter out there. You may be familiar with some of the core concepts of design, or you might be a complete novice, either way, our Design 101 guide is here to help you learn the core principles, and empower you to create intuitive UI/UX.
Join us as we walk you through 4 of the core principles of digital design, namely typography, layout, colors, and accessibility…
Skip to section:
Typography
What is typography?
Typography is a catchall term that refers to how copy/messaging is presented aesthetically. Typography includes all facets of the stylistic elements in a given design, from font, to font size, all the way through to text spacing and placement. Typography is particularly important in the world of digital design, where the simplest clip of copy can have a huge impact on retention, engagement, and conversion.
Why is typography important?
Typography serves a whole host of purposes, from making content more engaging to conveying brand identity and ensuring a smooth user journey through the page. Research shows that elements as simple as font type and font color can have an impact on brand sentiment, and how a brand or product is viewed by a potential customer.
Realistically, the font, typeset, and coloring you choose for your brand will largely depend on your wider brand goals however, how you implement your typography practically can have a huge impact. Here are 2 tips to help you maximise the impact of your design typography:
Create emphasis and hierarchy within your copy by adjusting font-weight.
By varying the weight of a type family, you can signal a change in hierarchy or importance even when the font size remains the same. Weight makes a big difference when creating emphasis and hierarchy within your type.
Avoid using more than two typefaces in a design.
Combining typefaces can be difficult for those with little experience. Don't use a different typeface just because you can. Using a maximum of two, and then adding weight, size, and color can bring visual harmony to any design.
Layout
What is design layout?
Design layout refers to the the arrangement of visual elements of a design, including text, imagery, CTAs, and interactive features. Within the context of web or app design, design layout caters to the UX/UI elements of a design, with the goal being to ensure that the finished product serves the purpose agreed upon during the ideation stage of development.
Why is design layout important?
The layout of a design can have a significant impact on the success of a design, as well as the general usability and functionality. For app designs in particular, the way elements are placed in a design, and how they are presented can have a significant impact on user bounce rate, time on page, and even conversion rates.
For this reason, when creating your own web or app design, you might want to use a predefined web or app design template. These come with UX considerations baked in meaning, as a non-designer, you can simply tweak the design to fit your brand message, without having to worry about UX/UI quite as much.
If you are creating a design from scratch, however, here are some tips for getting your design layout just right:
Whitespace is an important design element.
Use whitespace to enhance your work. Don’t overcrowd a design. Leave space for users to breathe. Whitespace is an important design element, along with typography, colour, and imagery. It helps you communicate your message clearly and bring a better user experience to your site or app.
When designing a screen, do not fill every part of it. Use whitespace well, just as you would any other design element.
Alignment
Proper text alignment is a crucial element of the visual design of a digital product. It affects how users scan the screen and can make or break the impression that a product is professionally crafted.
Colors
The colors you choose for your app or web design will likely reflect the color palette of your brand (if you already have brand aesthetics mapped out). If you don't have a palette to work from with your design, or you are starting a completely new project, then it's important to remember the impact that color choice can have.
Why is color important in design?
Studies have shown that, not only does color guide consumers/users to recognize brands, this brand/image recognition is directly related to conversion rates. Here are some considerations when it comes to color in design:
Color choices
Using tints, shades, and variations of a single base color can give your designs a professional appearance without the need for shiny rainbows.
Reduce the text contrast when working with Dark themes. When white text on a black background is viewed under certain conditions, the text may appear to shimmer and have a halo effect, which makes it difficult to read:
• Set your White text to around 85-90% opacity
• Use light grey
Make your CTA shine
Make your CTAs clear. You don't want your user to be confused between your CTAs and other elements on the screen (for example, notifications, tags, or pagination features). The CTA should be easily distinguishable from these elements, which can be achieved by reserving one color for CTAs only.
Accessibility
What is digital accessibility?
Digital accessibility refers to the ease of access of digital products and environments, and the avoidance of design choices that would otherwise hinder user access. An app or web design with strong accessibility considerations will cater to various levels of visual acuity and hand control, to ensure all users get the same experience during use.
Why is accessibility important in design?
Accessibility in digital design is vitally important when it comes to ensuring your potential users have a positive experience. Poor accessibility can lead to increased bounce rate and even user abandonment. Here are a few beginner tips for creating a positive and accessible user experience within your design:
On mobile devices, try to create generous tappable areas.
When designing for mobile devices, make sure you create large touch areas for users to tap. The minimum recommended Tap Areas for both iOS and Android are:
• 48 x 48dp for Android
• 44 x 44pt for iOS
The size of a finger pad varies from person to person, so make sure the user can tap accurately by providing some space.
Font Size
Make sure the text size is large enough to be read easily. Use a clear visual hierarchy for your design elements, making their relations clear and legible. A user may not understand what the different elements are if they are too small.
Put your skills to practise
Now you're armed with the essentials, it's time to put your design skills to the test. With Uizard, you can create web apps, mobile apps, and web designs from scratch, or you can take advantage of our UI/UX design templates to really set you ahead of the crowd.
Want to learn more about the world of design? Head over to the official Uizard blog for more tips, or put some of your newfound UX UI prototyping design skills to the test and sign up to Uizard for free!