Skip to main content

Prototyping with Sketch: Best Tutorials and Resources in 2017

Sketch is a vector drawing application on Mac. Compared with Photoshop, Sketch is much lighter and simpler. A wave of enthusiasm for prototyping with Sketch has swept recently because it is very easy to design mockups. Sketch has a richer component library and more comprehensive size control than Axure so that the prototype is more realistic, more conducive to the communication and presentation.
If you focus on web design, app development, prototyping and UX design, you will soon realize that Sketch is an edge tool for digital design. Especially for the development of responsive Web design. Let's take a look at some Sketch's introductory tutorials and learn how to use plug-ins of Mockplus for interactive effects.

1. Artboard

Before clicking on the golden diamond icon, we must make a concept clear at first: Sketch is a vector-based drawing software that has no traditional canvas, and the entire blank area can be used for design.
But in fact, we need a frame to limit our design. In Sketch, it is called as artboard. We can regard an App interface as an artboard, then compare, view or connect all the interaction design process on the same interface. After that, we can export these artboards as pdf or divided them into the single image file, helping product managers or developers to view.
Step 1: Click insert on the top left corner of the interface, select Artboard in pop-up menu, the mouse turns into a cross, then you can feel free to drag.
Step 2: You can also set the accurate size on the right-side properties panel; In addition after clicking artboard, the right-side column will provide some default size of the common devices and then click to select the appropriate one.
Sketch Artboard

2. Components

Sketch comes with a rich material library, including native controls of Android or iOS, you can directly drag the needed parts into the artboard, so that you can save a lot of time and put more effort into the core product design thinking.
Steps: Click on the file - New from Template in the menu bar in turn, there will be five most commonly used platform or design style templates, open to select the desired component.
Tips: select size of iPhone 6 or 7 by default so that the size of the iOS icon doesn't need to adjust, you can drag directly.
Sketch Components
If you want to quickly re-use components, you can simply convert components or modules into Symbol, that is similar with the master in Mockplus so that we can reuse some group of content in multiple pages. Select the desired component and click Create Symbol.
Like the components, fonts and layers also need to be reused commonly. In a design draft, it's cumbersome to adjust each element. While the "text style" in Sketch could solve the problem properly, just like the format painter in Mockplus. You can customize your own style and text, and just directly reuse it whenever you need. It can not only improve efficiency but also ensure the overall aesthetic.

3. Scalability

Scalability is also one of Sketch's biggest features. Sketch open a third-party plug-in interface that allows designers to easily find their needed plug-ins from hundreds of Sketch plugins. All the functions are convenient and effective for designers' work.
However, it needs to be clear that Sketch produces a static mockup, no dynamic interaction, and no teamwork and annotation. While interaction is the soul of a prototype design that is the most intuitive way to show the logic and ideas of a prototype.
Combining with Mockplus makes it easy to import the pre-design mockups in Sketch into an interactive prototype. What you need to do is just to install the Mockplus plugin in Sketch.
Mockplus 3.2 version supports Sktech design documents to export to Mockplus .mp file. So you can publish them as cloud projects, feel free to preview the projects in 8 methods; Moreover, you can also upgrade the individual projects to team projects, and collaborate and annotate with your teammates.
Sketch Plugin
Mockplus with Sketch
In addition, Mockplus 3.2 version also supports to generate UI flow and Mindmap mode instantly. The match of Sketch and Mockplus will help the designers improve their productivity greatly! Click here to learn more about the 3.2 version of the function:
Finally, here is a list of Sktech templates and learning resources, I believe you can quickly get started prototyping with Sketch, and create beautiful product prototype with Mockplus!
Sketch Import

Sketch Templates and Resources

4. Sketch

Sketch Tutorials und Tips

1. Sketch


Popular posts from this blog

5 Top UX Design Trends For 2018

With the rise of sophisticated technologies and intuitive website design, user experience has never mattered more. You need to keep in mind is that web design is not about implementing various innovations to your website only, but also about providing your visitors with exceptionality and greater utility. This is exactly why this field needs to be constantly changed and tailored to your users’ needs. Here are top 5 trends that will shape the ever-changing UX design world in 2018. 1. A Greater Influence of Content on UX Design image source: I have recently discussed the major UI design trends for 2018, from borderless display to cards. Apart from looking truly awesome, these innovative solutions work together towards reaching a common goal- making your content easily digestible and visually appealing. Today, the emphasis is put not only on the quality of content, but also on its visual elements. Put simply, web designers are striving…

5 Secrets To Design An Excellent UX Designer Resume and Get Hired

The Bureau of Labor Statistics (BLS) reports that there are three related industry positions that show exceptional promise - Software Development and IT, User Experience Design, Product Management and Project Management. UX designer becomes one of the hottest creative industry careers nowadays with a total job amount of 3,426,000, and the job growth is 22.1% in 10 years. CNN shares some researchers about UX designer’s salary: Median Pay is $95,000 and the top pay is up to $150,000. More information about UI/UX Designer Salary Around the World. Quite appealing, right? Would you like to be one of the trends? How to get hired? What skills should you master? If you are a UX designer already, pass this part. If you are a newcomer, check Beginner’s Guide: What Is An UX Designer to quickly get a basic understanding of it. Well. Now we assume you are all set to get a UX designer job. What do you need? Usually, the process you get a UX job including 5 steps: Step 1: Prepare your resume Step 2:…

Top 15 UX/UI Designers You Should Follow to Flow Out Inspiration in 2018

As is known, design is a rather broad and hard-to-define term. There are a wealth of different responsibilities encompassed by the term designer and design-related roles which have been existing in a wide range of areas, varying from print (publications and magazine) to industrial design (furniture and cars). With new design roles emerging in the industry, job titles like UX/UI designers seem to be confusing for both experienced and uninitiated designers. Before diving deeper, let’s have a quick look on the difference between UX and UI terms. User Experience (UX) designis a concept that has many dimensions and primarily concerned with how the product will feel. To solve a specific user problem, a UX designer will explore many different approaches, as any given design problem doesn’t have one single right answer. By identifying verbal/non-verbal stumbling blocks, UX designers refine and iterate to make the “best” user experience. Here is how Laura Klein (the author of UX for Lean Start…