Thursday, November 30, 2017

9 Best Tools For Designing a Mobile App UI

Design can never be static. Every project is different and so is the process that varies as per the product, personal preferences, team size and other relative variables, but when it comes to tools, you will find only a handful that is every designer’s pet. These tools pave the way for planning and brainstorming, help in clear communication of ideas, solve technical troubles to build mind-blowing animations and even sort interactions with the developers. Over the years, the app designers have worked relentlessly to refine their design tool kits so that they can fasten the workflow and execute right design decisions.
These tools pave the way for planning and brainstorming, help in clear communication of ideas, solve technical troubles to build mind-blowing animations and even sort interactions with the developers. Over the years, the app designers have worked relentlessly to refine their design tool kits so that they can fasten the workflow and execute right design decisions.
Yes, evaluating various extensions, plug-ins, tools and online resources have somewhat become necessary for the design cycle. The team must craft out high-performance mobile app solutions and make it a hit in the digital market.
For this, it is important to have some of the easy-to-use design tools that can transform your raw ideas in the most creative way and can collect useful feedback at an early stage of mobile app development. Here is a list of some of the amazing mobile app design tools, which will render your workflows, screens and pitches more robust with each project-

1. Sketch

sketch-mobile-app-design
Although Photoshop is a personal favorite with the designers, still some have made a switch to Sketch. This super graphic design tool possesses similarity to Photoshop but is more focused on UI/UX design. The tool is powerful, has a wide range of features and brings out professional results. It extends infinite zooming, 2x export, and styled vector shapes which are apt for multiple resolutions. Sketch offers an ‘Export All’ feature and as it is vector-based, there is no problem in exporting PDF, JPG, and PNG (optionally in 2x) files.
Generally, app designers prefer 3 different tools for 3 purposes namely Omnigraffle for wireframing, Photoshop for visual design, and Illustrator for vector logos. All these 3 tools are perfectly aligned with Sketch, thereby making one app fulfill all your needs and achieve overall productivity with no wastage of time.
The sketch is suitable to use owing to its simple operation and the feature which can design the symbols of common elements like buttons, tabs, headers etc with ease. It not only fires up the process of wireframing but also enables an easy hand-off to the visual designers. As we are employing the same tool in the visual design stage, there won’t be much trouble in updating wireframes into high-fidelity visuals.
All the changes that we have witnessed in-app designing have been made possible because of Sketch’s vectorized model, components like multi-resolution exporting and shared styles and symbols.

2. Marvel

marvel-mobile-app-design-tool



The Marvel app converts raw sketches on paper into engaging, tappable prototypes that permit you to demo your app ideas and collect feedback from others. It works perfectly well with .psd files, so you are not required to convert your designs before uploading.
Marvel saves the testing time consumed on changes as it automatically updates them in the background. By replicating the device, the web browser can successfully test your prototype very much in the natural milieu.
Leading you towards most realistic prototyping experience, this tool also gives the benefit of custom animations and fading between screens. Marvel, being an interactive tool, enables designers to import from Sketch, build prototypes of app interactions, animations, and transitions, and further forward these prototypes with stakeholders and developers. It is a convenient way to open up an entire flow to the customer as well, without being bothered by the static user flows.
Here, designers don’t have to be equipped with advanced programs like Framer and After Effects to include animations, transitions and other interesting features in their app layouts. Marvel permits any designer to form transition-based animations over various app screens speedily. The tool is used to prototype an entire app, especially the one with basic transitions in a large number of screens.

3. POP

pop-app-mobile-app-design-tool
If you found the Marvel app useful, but you are in search for a working prototype compatible with your Android device, POP app is what you need. It is the best application for mobile prototyping and makes the transition from paper to digital prototyping very easy. All you need to do is to take pictures of your sketches to upload them to POP, or simply upload .psd files to Adobe Creative Cloud. After this, you can smoothly shift between views, gestures, and interactions. As POP is integrated with Dropbox, thus there won’t be any trouble sharing your work with others.
What makes POP app different is that it commences with the images of your hand-drawn app sketches and connects them together onto your mobile. There is no visual constraint in the app as your drawn prototype is compatible with any device.

4. UXPin

uxpin-mobile-app-design-tool
UXPin is an intensive wireframing and prototyping web tool. Its simple interface and built-in features make you assimilate a design and create highly interactive wireframes and prototypes. Having drag and drop synchronization with Photoshop and Sketch, this tool systematizes the workflow keeping all the layers of the design intact. To execute design decisions, usability testing is also present which can help to perform tasks, count the users and their clicks and display results to the team.
UXPin adds efficiency to the design, testing, and rollout stages. Here, there is a dynamic toolkit that consists of various design elements and patterns for creating brilliant designs from scratch. The UI libraries are a great source with several ready-made features including bootstrap elements.
The drag and drop interface of UXPin enables you to build wireframes and prototypes that are compatible with multiple devices with a range of screen sizes and resolutions. Other powerful components are the intuitive commenting system, real-time joint editing and easy-to-share previews. A spectacular add-on is Smart Guides, wherein you can measure the exact distance between the elements.
It is possible to edit all the images within UXPin, i.e., you can change brightness, sharpness, contrast and transparency with ease. The tool also gives the advantage of exporting the finished prototype to pdf, HTML or png formats. Thus, you can successfully execute interactions that can improve the performance of the entire project. The UXPin library supports all the three platforms-iOS, Android, and the web.

5. Proto.io

proto.io mobile app design tool
A great zero coding wireframing tool, Proto.io makes highly engaging prototypes that have the look and feel similar to the mobile apps you are building. Also, this tool can be utilized for testing your prototype designs on multiple devices. Another gripping feature of Proto.io is that there are actions which add to the efficiency of the application. Some of the fascinating features are Dropbox sync, Adaptive UI libraries, Material Design UI Library and Offline mode etc.
Here, you can have swift screen transitions, make orientation changes or touch gestures and even test each prototype on any device iPhone, iPad or Android to suit the complete purpose. Initially intended for mobile apps, Proto.io has found its markets in other emerging internet-connected devices like smart TVs, refrigerators, alarm clocks and cars, gaming devices and Google Android Wear. It is a fairly functional app for the designers as they can incorporate quick changes and further, pass on the prototypes to other members conveniently.

6. Zeplin

zeplin-mobile-app-design-tool
Zeplin is a plugin and web app that is compatible only with Sketch. It combines all the attributes of the shortlisted elements into a collective specifications sheet, which clearly explains the handoff between the design and developer teams. With this app, you can frame living, breathing, and interactive specification sheets. Zeplin is useful as the designers are not required to wait until the end of the design process to hand over the specs to the developers.
The developers can be introduced to the process much earlier and then iterations can be done as per the need of the course. The app can cut the speccing time to a great extent and thus, enhance the overall app speccing process.

7. Axure

axure-mobile-app-design-tool
If you are looking to create fully interactive UI mockups and wireframes, Axure is the wireframing tool just meant for you. Being a zero coding platform for wireframing websites and applications, Axure consists of all the documentation tools that are needed to pass the design choices and document the layouts.
You can opt for either the Standard edition or the Pro edition which has extra collaboration and documentation elements. It is indeed the largest application devised for advanced prototyping solutions. Speed is the best characteristic of Axure as you can quickly form prototypes of responsive websites and mobile applications.
You can easily add interactions, make Master pages and choose ready-made elements and patterns from Widget libraries. Additionally, you can import images, add colors, gradients and maneuver the transparency of each object. The version 7 of Axure supports excellent framework that has unique web fonts, events, string functions and convertible prototypes.

8. JustInMind

Justinmind-mobile-app-design-tool
A wonderful prototyping tool, JustInMind allows better and faster prototyping for websites and mobile apps. Created in 2008, the best feature of JustInMind is that it can be downloaded to your computer, not the just browser, which gives the option of working offline. Not only you can design self-explanatory wireframes, but receive feedback on the same instantly. Being a dynamic prototyping tool, JustInMind is accompanied with a superb widget library that permits you to enter HTML, videos, online widgets, docs, interactive maps and online/offline content in your website or application.
From websites to advanced administration, the application does its wonders for everything you want to create. You can add elements from UI libraries and build Master pages easily. A big merit is that you are able to download add-ons through ready-made modules, which has bootstrap elements too. Also, now conveniently share mobile prototypes with other team members and conduct testing on your smartphone. Simplicity works in favor of JustInMind, but there are times when a lot more is expected from the performance.

9. HotGloo

Hotgloo-mobile-app-design-tool
HotGloo is a robust wireframe UX prototyping tool that gives you the control to prototype any type of mobile application which needs a particular user interface. Developed with extraordinary interactive features, HotGloo allows more than one app designer to collaborate on a single app wireframing project. Through this tool, you can work on your wireframing project anytime anywhere around the clock, without the barrier of the browser or operating system you are accessing.

Last Note

Wireframing is one of the most significant stages of website/app development process and you just can’t ignore it. The tools mentioned above will definitely quicken your design process, thereby giving you more time to refine your design with pleasant touches. These mobile-focused design tools will churn out systematic and easy to understand mockup/wireframe for your application, so that you can deliver delightful results. Remember, right approach always pays off as users appreciate intuitive or natural experience any day.

Friday, November 10, 2017

Run Xcode 7 UI Tests from the command line

Get started with UI Tests to automate User Interface tests in iOS 9

Apple announced a new technology called UI Tests, which allows us to implement User Interface tests using Swift or Objective C code. Up until now the best way to achieve this was to use UI Automation. With UI Tests it’s possible to properly debug issues using Xcode and use Swift or Objective C without having to deal with JavaScript code.
First, you’ll have to create a new target for the UI Tests:
Under the Test section, select the Cocoa Touch UI Testing Bundle:
Now open the newly created Project_UI_Tests.swift file in your Project UI Tests folder. On the bottom you have an empty method called testExample. Focus the cursor there and click on the red record button on the bottom.
This will launch your app. You can now tap around and interact with your application. When you’re finished, click the red button again. 
The generated code will look similar to this. I already added some example XCTAsserts between the generated lines. You can now already run the tests in Xcode using CMD+ U. This will run both your unit tests and your UI Tests.
You could now already run the tests using the CLI without any further modification, but we want to have the UI Tests in a separate scheme. Click on your scheme and select New Scheme.
Select the newly created UI Test target and confirm.
If you plan on executing the tests on a CI-server, make sure the newly created scheme has the Shared option enabled. Click on your scheme and choose Manage Schemes to open the dialog.

Launch the tests from the CLI


xcodebuild -workspace App.xcworkspace \
           -scheme "SchemeName" \
           -sdk iphonesimulator \
           -destination 'platform=iOS Simulator,name=iPhone 6,OS=9.0'
           test
It’s important to also define the version of Xcode to use, in our case that’s the latest beta:
export DEVELOPER_DIR="/Applications/Xcode-beta.app"
You can even make the beta version your new default by running
sudo xcode-select --switch "/Applications/Xcode.app"
Example output when running UI Tests from the terminal:
Test Suite 'All tests' started at 2015-06-18 14:48:42.601
Test Suite 'TempCam UI Tests.xctest' started at 2015-06-18 14:48:42.602
Test Suite 'TempCam_UI_Tests' started at 2015-06-18 14:48:42.602
Test Case '-[TempCam_UI_Tests.TempCam_UI_Tests testExample]' started.
2015-06-18 14:48:43.676 XCTRunner[39404:602329] Continuing to run tests in the background with task ID 1
    t =     1.99s     Wait for app to idle
    t =     2.63s     Find the "toggleButton" Switch
    t =     2.65s     Tap the "toggleButton" Switch
    t =     2.65s         Wait for app to idle
    t =     2.66s         Find the "toggleButton" Switch
    t =     2.66s         Dispatch the event
    t =     2.90s         Wait for app to idle
    t =     3.10s     Find the "toggleButton" Switch
    t =     3.10s     Tap the "toggleButton" Switch
    t =     3.10s         Wait for app to idle
    t =     3.11s         Find the "toggleButton" Switch
    t =     3.11s         Dispatch the event
    t =     3.34s         Wait for app to idle
    t =     3.54s     Find the "toggleButton" Switch
    t =     3.54s     Tap the "MyButton" Button
    t =     3.54s         Wait for app to idle
    t =     3.54s         Find the "MyButton" Button
    t =     3.55s         Dispatch the event
    t =     3.77s         Wait for app to idle
    t =     4.25s     Tap the "Okay" Button
    t =     4.25s         Wait for app to idle
    t =     4.26s         Find the "Okay" Button
    t =     4.28s         Dispatch the event
    t =     4.51s         Wait for app to idle
    t =     4.51s     Find the "toggleButton" Switch
Test Case '-[TempCam_UI_Tests.TempCam_UI_Tests testExample]' passed (4.526 seconds).
Test Suite 'TempCam_UI_Tests' passed at 2015-06-18 14:48:47.129.
   Executed 1 test, with 0 failures (0 unexpected) in 4.526 (4.527) seconds
Test Suite 'TempCam UI Tests.xctest' passed at 2015-06-18 14:48:47.129.
   Executed 1 test, with 0 failures (0 unexpected) in 4.526 (4.528) seconds
Test Suite 'All tests' passed at 2015-06-18 14:48:47.130.
   Executed 1 test, with 0 failures (0 unexpected) in 4.526 (4.529) seconds
** TEST SUCCEEDED **

Generating Screenshots

No extra work needed, you get screenshots for free. By appending the  derivedDataPath option to your command, you tell Xcode where to store the test results including the generated screenshots.
xcodebuild -workspace App.xcworkspace \
           -scheme "SchemeName" \
           -sdk iphonesimulator \
           -destination 'platform=iOS Simulator,name=iPhone 6,OS=9.0' \
           -derivedDataPath './output' \
           test
Xcode will automatically generate screenshots for each test action. For more information about the generated data, take a look at this writeup by Michele.

Next Steps

To create screenshots in all languages and in all device types, you need a tool likesnapshot. snapshot still uses UI Automation, which is now deprecated.
I’m currently working on a new version of snapshot to make use of the new UI Tests features. This enables snapshot to show even more detailed results and error messages if something goes wrong. I’m really excited about this change 👍
Update: snapshot now uses UI Tests to generate screenshots and the HTML summary for all languages and devices.

Install Packages with Homebrew for OS X

homebrew and homebrew cask header
Homebrew is the most popular package manager for Mac OS X. Homebrew Cask extends Homebrew with support for quickly installing Mac applications like Google Chrome, VLC, and more. No more dragging and dropping applications!
This is an easy way to install Mac terminal utilities and graphical apps. It’s a bit like Chocolatey or OneGet on Windows, or the package managers included with Linux. It’s even a way to install many of the useful apps that aren’t in the Mac App Store.

The Basics

Homebrew is a package manager designed for installing UNIX tools and other open-source applications on Mac OS X. It will quickly download and install them, compiling them from source. Homebrew Cask extends Homebrew with support for installing binary apps — the kind you normally drag to your Applications folder from DMG files.

Install Homebrew and Homebrew Cask

First, you’ll need the command-line tools for Xcode installed. On a modern Mac OS X system, you can install these just by running the following command in a Terminal window. You could also install the full Xcode application from Apple, if you prefer — but that takes up more space on your Mac and isn’t necessary.
xcode-select --install
xcode-select install
Next, install Homebrew. You can just open a Terminal window, copy-paste the following command, and press Enter:
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
This script informs you what it will do. Press Enter and then provide your password to install it. By default, it installs Homebrew so you can use the brew command without typing the sudo command and providing your password.
install homebrew
Run the following command once you’re done to ensure Homebrew is installed and working properly:
brew doctor
brew doctor
Once you’re done, run the following command to install Homebrew Cask. It uses Homebrew to install Cask:
brew install caskroom/cask/brew-cask
install homebrew cask

Install Graphical Apps With Homebrew Cask

Now you can get started installing those graphical apps you want. This involves some very simple commands. To search for one, use the following command:
brew cask search name
To install an app, run the following command. Homebrew Cask will automatically download it, extract the app, and install it to your Applications folder.
brew cask install name
To uninstall an app with Homebrew Cask, run the following command:
brew cask uninstall name
homebrew cask search install

Install Open-source Utilities With Homebrew

The Homebrew command is the underlying package manager that installs all those UNIX and open-source utilities you might want. It’s the easiest way to install them on Mac OS X, just as it is on Linux. Like Homebrew Cask, it uses simple commands.
To search for a utility:
brew search name
To download and install that package:
brew install name
To remove that package from your system later:
brew remove name
install with homebrew
For more details on using these commands, read the Homebrew Cask Usage guide or the Homebrew brew command manual on their official websites. Not every graphical application or Unix utility you’re looking for will be available, but most of them probably will be.

Unfortunately, there’s no graphical user interface for Homebrew Cask. This is a shame, because — while we geeks love easy terminal utilities — many people could benefit from easy software installation on Mac OS X. They can avoid all the downloading DMG files and clicking around. And, since Mac OS X is now home to Windows-style installer crapware, Homebrew Cask is a way around that.