How to build responsive web apps using Sketch?

Google’s mobile-friendly update – according to which mobile-friendliness will be used as a ranking signal – has been released. And so, creating mobile-friendly sites have become more important than ever before. While there are several ways, you can use to make your site optimized for mobile devices, creating a responsive website remains to be the best option to offer an enhanced experience to your mobile visitors.

But creating a responsive site is not easy, and rather requires you to focus on several aspects. Even if, you’ve completed your site, you may feel the need to customize it to make it more mobile-friendly. But, making changes to the final design can cost you a lot of your money and time, so it would be better to create a mockup design for your responsive site instead. This is where the Sketch App comes in handy.

blogpost

 

This post is intended to provide you an introduction of the Sketch App and a review of the promising ways that can help you reduce your development time in creating responsive solutions.

Sketch App – A Foreword

Sketch App is one of the most popular and recommended Mac applications – created by Bohemian Coding – for modern-day graphic designers. It provides both flexibility, as well as, speed to create mockups with the help of lightweight and easy-to-use tools such as Artboards, and features like Symbols and Shared style.

Ways to Reduce Time When Working on a Responsive Mockup

As stated previously, Sketch app offers many different useful tools and services that help in making the responsive design workflow at a faster rate. In Sketch app, artboards are used to connect multiple screens of your app together.

You can choose to copy and paste elements into your artboard. However, to improve the level of mobile-optimization of your design it is recommended that you should use Sketch app features such as Shared Styles, Symbols and Text Styles. These features help in reusing the elements and styles in your mockup.

Let us discuss about the features of the Sketch app one by one:

  1. Shared styles

“Shared Styles” is a useful feature for users who want to replicate the styles of each layer, but would like to change the size of the styles. Using this feature, you can achieve any type of necessary style that fit into the viewport of your responsive design artboard, along with the ability to set perfectly-suited custom sizes for responsive design.

To begin working with the Shared styles feature, from the right side in the sidebar of your Sketch app, click on the dropdown box with the label as “No Shared Style”. Next, click on the “Create New Shared Style” option, and then enter a suitable name in it. Open up your artboard and Press “R” if you want to draw a rectangle shape. And then, click on the Shared Styles dropdown, and choose a new shared style. This will provide you with a new rectangle containing different dimensions, but having the same styles.

  1. Symbols

Symbols, is another useful feature of the Sketch app that resembles the Shared Styles feature, but are being applied to Groups of layers. In addition, Symbols don’t contain independent width or height. In case, you’ll change a layer’s dimensions that exist within a Symbol Group, then the layer will change in all the symbols of the group.

With Symbols, you don’t need to go back to the artboards and make edits to the re-used buttons, headers, and other elements anymore; rather the symbols will get updated on the fly.

  1. Text Styles

Lastly, we’ll discuss about Text Styles – that are almost similar to Shared Styles, however, this feature can be applied to text layers only. Remember that each text block in your mockup will contain a separate layer of its own, so that “Text Styles” can be applied to each block of text individually.

This feature proves useful when you need to create style guides in an individual artboard – but this need to be done prior to starting with the design process. And then, the “Text Styles” will get applied to the fresh text layers in just a matter of few seconds.

Both Text Styles and Symbols are commonly used by designers in the Sketch app, when they’re creating icons, UI kits and other such design resources. That’s because, it helps them use the design resources on-the-fly, instead of duplicating and moving the layers in between the artboards – whenever a style needs to be replicated.

To declare Text Styles, you’ll need to use “T” that will help you insert text into the artboard. However, you’ll most likely encounter two issues when declaring text styles.

#Issue 1: The heading of the text may appear to be too big, while the font size will reduce. In order to overcome this issue, simply move to “The Inspector”, and then select the dropdown box indicating the Text Style that is currently applied, and simply choose “No Text Style”. After this, you’ll notice that the text style won’t change on its own; and you’ll need to alter them in The Inspector, followed by creating a new text style. The same can be done in case of Shared Styles and Symbols.

#Issue 2: You may feel the need to add more line spacing in the “Post data”. Here, you just need to increase the line spacing with the help of “The Inspector”.

Let’s Wrap Up!

Creating mock up has become an important step in the web design workflow, however, you need to make sure that it shouldn’t become a time-consuming process. Thanks to Sketch app features like Shared Styles, Symbols and Text Styles, you can create mockups for your responsive design workflow easily and quickly. Though, these features prove to be very useful, unfortunately they’re often overlooked by designers.

Remember that using the Sketch app features such as the ones discussed in this post can help save a lot of your development time, as they allow to re-use most of the elements of your mockups.

Author Signature: Lucie Kruger is an application developer working with Mobiers Ltd, which is one of the leading Android app development companies. She provides concrete information on latest information on mobile technologies like iOS or Android development processes.

Building an app? Tell us about your project

We'll connect you with the right team for your project, for free!