Back to Top

Tag Archives: design agency

UI-design

Master the golden rules of UI design

Updated on by

Create effective interfaces with these essential UI design rules.

There are certain UI design rules that can help ensure effective user interface design. When they get broken, it’s often because of a misunderstanding of what UI design is about. UI design is not only visual design, nor is it UX design in its entirety – but it does combine elements of each.

UI design is about usability. That means that it’s not just form that’s important, but rather how form aids function. Great UI design is a mixture of clarity and efficiency, and the golden rules of UI design proposed below can help to achieve that through typography, colour palettes, CTAs, components, and design systems.

Below, we’ll look at 5 UI design rules, starting with typography. The rules apply whatever tools you’re using (see our guide to the best UI design tools for options, or alternatively our general guide to best website builders if you’re looking at UI for a personal website.

For more pointers, see our feature on the things you need to consider when designing a UI. And if you want to learn more about UI and UX, sign up for our online UX design course, UX Design Foundations.

UI design rule #1: typography is about accessibility

Simple but clear type systems can be beautiful (Image credit: Daniel Schwarz)

Great typography boils down to accessibility. In a design system for a UI, font size, line height, paragraph spacing and letter spacing should be designed in a way that enhances readability and legibility. Visual design – i.e., colours and fonts – certainly add to the user’s overall experience, but at the end of the day users are using the UI, not looking at it as art.

Legible letters result in clarity, and readable words are what help users digest content efficiently. Well-designed typography can still be aesthetically satisfying. In fact, you might be surprised at how beautiful black-on-white Helvetica (or a similar font) can be after only a few simple typographic enhancements to font size, line height, letter spacing, and so on. Similarly, ‘beautiful’ fonts can become ugly when they’re unreadable simply because frustration always trumps aesthetics.

Like many aspects of UI design, fine-tuning these individual styles isn’t really the challenge. The challenge is maintaining consistency through the entire UI design, since, as humans, we navigate the world (and our user interfaces) based on mental models, patterns, past events, and familiarity.

This is where design systems come in. They help maintain consistency and establish a clear visual hierarchy between elements of varying importance, which helps users understand our UI faster and digest our content more efficiently. And while design systems can be almost as elaborate as a Bootstrap-like framework, they start off more like a style guide. These are the elements to consider:

Font size

When it comes to legibility and readability, the minimum acceptable font size as defined by the WCAG 2.0 Web Content Accessibility Guidelines is 18pt (or 14pt bold). We couldn’t really tell you what font size to use as this largely depends on the font itself, but it’s important to be mindful of visual hierarchy and how this base size distinguishes itself from summarised text such as headings (<h1><h2><h3> etc.).

With your UI design tool of choice, create a series of text layers (T) and adjust the sizes to correlate with the following template:

  • <h1> 44px
  • <h2> 33px
  • <h3> 22px
  • <p> 18px

Next, choose the font. What you might notice with some fonts is that 18px <p> and 22px <h3> doesn’t look all that different. We have two choices here: tweak the font sizes, or consider using a different font for headings. Consider the latter if you anticipate that your design will be text-heavy. Keep in mind that visual UI design is often a gut-feeling approach, and nothing is fixed – everything is subject to change.

Line height

Optimal line height ensures that lines of text have enough spacing between them to achieve decent levels of readability. This is becoming more recognised as a standard, with even Google’s PageSpeed Insights suggesting it as a manual check or a flag if the text contains links too close together as a result of line height.

Once again, the WCAG helps us out with this one, declaring that line heights should be 1.5x the font size. So, in your UI design tool under ‘Line’ (or similar), simply multiply the font size by – at least – 1.5. As an example, if the body text is 18px, then the line height would need to be 27px (18*1.5).

Paragraph spacing

For paragraph spacing (or text spacing), you’ll probably want to manually align layers using smart guides for exactness. Similar to line height, the magic multiplier is 2x (meaning, double the font size). As an example, if the font size is 18px, then there should be a 36px space before leading into the next text block. In regards to letter spacing, this should be at least 0.12. 

If your UI design tool supports it, consider turning these typographic styles into ‘Shared Styles’ to make them rapidly reusable while ensuring visual consistency. This is usually accomplished via the inspector.

UI design rule #2: three colours is enough

Colour can be used for visual hierarchy in UI design (Image credit: Daniel Schwarz / InVision)

Colours can have a huge impact on a UI design and it plays many roles. It’s not necessarily about how beautiful the colours are though, or even about the specific colour that’s being used. It’s more about the type of colour. This may not be true when it comes to branding – since colour is used for emotional impact there – but with UIs, colour can be used for visual hierarchy.

Choose your colours

Colours hold meaning, so it’s important not to have too many of them. Too many means more things that the user has to understand and remember, and for the UI designer, it means more colour combinations to worry about. Generally speaking, this would be the recommended format to use:

  • A call-to-action colour (also the main brand colour)
  • A neutral light colour (ideal for text-heavy content)
  • A neutral dark colour (better for UI elements, and also for dark mode)
  • For all of the above, a slightly lighter and slightly darker variation

The final point on the list means that it’s easy to achieve the following:

  • Dark mode will be easily possible
  • Our CTA colour will never conflict with other colours
  • In any scenario, we’ll can emphasise and de-emphasise as we wish

Create a colour palette

With your UI design tool of choice, create one fairly large artboard (tap A) for each colour (named Brand, Neutral / Light, and Neutral / Dark). Then, in each artboard, create additional smaller rectangles displaying the darker and lighter variations of the colour and also the other colours themselves.

Generally, consider slightly lighter and darker as 10% extra white and 10% extra black respectively. When you’re done, display a copy of the typographic styles on each artboard. The colour of these text layers should be neutral light, except when on the neutral light artboard, where they should be neutral dark.

Check contrast levels

Ensure the contrast in your UI design meets accessibility standards (Image credit: Daniel Schwarz / InVision)

Next, we’ll need to check our colours for optimal colour contrast. There are a variety of colour tools that can do this, for example, the Stark Plugin(opens in new tab) for Sketch and Adobe XD or Contrast(opens in new tab) for macOS. However, an online solution such as Contrast Checker(opens in new tab) or Colour Contrast Checker(opens in new tab) will do just fine.

Check the colour contrast for each combination and tweak the colours accordingly. If you’re not sure which colours to use, try using Colorsafe’s recommendations(opens in new tab). Also remember that while colour in UI design can be mighty effective, it’s not always reliable for people who have visual impairments.

UI Design rule #3: CTAs need hierarchy

You’ll need different button variations for different situations (Image credit: Daniel Schwarz)

The majority of decisions made about our design lead the user towards an action – but this is only effective if the target looks clickable and communicates the visual hierarchy. Buttons and links, much like typography, should have a few variations. After all, not all actions are of equal importance, and colour is an unreliable method of communication, so it cannot be our main method of influencing visual hierarchy.

Size

Keep the text size the same when creating bigger buttons (Image credit: Daniel Schwarz / InVision)

As for size, it’s generally recommended that button text be declared as 18px (same as the body text), but have three variations in size. This allows us to make certain buttons appear more important without relying on colour, and also to nest buttons (for example, a button inside a minimal-looking form field):

  • Normal: 44px in height (rounded corners: 5px)
  • Large: 54px in height (rounded corners: 10px)
  • Extra large: 64px in height (rounded corners: 15px)

Shadows

Shadows should be used to increase depth, suggesting interactivity. A single shadow style for all variants of buttons and form fields is fine – no need for anything fancy.

Interactivity

Each button type needs a variation that indicates its hover state. This clarifies to the user that what they’ve attempted to do is totally fine and ensures they carry on without delay. This is actually one of the more complex aspects of creating a design system, because the colour is often the favoured style to change when creating a state. Luckily, these state changes can be relatively subtle, so it’s fine to change the colour into its slightly lighter or darker variation – that’s what they’re for. This applies to links as well.

Not doing this will lead to using a colour that either already has significant meaning, resulting in users becoming confused, or else deciding to come up with another colour. Deciding to use a secondary colour is fine, but it should be saved for marketing visuals rather than UI elements. Less is more (and easier). Remember to repeat this step for every artboard. Don’t include branded CTA buttons on the brand artboard – we’ll talk later about what happens when certain combinations don’t work.

UI design rule #4: design elements must be consistent 

Speed things up by turning elements into components (Image credit: Daniel Schwarz / InVision)

Converting design elements into components means we can reuse them, helping us speed up our workflow and maintain consistency across our design. Components are a huge time saver and all UI design tools offer this feature (for example, in Sketch, they’re called Symbols). In InVision Studio, you can create components by selecting all of the layers that should make up the component and using the K shortcut.

Using components

We can reuse a component by dragging it onto the canvas (this workflow varies depending on your UI tool). This method of creating design systems (and eventually creating the design itself) works especially well with modular/card-based layouts, although ‘common areas’ – such as headers, footers, and navigations – will also be excellent candidates for components. Like we’ve done with our typographic styles, colours, and buttons, we must remember to organise components carefully.

Establish rules

It’s important not to use branded CTA buttons on top of the brand colour, since branded CTA buttons will obviously need to stand out amongst everything else. This would be an ideal opportunity to go ahead and create a component – specifically, a heading + text + button combination with a neutral light ‘card’ backdrop to enable the use of the branded button. 

Similarly, the neutral light form field (form fields are usually white because of the mental model historically synonymous with paper forms) doesn’t look amazing on the neutral light background, so they can only be used on the neutral dark background – either directly, or within a neutral dark component. This is how we make our design flexible, whilst also obeying our rules and maintaining consistency.

Stress test

Advertisement

The quickest and most effective way of ensuring robustness in our design system is to stress test it. And that means being cruel. Let’s say that we have a navigation with [x] amount of nav items, because that was the requirement; in order to really ensure flexibility, try changing these requirements by adding more nav items. To really throw a spanner in the works, try also adding a nav item with a much higher visual hierarchy than the others. 

Do our size, typography, and colour rules allow for something like this, or, in order to offer optimal usability, do we need another rule? Bear in mind that there’s a major difference between adding rules and bending the rules. More edge cases mean less consistency, so it’s usually better to rethink the component.

Rule #5: Design systems must be organised

Designing systems means deciding and documenting when and where various styles are allowed to be used. Bold text for example can be used for extra emphasis, but… headings are already bold, so what happens in this case? Can we highlight specific words? When do we need to left-align, and when to center-align? 

As you create your rules, you need to document them for your own use or for anybody else who might work with the design system. Designers of all types know about design principles, but these rules are unique to our app or website, or our brand as a whole. Choosing title case over sentence case, for instance, can be the difference between formality and informality. But most importantly, these rules help us make meaningful but quick decisions in total clarity.

A design system is not a one-time task – it’s normal to be updating it constantly. Stay flexible and expect to make a number of changes as new elements, colours, and use-cases emerge. But for it to be useful, your design system needs to be well organised. This will often mean making files easily available in the right cloud storage option for you and your team.

Colours

Create swatches of all your UI design scheme’s colours (Image credit: Daniel Schwarz / InVision)

Step one is to save all of the colours to the ‘Document Colors’ swatch if you haven’t done so already – this will make them easier to access when we need to apply them in our design. This workflow is the same (or very similar) in all UI design tools. Open the colour chooser widget from the inspector, choose ‘Document Colors’ from the drop-down, and then click the + icon to add the colour to the swatch. 

Shared libraries

Next, we need to convert our document – complete with typographic styles, colours, buttons, common areas, and basic components – into a shared library. Essentially, this means that every element needs to be a component, even if it consists of only one layer. After doing this, it’s simply a case of clicking the +‌ button in the left-hand side Libraries sidebar and importing this very document into a new document. The very document we’re working on right now is the library itself.

Design systems at scale

As a design system expands, managing it inevitably becomes harder. There are various adjustments that we might want to make to our design system to make it more efficient. For instance, we might want to use text layers to annotate our design system as a means of explaining the rules and use-cases of various elements. For the typographic styles, we could even edit the text to be more descriptive (e.g. <h1> / 1.3 / 44px).

Design handoff

Finally, design handoff tools display the various styles used by every element in the design so that developers can build the app or website. These tools include an overview of styles, and also a copy of the ‘document colors’ swatch. Developers can copy these styles as code, which is excellent if you’ve created written documentation for your design system and like to include code snippet representations of the components. Getting this write can help enable a smooth handoff for your UI design.

If you are interested in original article by Daniel Schwarz you can find it here

How to move from freelance design work to running a 6-figure agency

Updated on by

Rhami Aboud of Arch Web Design shares his personal experience and tips for freelancers who want to build a thriving agency.

Rhami Aboud went from a struggling freelancer to running a 6-figure agency — and he’s here to share the steps he took to get there.

Rhami took his first web development class at the age of 13 and has been making websites ever since. But when he transitioned his hobby into freelance work, he struggled to earn a living. 

After going to school for web design and development and earning a degree, Rhami worked for a few different companies. But by 2017, he knew he wanted to work for himself.

When he first started freelancing, Rhami spent a lot of time doing cold outreach and attending networking events without getting much out of them. Through some experimentation, Rhami figured out a process that helped him build up his client base enough to launch his own agency, Arch Web Design, in 2020. 

Rhami was kind enough to share this process with us to help others build and grow thriving agencies. 

Focus on your niche

If you’re spreading your focus across too many services and audiences, you’ll have a hard time making progress. Rhami recommends finding a niche you enjoy and sticking with it. 

Focusing on 1-2 services helps you go deeper into the industry, allowing you to build up skills relevant to your specific niche. Your portfolio will fill up with relevant work that shows potential clients that you have in-depth expertise. And if all your featured projects showcase the type of work you want to do more of, it’s easier to match with your ideal client.

“We feature all of our work…if you’re not proud enough of it to feature it, then you need to look at the quality of work you’re delivering…We ask clients during offboarding if they’re ok with [us sharing the work] and they say yes 99% of the time. It’s a win-win as they get some free promotion, too.”

To choose your niche, Rhami recommends you find an industry that you enjoy working with that also has the money to pay for the service you’re offering. So, if you’re thinking about something hyper-specific like making websites exclusively for artisan doggy food trucks, you’ll probably need to think bigger.

Just don’t overthink it. “I took way too long to choose my niche,” says Rhami, “when I did, it was a game changer and helped us scale up to 6 figures in less than a year…so just pick one. If it doesn’t work out, you can always choose another one later. Don’t get caught in paralysis by analysis.” There are also many tools out there that you can use to see what keywords people are searching for, so you can use this data to your advantage.

Rhami focuses on creating high-converting websites for SaaS clients at Arch Web Design because of his interest in tech, new software, and working with the startup community. 

Craft a perfect profile

For Rhami and Arch Web Design, their Upwork profile was a key tool for building up their client base. However, “profile” can also refer to profiles on freelancing sites like Upwork or Dribbble, your portfolio website, or a combination. For the first 1.5 years of the agency, this was their main lead-generation tool. They now rely more on SEO, but Rhami recommends using Upwork when starting out because it’s an inexpensive and relatively quick way to get leads.

To get an idea of what to include on his Upwork profile, Rhami looked at profiles of peers who offered similar services. This helped him discover common themes and come up with the key information to include on his own.

According to Rhami, a perfect profile includes:

  • An introduction (who are you and what do you do)
  • Social proof (Awards and certifications, such as official Webflow partner)
  • Examples of past work
  • Client testimonials
  • A short video that summarizes your profile
  • Rate information (fixed price versus hourly, minimums, etc.)

Client testimonials that go beyond “great work!” are key, so make sure you have a process for getting more detailed reviews. Arch Web Design uses Upwork’s built in testimonial request feature to send a few questions that encourage clients to discuss various aspects of the project. Rhami’s team also asks for Google reviews and uses a Video Ask to make it easy for clients to provide video reviews.

For rates, Arch Web Design sticks to project-based fees. And while Upwork tends to have a reputation for low rates, Rhami points out that Arch Web Design’s project minimum is $12,500, and they don’t have issues finding clients with that budget. “It all depends on how you position yourselves,” says Rhami.

If you’re not sure how to set your rates, Rhami has some tips. To determine a project fee, you need to work backwards. “Use a time tracking tool when you’re building a website and try to calculate how much time it’s going to take you,” he says, “Let’s say it takes you 100 hours to build a website and you want to make $50 an hour — just multiply the $50 an hour by 100 and there’s your cost, $5,000 for that website.”

Write perfect proposals

Great proposals feature a lot of the same information as profiles — introduction, social proof, past work, and testimonials — but in a more condensed form. The key is to keep it short and make it easy for people to take action. 

Rhami offers a basic formula: a brief introduction to who you are, followed by why the person should trust your expertise (social proof), backed up by past work examples, and wrapped up with a Calendly link (or similar tool) to schedule time to discuss further. 

Here’s how that might look for Rhami:

Intro: My name’s Rhami and I’m the owner of Arch Web Design, a Webflow-specific development agency that helps SaaS companies scale. We’re based in Canada and have built well over 200 Webflow websites. 

Social proof: I’m also proud to say that we are an official Webflow Partner!

Past work: You can see some recent work here:

Contact information: If you’d like to book a quick call, here’s my calendar link. And you can find more information on our website here.

Testimonials: PS: Here are some testimonials from our amazing clients: 

You can use this setup as a template, filling in your specific details and adding personal touches. 

Build with scaling in mind

You don’t go from a solo freelancer to a thriving agency overnight. Rhami used automation to streamline parts of his process, then made key hires at strategic times to build his team up to 14 people. 

Even if you have the perfect profile and proposal template, you’ll still need to find potential clients to send them to. While you could do this manually, Rhami shares how he uses automation to keep his client pipeline full. 

He recommends using Blogtrottr to create an RSS feed for Upwork job posts. This way, you can create custom search parameters for your ideal projects then have the results sent straight to your inbox automatically.

Let’s say you want to build ecommerce websites in Webflow. Set up a search using keywords such as “ecommerce” and “Webflow” in Upwork (or other relevant job sites). Then, set filters like experience level, hourly or fixed price, number of proposals, etc. Once you have your search parameters set, select the RSS feed icon to generate the RSS code URL.

Screenshot of Upwork job filters. In left side menu "Expert- $$$" is selected. In search bar, "ecommerce" Cursor hovers over "RSS"

Go back to Blogtrottr, select add a new subscription, and paste in the RSS URL from Upwork. Then, you can set up automated email alerts for any new job postings that fit your search criteria. 

Many jobs get hundreds or even thousands of proposals — and let’s face it, companies are not going to review them all. Getting your proposal in early increases your chances of being seen. With this automation trick, it’s easier to stay on top of new projects as they become available. 

Hire intentionally as you grow your business

As you build your agency, you’ll need to expand your team. Rhami recommends keeping your team as small and streamlined as possible for as long as you can. 

“Don’t try to grow too fast until you have the right processes in place,” says Rhami. For his first hires, he selected a UX designer and a Webflow developer. Bringing on these key team members in the first year of launching the Arch Web Design agency allowed Rhami to focus more time on sales and project management so they could build up the agency’s client base.

Arch Web Design’s second year focused on creating systems and processes for everything. Rhami hired a QA tester and project manager to support these goals and keep building the business. 

Now in their third year, Arch Web Design is reviewing data and client feedback so they can update their core offerings to accommodate client needs. 

“In the past, we’ve been building ‘Ferrari’ websites: fully custom, built from the ground up, which are expensive and take a long time to build,” Rhami explains, “In 2022, we started offering ‘Honda’ websites: they still convert as highly as our ‘Ferrari’ sites but take less than 30 days to build and cost much less.”

Rhami and the Arch Web Design Team came to this conclusion after speaking with more than 200 SaaS companies. Feedback revealed that most SaaS companies want a website that is built quickly and brings them leads and sales.

Continuous analysis and reflection is crucial when you are growing intentionally. Had Rhami’s team continued on their Ferrari-style path, they might have hired more team members versus adjusting their service offerings, which would not have served their target clients’ needs. 

If you are interested in original article by Rease Kirchner you can find it here