Tag Archives: web designer

4 Tips of Desktop-First Design for Responsive Websites

responsive website

Nowadays, where all attention is in mobile-first design, desktop-first design seems less popular. This is because many designers aim to create responsive design. However, starting from desktop is not the bad. In fact, this design works better if you want to create feature-rich designs. This workflow may not as popular as mobile-first design, but as a web designer, you should know why you also need to put attention on desktop-first design.

The Benefits of Desktop-First
Generally, desktop first is something that everyone made websites up until the responsive era. Today, with so many people talk about mobile first, there are still so many reasons why we have to stick with the desktop approach, especially if you want your site have tons of detailed features on larger screens.

Here are some benefits of the desktop-first ideologies.

  • You get to see all major features at once
  • It lets you imagine all the largest possibilities for your design first
  • It’s the best strategy if your audience mostly uses desktops/laptops

You must think that any modern websites like Twitter puts mobile-first design. However, even Twitter have lots of extra features that come along with the desktop experience. Therefore, you need to create feature-rich websites that depend on a strong desktop design. This is perhaps the biggest benefit of a desktop-first layout. You get to see the site as it should look with all of its accessories. These extras can be removed for smaller screens as you test and find certain features just don’t carry over well.

It’s easy to consider dynamic features more like an afterthought with a mobile-first approach. But, you’re treating these features as the primary display method with a desktop-first approach, then choosing to remove them as needed.

No one is better than other, so you can try both of them to see what you prefer. Working from smaller area or starting from desktop then working smaller.

Supporting All Browsers

Handling browser support is the trickiest part of desktop-first design. In fact, it is reasonable for all mobile browsers to basically support the same features as desktop browsers. The main difference can be seen not in HTML/CSS support, but rather in touch-based support.

So, it is important to consider how the different browsers work, what they support, and how to handle the user’s touch-based input when moving from desktop to mobile. A few good rules to consider while scaling down your desktop-first design:

  • Increase body text size so links are easier to tap
  • Make tappable elements larger
  • Add JavaScript libraries that support swipe motions

Graceful Degradation
Graceful degradation is a process that builds all your website’s top features with everything you want on the site, and then if other browsers can’t support them you revert to fallback methods. A common example of this tactic is the removal of dropdown sliding menus for mobile. However, rather a change in user experience, this isn’t strictly graceful degradation. On the other hand, you’re searching for JS functions or CSS3 properties that literally cannot be supported in a certain browser.

When Desktop Takes Priority
After all, you can think about designing a site where desktop takes priority over mobile. If the mobile experience can be incredibly simple but the desktop experience needs to be detailed and dynamic. But, you also should have a plan for the mobile site with at least a vague idea in mind of how it’ll look.

 

4 Ways of Boosting UI Design with Vibrant Colours

Ways of Boosting UI Design with Vibrant Colours

Colour has strong effects and impressions for almost everything. When you come into someone’s house, the first thing you would notice is the colour of their house and how it gives you different kinds of vibes depending on what combination of colours it has. That’s why; colour has the most powerful influence for all designs. Not only can it trigger different kinds of reactions, emotions, or moods, it can also boost the audience’s impressions upon seeing it.

The same thing applies to UI design too. For a web designer, colour in UI design is very important because it can draw attention and influence the reaction of the people who see it. Nowadays, designers use vibrant colours for their design. Vibrant is generally used to describe bright and intense colour, although vibrant isn’t a precise colour term, since people will use it differently. Bright colours with cartoonish designs are usually good for entertainment designs and elegantly minimalist colour and styles are well-suited for business designs. Therefore, vibrant colour is one of the biggest UI design trends of 2017.

What makes it unique is that vibrant colour can be applied in different ways and styles to design. In this article, we are going to explore the ways of boosting UI design using vibrant colours!

1. Monotone
Monotone is one of the most popular ways to use vibrant colours for a design. It is easy to create and makes text very readable. Monotone palettes come with a single colour with a mixture of shades and tints. Choose the colour that matches with your message. If paired with perfect typography, monotone colour schemes will create a really amazing look,.

2. Duotone
Duotone is an image created from two colours. It can be either two shades of the same colour, or two different colours. Duotone enables you to express an image with the emotional elements from the combination of any colour. Different colours can stir different kinds of emotions, depending of which colours and its combination you use. For example, the combination of soft and simple colour can represent business-like atmosphere, while the combination of bright colours can express happiness with a positive mood. It also adjusts the colour variations in an image. That way, the text can be placed anywhere on the image and is still perfectly readable.

3. Gradients
Gradients in the combination of the same colour that illuminates from light to dark can give the impression of modernism. It can also improve visual communication, whether it is a full gradient background or smaller places for the gradients. What makes smaller areas of gradient easier and more interesting is that you have more options to be creative with this technique, and when applied in smaller spaces, it can be visually attractive to play with multiple colour pairs.

4. Overlays
Overlaying is the application of semi-transparent coloured box covering an image or a video. It has been a popular design choice for a long time because it is easy to create. However, you have to be careful in setting the degree of saturation and transparency of the colour, because you have to make sure whether the text is still easily readable or not.

Now you know the ways of boosting your UI design using vibrant colours! Whatever you choose between these 4 types, make sure you put the text with the right colour combination so that the text is easy to read and the design is interesting to look at.