How to create an interface for a mobile app? There are many ways you can go about it and the best way to find out what will work best for your app is to start by thinking about your target audience. Then, use user feedback as a guideline to help you create an interface that is easy to use, intuitive, and visually appealing. Once you have created a prototype of your interface, test it with real users before finalizing it.
Use These User Interface Design Templates To Create Your Own Mobile App
Creating a mobile app is a great new idea, an exclusive design, and an attractive way to get your business or product out there. Thankfully, there are many user interface design templates available online to help you get started. The following three examples will show you how to create an app using different templates.
The first example is for a business that wants to create an app for its customers. To start, choose the type of business you are in (e.g., restaurants, hotels, etc.). Next, you will need to find the right template for your business. There are many templates available online and some are free while others cost money. Once you have found the right template, it is time to begin creating your app.
To create your app using this template, first choose the type of app you would like to create (e.g., restaurant guide).
Free User Interface Design Templates To Help You Build A Perfect App UI
A lot of people believe that a well-designed user interface can make or break an app. This is why it’s important to have a quality template available to help you build a perfect UI. Free user interface design templates are the perfect way to get started.
Finding the right template can be difficult, but thankfully, there are plenty of them available online. If you’re looking for something exclusive, then you should check out premium templates. However, if the quality is more important to you than price then any of the free templates will work just fine.
Whatever your requirements, there’s sure to be a template out there that fits them perfectly. So don’t hesitate – to start building your perfect app UI today with one of these free templates!
How To Create A User Interface For Your Next Mobile App
Creating a user interface for your next mobile app can be a complex and time-consuming process. Whether you’re designing from scratch or borrowing elements from an existing app, there are a few tips to keep in mind.
Start by thinking about the main tasks users will need to perform on your app. What are the most common actions? How can you organize these actions into menus or screens? Once you have a basic layout figured out, you can start designing individual screens with graphic designer software.
Choose appropriate buttons, text fields, and images for your app’s interface. Make sure all elements are responsive and fit properly on different screen sizes. Finally, test your user interface frequently to make sure it looks and works as expected.
UI Design Tips for Your Next Mobile App
When you’re designing your next mobile app, pay attention to the user interface. Here are some tips to help you create an exclusive, quality design:
- Start with a new idea. Don’t copy the design of your competitors. Be creative and come up with an innovative approach that will set your app apart from the rest.
- Use high-quality templates. There are plenty of quality templates available online that can help you get started quickly. Make sure to use one that is compatible with your app’s theme and style.
- UseUXkit for wireframing and prototyping. This free software offers great features for creating user interfaces and can be used in conjunction with other tools such as Sketch or Inkscape.
- Test your designs before implementing them fully.
Unique User Interface Designs for Mobile Apps
There are many different types of user interface designs for mobile apps. Some have unique designs that make using the app easier and more efficient. Here are some examples of user interface designs that stand out:
- The Instagram app has a scrolling feed that is continuously updated. It makes it easy to see what your friends are up to and keeps you constantly engaged with the app.
- The Uber app has a simple design with colorful icons on a white background. The icons represent different types of transportation, so it’s easy to find the type of ride you need.
- The Airbnb app has an intuitive design that makes it easy to find listings and book rooms. The layout features large images and bold text, which makes it easy to read and navigate.
Takeaway
There are many different ways to design user interfaces for mobile apps. However, by following some simple tips and using templates, you can create a user interface that is both effective and consistent across all devices. So, don’t be afraid to get creative, but always keep your users in mind when designing your app’s UI.
The post How To Create a User Interface for a Mobile App + Ui Design Templates appeared first on VVDesigns.]]>Setting up the typography for any new project is always a complex task. There are literally hundreds of tweakable variables, and it’s very easy to spend endless hours adjusting sizing, line heights, margins, and weights. The best way to save your sanity is to have a design system that can generate quick answers to most of the little questions—which lets you concentrate on the “big picture” decisions.
As readers will consume more body text than any other text size, often our first critical typography decision is to set the body font size for our default layout (let’s put responsive design to the side for now). For many years, 16 pixels was considered the default body size of the Web.
However, with today’s larger screens, text-heavy sites such as blogs and news services are generally choosing 18-pixel to 21-pixel body font sizes. Social media and ecommerce apps that use busier, more modular UI units have tended towards 14px to 16-pixel body fonts. Obviously, these are broad trends, and not hard and fast rules, but you can see these general trends in the list below.
Typical body font sizes for well-known sites
- Medium.com:
21px - NYTimes.com:
18px - CNN.com:
18px - Airbnb.com:
18px - SitePoint.com:
18px - BBC.co.uk:
16px - Developer.mozilla.org:
16px - Twitter.com:
15px - Etsy.com:
14px - Wikipedia.com:
14px - Facebook.com:
14px
Remember that these big internet properties do a lot of user testing, so put some thought into where your application fits in relation to this list. When you’ve settled on your base text sizes, eye-test them on real screens, tablets, and phones until you’re happy with them as a starting point.
Scaling Your Type
So, now you’ve set your body font size. How do you decide on the sizing of your titles, section headings, subheaders, lists and blockquotes?
For me, the answer used to be, “Umm … tweak it till it looks … kinda right?” I’d scale up a heading, bump the weight a little, jog it a pixel up, … push it back down, … and back up again. Frankly, it was exhausting, because there were so many finicky little decisions and very few totally wrong answers.
Type scaling —sometimes called modular scaling – lets you use simple math to give you simple typographic answers. It allows us to set a single scaling ratio to generate all our font sizes while keeping them in harmony. It’s like a musical scale for type sizing.
Type Scaling in Practice
Let’s start with a body font size of 18px. That makes our default paragraph size 1em (or 18px):
body{font-size: 18px;}
p {font-size: 1em; /* (or 18px) */ }
I’m going to set a type scale of 1.25. To calculate my h5 font size, I simply multiply my paragraph font size by 1.25. That that’s 1em * 1.25, or 1.25em:
h5 = p * 1.25 = 1.25em
Our h4 headings would be the h5 size multiplied by 1.25 (1.25em * 1.25) or 1.563em. Continuing the process gives us something like this:
/* Using a type scale of 1.25 */
h5 {font-size: 1.25em;} /* 22.50px */
h4 {font-size: 1.563em;} /* 28.13px */
h3 {font-size: 1.953em;} /* 35.16px */
h2 {font-size: 2.441em;} /* 43.95px */
h1 {font-size: 3.052em;} /* 54.93px */
If I decided that my h1 headings felt a little oversized at that scale, I could bump my type scale down to 1.2 to get this result:
h5 {font-size: 1.2em;} /* 21.60px */
h4 {font-size: 1.44em;} /* 25.92px */
h3 {font-size: 1.728em;} /* 31.10px */
h2 {font-size: 2.074em;} /* 37.32px */
h1 {font-size: 2.488em;} /* 44.79px */
Okay, so I need a pocket calculator to size my text? Happily, no. There are some great tools that let you tweak and test type scales in generated CSS in real time. My favorite is Jeremy Church’s Type-scale.com (below), a tool that lets you quickly test different type scales and generate working CSS. There’s even a dummy layout on the right panel to eye-test your work and a CodePen export option. This is a great foundation for your typography CSS.
Does a single type scale ratio work for all device sizes?
The answer is, no, often it doesn’t. We can learn from traditional print formats here. If you compare the typography of a typical newspaper to that of a classic paperback novel (below), you’ll notice some interesting differences beyond the obvious paper sizes.
While their body font sizes may be quite similar, there’s much great variation in heading sizes in the newspaper. Common sense tells you those headlines in The Times simply aren’t going to fit as chapter titles for The Wizard of Oz. As a general rule, smaller formats (such as phones and novels) are going to need shallower type scales.
Note that this difference in type scales doesn’t need to be large. As the image above shows, a small increase in type scale—from 1.125 up to 1.25 —ripples through the scale to generate a much larger top-level heading. While that h1 title looks fine on a laptop, it would chew up far too much real estate on a mobile device.
In short, it’s wise to use CSS @media queries to serve two type scales – a steeper type scale for large screens, and a more compressed type scale for smaller screens. We’ll tackle this later in the project.
So, now that we have a reliable, repeatable process to scale the type in our designs, let’s look at the spaces in between that type.
What is a Vertical Baseline Rhythm?
Vertical baseline rhythm — sometimes referred to as the vertical measure — is a grid of horizontal lines that you can use to ‘hang your typography from’. It’s not unlike the blue-lined, school workbooks many of us learned to write in.
The trick is getting your larger type units to fit into the same grid as your body text. In a simple handwritten letter (below), E.G. Webb is allowing an extra row for his signature. He’s probably using a baseline rhythm without even knowing what it’s called.
In The Elements of Typographic Style Applied to the Web, Richard Rutter describes baseline rhythm like this:
Headings, subheads, block quotations, footnotes, illustrations, captions and other intrusions into the text create syncopations and variations against the base rhythm of regularly leaded lines. These variations can and should add life to the page, but the main text should also return after each variation precisely on beat and in phase.
How does that work on the web? Let’s look at a real-world example. The excellent Colossal magazine uses a very open, airy layout, yet it still somehow manages to feel strong and structural. How does it do that? It turns out that if we superimpose a 21px vertical grid over the whole layout (see below), we see a previously hidden structure emerge. For this example, I’m going to call one row of this grid a “unit”.
You’ll notice that:
- the site branding fits nicely into a box five units high
- the main navigation is three units high
- article titles are two units high
- secondary navigation and social links are one unit high
In fact, most UI elements “hang” on this underlying grid like socks pinned on an invisible clothesline. Even though we can’t see the underlying grid, we’re aware of it through a feeling of balance and harmony. It just feels right.
Note that we’re not talking about just font size, but instead the whole space the text occupies —including the line height and margins. So in the Colossal example, the article title would have a line height of 42px, or two units for each line.
However, you’ll notice that not every element is locked to this grid. The designers have chosen to offset elements like the photos from the grid. That’s fine too. The grid is a great starting point, not martial law.
Using Layout Grids in your UI designs
Most modern graphic layout tools (such as Sketch, Figma or Adobe XD) make it easy to add a vertical baseline to any canvas/frame. In this Figma example (see below), I selected the document frame and used the + button to add separate rows and columns in the Layout Grid panel.
These grid layers can be switched on and off using the eye icon. I find that, with a grid in place and “snap-to-grid” switched on, it simply becomes easier to size items with the grid than without it. And that makes your life easier.
There’s even a tool to help you work out the CSS. Gridlover.net (below) is an excellent, free tool that lets you experiment with different base font sizes, line-heights and type scalings—all locked to a vertical baseline. If you try adjusting any of the line heights or margins on the right CSS panel, you’ll notice the number only changes by a full “grid unit” each time.
You might also notice that the tool avoids using CSS padding in its typography. I’ve found this to be a generally good policy when working with a vertical baseline system. Use padding freely on your container units, but never on typography. Even text buttons can be given height with a line-height setting rather than CSS height or padding.
Gridlover not only writes useful CSS, but it really helped me get my head around how vertical baseline and type scaling can work in the real world. I believe this is a great place to start your CSS typography.
Archetype is another tool designed to help you create well-planned, integrated type systems. It offers controls for both type scale and baseline rhythm in one very thoughtfully conceived UI. It even encourages you to set different type scales for mobile and desktop out of the box. I believe this is the most sophisticated tool in this area.
The only caveat to Archetype is that it currently costs $59 per year to unlock the “Export as CSS” option. Clearly that’s a bigger outlay than Gridlover (free), but if you spend a lot of time crafting type systems, it could save you a lot of time (and money). Archetype is very good.
Vertical Baseline Rhythm is a Tool – Not a Religion
Vertical baselines are a very useful tool, but they shouldn’t become the end goal of your design. I have to admit, there was a time when I spent too much sweat trying to bend every page element to obey my mighty grid rules. I was arm-wrestling typographic percentages and margins, and “hitting the grid” became a goal in itself, rather than just a tool to help me design better.
That’s neither fun nor useful.
Today, I think it’s better to look at vertical baselines as a strong bass drum in a band—a regular beat that helps to measure out the space for the rest of the band to play in. Set up a nice backbeat that everyone can feel, but don’t be afraid of dropping little off-beat flourishes. Often they can add energy and flavor to a composition (visual or musical).
Personally, I like to start with a strong grid. If there’s whitespace between headings or paragraphs, it might as well be one, two, or three whole “vertical units”, rather than 1.3 or 2.75 units. And that invariably feels balanced and harmonious immediately.
Likewise, your hero image might as well be exactly 12 units tall, rather than 11.8 or 12.3, as now the bottom edge of the image is more likely to nicely line up with the bottom edge of any text flowing alongside it. It’s “self-tidying”.
But if, on the other hand, the caption on your images just looks too spacey when it’s spread over 25-pixel line-heights, that’s fine. Forget the grid there. Just make it look good.
The Takeaway
Ultimately, most design work is just a long, long list answers to “why” questions.
- Why did you make that major heading 49 pixels high?
- Why is that bottom margin 17 pixels?
- Why does the
h3have a line-height of1.7778?
And so on.
There are potentially hundreds of these little questions in even a small project. And you probably have enough natural “designer gut instinct” to answer them all-eventually. The problem is, it’s exhausting.
However, if you can come up with a repeatable system that delivers viable answers to most of the boring, little questions, you can save your designer gut instinct for the bigger, more important questions.
Which is usually the fun part anyway.
The post Web Typography: Establishing a Strong Typographic System appeared first on VVDesigns.]]>