Introducing useful tools for creating mockups for mobile apps!
Do you know the word mockup? In this article, instead of starting to write the code of the application from the beginning.
I will introduce a useful tool to first make a mockup to create an operation image of the completed application and then incorporate it into the code.
What is a mockup?
Mockup is a noun written as mock-up, and the dictionary at hand says ” a model made to the same size as the real thing “. Among the upcoming tools, Adobe XD and Sketch can create an overall model of the iPhone app.
The Paint Code introduced at the end allows you to freely create UI (user interface) parts, and the output code can be run in an actual iOS project.
Why make mockups
I think this varies from person to person, but I think the essence of mockups is “to see and understand.” It’s natural.
Do you understand it by yourself, or do you show it to others and understand it? I think it is not wasteful to materialize an idea as one of the communication tools.
Time is finite. Rather than talking about the image of movement, I think it would be better for the other party to spend the same amount of time making mockups and seeing them.
Two main tools for mockup creation
Images handled by these tools can be created with vectors, so they can be exported at the optimum resolution for devices with different resolutions.
* Adobe Experience Design CC
Adobe Experience Design CC, or Adobe XD for short, is a prototyping tool (synonymous with mockup tool) for websites and mobile apps (iOS, Android, Windows) provided by Adobe in March 2016. It has been published. Unlike other apps such as Photoshop, it is created from scratch for mac and features a very simple UI.
As of September 2016, it is a preview version, and anyone can freely download and use it for free. Since it is CC, it is thought that it will be sold and provided on Creative Cloud in the future. Only the Mac version is provided. The Windows version is scheduled for release in late 2016.
* Sketch
Sketch is a more flexible mockup creation tool for web and iOS apps. Unlike Adobe XD, Sketch allows you to add the features you need with plugins. You can also design app icons for iOS and watchOS.
Sketch has a history older than Adobe XD and was published around October 2015. It is a tool that is very user-friendly, with flexible functions such as plugins and an iOS UI that can be used immediately. There are a wide range of UI templates for Sketch, and many of them are available for free.
It is also possible to actually run the mockup on the iPhone by using the application for iPhone.
It’s a $ 99 paid app, but there’s a 14-day free trial as well. The 14 days of this free trial period appear to count the actual number of days used. I am happy that less than 14 days have passed since the installation. You can test the application at your own pace.
A tool that can create (code generation) iOS UI parts
* Paintcode
Parts can be generated with the above two tools, but Paintcode is a tool that can generate code for drawing parts on the screen.
When you draw a shape in Paintcode, the code (Objective-C, Swift, C #) required to draw it is automatically generated. Sketch also has a plugin for Paintcode, which allows you to create images with Sketch and generate code with Paintcode.
Embedding an image file in an application tends to increase the file size. Keeping it in code can reduce the size of your application, which can be a useful option if you need to reduce it.
Summary
In this article, I introduced Paintcode for linking Adobe XD and Sketch with its external services, creating and coding parts. It’s a fairly well-known tool, so it has a lot of information, and UX (ease of use) is also considered. I moved from Photoshop to Sketch + Paintcode. Why don’t you try it first?
I would like to write an article that explains how to use these tools.
Also, please let us know if there are any people who say, “This is a great tool!” Or “This combination is also good!”
Until the end Thank you for reading.
