Author:Digital Marketing

About Digital Marketing

Adobe Photoshop CC - Important Features for UI Design – Part 2

adobe part 2This is the second part of our previously written article about Adobe Photoshop CC. You can read that article here. We have already discussed Artboards, library, Generate Assets and Touch Bar Support in the previous write-up. Here we will be looking at other important UI features in Adobe Photoshop CC like
  • Device Preview
  • Adobe Stock
  • Adobe Typekit
Device Preview This is a cool feature in Photoshop CC which makes the life of UI designer simpler. Now you can live preview your designs in Photoshop on multiple Apple devices. There is an IOS app called Adobe Device Preview where you can see the live changes from your Photoshop artboards. These IOS devices can be connected either using a USB port or using Wi-Fi. To see live preview using Wi-Fi you need to be connected with Creative Cloud both in Photoshop and in Preview CC. Make sure both the devices are connected to the same Wi-Fi network. You can see the list of available devices in Device Preview tool in Photoshop CC, select your device and the app will render the live preview. Device preview works both on iPhone and iPads which are running on iOS8 and above. Adobe Stock This is a service by Adobe where designers and businesses worldwide can access over 45 millions images, videos and vectors. These images are not only royalty-free but also are of the highest quality. You can access them directly in the library of Adobe Photoshop CC. You can search for the image using the Creative Cloud library and drag the image of your choice to the project. When you are satisfied with the image, then you can license it. By default, they come with Adobe Stock watermark. You can also resize and add effects to the image before deciding to license it. You can license it directly from inside the library and no need to go their website. This increases the productivity of designers saving them valuable time. You can either pay per license or you can opt for a subscription model that suits your requirements. Adobe Stock has got 4 subscriptions right now. They are
  • 3 Standard Assets per month @ 30USD
  • 10 Standard Assets per month @ 50USD
  • 40 Standard Assets per month @ 80USD
  • 750 Standard Assets per month @ 200USD
Adobe Typekit This is a subscription service by Adobe which provides 2400+ fonts to choose from. You can sync these fonts to your local computer and use with Adobe Photoshop CC or you can also use them for your websites. To start using them you should be a member of Creative Cloud, if not you need register in Typekit separately. Once logged in you can surf through 1000’s of fonts and select the one which you prefer. On the Font page, click on the sync button. This will download and install the font on your local machine. To use it for websites you need to add them to a kit. Once done they will provide you with a javascript embed code. You can make necessary customizations before buying the font. They have both free and paid fonts.
Continue reading

Responsive Testing Tools

Responsivetools Web designing as an industry has evolved over the years and has adapted to all the technological changes happening worldwide. Initially, websites were viewed only on a desktop computer and then came the laptops. In the last 2 decades countries have embraced the idea of mobility with open arms. Now in most of the developing and developed countries majority of the population are accessing websites using their Smartphone. Web sites which were originally designed for the dimension of a desktop screen were not user-friendly on a small mobile screen. This led to the need for a responsive design. When a website is responsive, it adapts or changes based on the screen size it is being accessed from. The layout of a responsive website looks completely different on a laptop compared to a mobile. Basically, there are 4 different screen sizes that are being defined in the responsive design analogy. They are
  • Large screen desktops
  • Medium-Screen Laptops
  • Tablets/iPads
  • Smartphones
One can define each screen size and vary the design layout accordingly. The same website, when viewed on different devices, will render the content in a layout that is suitable for that device screen. Mattkersley This is a simple website where you can input your website URL and it will be rendered on all device sizes simultaneously for your review. This also includes iPad-Landscape. Responsive Design Checker This website provides you output in 10 different device sizes at the same time. This is extremely useful and also support 11-inch Macbook Air. Responsinator This is another cool tool to test the responsiveness of your website on a mobile device. It provides output in various small screen devices size both portrait and landscape modes. Responsive Design This site has got a bookmarklet tool for your web browser. Once installed, you can test the responsiveness of any website just by clicking the bookmarks. Another useful feature of this tool is to test the responsiveness of local websites and take screenshots of them during the development process. BrowserStack This is a mobile emulator tool where you can preview and take screenshots of your website on all popular mobile device brands. Since they support each brand and model, it gives you a more accurate output. Screenfly You can test the output of your responsive website on all device sizes including that of a television and take screenshots. Responsive Test You can just enter your website URL and test the output in all screen sizes. In addition to that, you can also enter your dimension manually test the website display. Viewport Resizer This is a bookmark tool which lets you test the responsiveness of any website while you are surfing. You can use media queries to generate specific output sizes. Blisk This is more of a tool which you need to download to test the responsiveness. This tool is significant because it works offline and supports most of the development IDEs. You can check for responsiveness at the time of development and also at the time of debugging. You can also take screenshots and record your screen as a video. Listed above are some of the tools for testing the responsiveness of your website on various device sizes.
Continue reading

Adobe Photoshop CC - Important Features for UI Design – Part I

Adobe Photoshopcc Adobe Photoshop which has been the go-to tool for designers worldwide for more than a decade, started supporting User Interface design in recent version. Adobe Photoshop CC has come out with many features with which one can create UI both for the web and mobile apps. It also supports HTML5 and open source. Now let us look at some of the tools and features in Photoshop CC which assists in UI design. Artboards Artboards are especially useful for designing mobile apps and responsive design. You can design for multiple screen sizes and see the preview at the same time for all devices in a single document. You can have multiple design layouts in one document using artboards. To create a new artboard, just create a new document control+N -> then select the document type as artboard. You can select any one of the many preset device sizes. You can alter a number of artboard properties. Just select the particular artboard in the layers panel and click on properties. You can change the following
  • Artboard size
  • Orientation
  • Alignment
You can also manually resize the artboard using the drag and scale. Consider you have designed the artboard for an iPhone, you can easily replicate the same for an iPad. Just duplicate the artboard layer and select properties and change size. Library Now you can store your frequently used layers in Photoshop libraries and access them easily both locally and also in the cloud. CC Libraries is a web service that allows you to access your assets anytime anywhere. You can also use your assets stored in the library in Illustrator. You can also store other aspects like layer groups, text styles, layer styles and colors. You can also view these libraries on a web browser instead of opening in photoshop. To do this, just click on the fly-out menu in the library and select “View on Website”. Generate Assets Now you can save each and every layer in your photoshop as a separate image asset. All you have to do is to append your layer name with an appropriate image extension. Currently, supported extensions are .PNG, .JPEG, .SVG and .GIF. You also have the facility to mention the image quality and size for the newly generated assets. Generating image assets is particularly useful for Mobile Apps. To generate assets, just click File->Generate->Image Assets Then append the extensions to the layers or layer groups. The newly generated assets are stored in a subfolder along with the source PSD file. If the source PSD file is yet to be saved, assets are saved in a new folder on your desktop. Touch Bar Support If you are MacBook Pro user then you are aware of the new cool Touch Bar. Adobe Photoshop now supports multi-touch display bar in MacBook Pro. You can access any one of the below 3 things in the touch bar for photoshop.
  • Layer Properties: This is the default option and it allows you to modify layer properties easily.
  • Brushes: You can work with the brush and paint properties of Photoshop
  • Favorites: You can customize this area and add your favorite tool.
You can access any one of the top 3 mentioned modes in touch bar. Each mode supports various inner level functionalities too. It also provides other context-sensitive operation based on what you are currently doing and which tool you are using.
Continue reading

Mobile App Frameworks

mobileapps Android and iOS applications development is no longer considered to be native programming. You can start developing apps using your knowledge of HTML, CSS and Javascript. One of the big advantages of using web technologies to develop mobile applications is that they can support many platforms and no need to code it separately. You can write singular code and declare it for both iOS and also Android. Now let us look at some of the popular mobile app frameworks available now. IONIC IONIC is easily the most commonly used HTML 5 web framework for developing hybrid mobile apps. It is a powerful front-end framework for developing hybrid apps built using SASS. Mobile Angular UI You can develop beautiful looking HTML 5 mobile apps using bootstrap 3 and Angular JS. It is a mobile UI framework similar to jQuery Mobile but no dependencies to jQuery and built using Angular JS directives. Intel XDK It is a simple and easy to use app development framework provided by Intel. It provides a simple interface where you can construct apps using drag and drop modules. Their tool is available for free download on Linux, Windows and Mac. It has got many built-in templates which can be used to design and develop apps. It also provides support for many popular UI frameworks like Twitter Bootstrap, jQuery Mobile and Topcoat. At the time of development, you can connect your device and see a live preview of the app at the same time. Appcelerator Titanium It is one of the completely open source mobile application framework which provides an easy platform for developing native apps. You can write the code in Javascript and deploy the app across platforms easily. It has a drag and drop app designer with which you can create APP UI in minutes. You can see the live preview of the UI that is being created and provides bi-directional updates between code and design. The same app can be used for various platforms for Android, iOS and Windows. It also comes with Cloud service which can be used as App backend. Sencha Touch It is another HTML 5 web framework for developing cross-platform mobile apps. You can use Javascript to create hybrid apps which look similar to native apps. The app can be deployed on platforms like iOS, Android and Blackberry. Kendo UI Kendo UI uses jQuery for developing hybrid mobile and web apps. If you are familiar with jQuery then getting started with Kendo UI is really easy. Kendo UI has also support for Angular now. Unlike other frameworks Kendo UI is not free as it depends on many jQuery widgets which are commercially licensed. PhoneGap This is a platform to packaging and releasing the app directly. It uses open source Cordova which is an Adobe product. PhoneGap compiles and release the app directly in the cloud which can be used as the backend. React Native Unlike other app frameworks, React Native is a web framework to develop native android and iOS apps. It uses javascript and React to design and develop apps.
Platform Languages License Target
IONIC iOS,Android HTML, CSS, JS Free Hybrid
Mobile Angular UI iOS,Android Angular JS, Bootstrap 3 Free Hybrid
Appcelerator Titanium iOS,Android HTML, CSS, JS, PHP Free Native
Kendo UI iOS,Android Windows,Blackberry PHP, Java, Ruby, C#, HTML, CSS, JS Commercial Hybrid Web
PhoneGap iOS,Android,Windows, Blackberry,Watch OS, Firefox OS HTML,CSS,JS Free Hybrid
Continue reading

How to add Google SignIn using Android Firebase

Google SignIn Firebase is a Google-owned platform for developing both Mobile and Web applications. It provides the necessary tools and infrastructure for developers to create apps. The list of services provided by Firebase are:
  • Analytics
  • Could Messaging
  • Authentication
  • Real-time Database
  • Storage
  • Hosting
  • Test lab for Android
  • Crash Reporting
We will be looking Authentication service using which we will be creating Google Signin for our apps. Now a day’s most of the apps required login functionality and most preferred login method is Social Login. Login with Facebook, Login with Google, etc. We will be setting up Login with Google using Firebase Google Signin. Firebase Module
  1. Visit Firebase website and create a free developer account. and create a free developer account.
  2. Create a New Project to get started. Please provide a suitable name for your project and also select your country and go to next step.
  3. In the subsequent screen, select “Add Firebase to your android app”. Add your package details along with Debug Signing Certificate SHA-1 key. To add Google Login, integrating your SHA-1 key is compulsory.
  4. Now a file named “google-services.json” will be downloaded. Save it to your local system, we need to add this to your Android app later.
  5. We have created a Firebase project and integrated our app via package name, the next step is to enable Google login in Firebase.
  6. Click on the Auth Menu -> SIGN-IN METHOD. In this screen, select Google and enable the same.
We have created a free account, added a project and integrated it with our app package name and enabled Google Login. Now we need to create our android app and add Firebase project to it. Android Module
  1. Create a new project in Android Studio and select default activity and proceed.
  2. In the project details section, enter the same name as the one you used in Firebase for the package name.
  3. For Google Signin to work, your app needs to access the internet. To give internet permission to your app, open AndroidManifest.XML file and add the following line “<uses-permission android:name="android.permission.INTERNET" />”
  4. Now we need to add the google-services.JSON file which was downloaded from Firebase project to our app. Just copy and paste the file to your Android Studio’s Project app folder.
  5. The next step is to add Firebase dependency to your app. Just open build.gradle file and add the following lines
classpath '' apply plugin: '' To summarize these are the list of steps required.
  1. Create free account in Firebase and create a new project
  2. Add Package name for linking purpose
  3. Enable Google Login and downloaded google-services.JSON file
  4. Create a new android project in Android Studio using the same package name
  5. Add the google-services.JSON file to the project app folder.
  6. Add necessary permissions and dependencies to your project in build.gradle.
  7. Now both the Firebase Google Module and the android app are ready and linked. Now you need to write the code to call Firebase APIs and accept Google Login in your app
  8. You can do both google login and also create new accounts using Firebase Google login.
This is an out-of-the-box option provided by Firebase which can be used by developers to easily enable Google Login for their app users.
Continue reading

Identifying the Right Design Pattern

Identifying the Right Design patterns When it comes to designing the UI for the application, one can either follow any one of the already available design patterns or create something on their own. Design Patterns are probable solutions for some of the common UI design problems. They are not a template or feature that you can just add to the app instead, they are just a set of guidelines that defines how to solve the problem. Designers face some recurring problems while designing an app or a website like navigational structure, color schemes, typography, etc. Let’s assume that you are given the responsibility to develop a mobile friendly website’s navigation menu. There are various ways a menu can be represented in a mobile, but the most common solution is to use a toggle. This is an example of a design pattern. Now let’s look into some of the effective UI design patterns. Lazy Sign-up Design Pattern Most of the applications today require user management. Converting the visitors into registered users is a top priority for all the websites and app. It is not easy to make the user provide their contact information right away unless you are a reputed and trusted brand. If you’re going to ask the user to register/login to view the website or access the app, then it is highly likely that they might not do so. Users prefer to spend time experiencing the interface before deciding whether to register or not. So it’s a good design pattern to provide the option to the user to allow the interface for a specific amount of time or events before asking them to signup. This is called as a Lazy Sign-up design pattern. Once the user gets the feel of the website/app, he will feel much more comfortable to register and take the next course of action. Social Accounts Login Despite providing lazy registration, some users might be scared of looking at a longer registration form. Users prefer to do things which are simple and less time-consuming. The traditional approach is to ask them to fill a form and then send a confirmation email. This approach requires a lot of actions to be done by the user. This can be simplified if we provide them with the option to login using their social media accounts. The register screen will display possible social media icons like
  • Connect using Facebook
  • Login using Twitter
  • Login using Google+
The users can just click the account of their preference and they will be automatically registered. There is no need to fill a form or take any other action. This design pattern also removes the need to remember multiple passwords. All the social media sites provide their free APIs for integration. Navigate Website Sections Single page websites have gained popularity in recent years. Though they are extremely fast there is one drawback in it. The single page website might contain a lot of sections on the same page. It becomes difficult to access the particular section of user’s choice. The concept of infinite scroll UI is easy on eyes but might be a burden to the user. If the user has scrolled down to section 12 and if he wants to scroll back to section 2, he has to manually scroll all the way up. This is not a good UX. This can be handled in two ways Fixed Navigation Menu: The menu will stay on the top forever, it will be always visible even when you keep scrolling. This will make sure, the user can access the menu to reach other sections easily at any given moment. Jump-to-top Button: This is a small button that is mostly displayed at the right bottom corner of the screen always. When clicked user will be taken back to the top of the site always. This is really useful for e-commerce products page and long blogging articles. Long story short, there is no pre-defined rule to select the correct design pattern. You need to understand the problem in hand and analyze how to deliver the best user experience and choose the design pattern accordingly.
Continue reading

UX the way to move forward – Importance of UX over the standard UI mindset “Breaking the barriers”

Let’s first understand the underlying difference between an UI and UX. These two terms are always used together which might cause some confusion. To explain the difference in simple words; UX the way to move forward “UX is focused on the user’s journey to solve a problem, UI is focused on how a product’s surfaces look and function” – Ken Norton UI is the design aspect which focuses on how the elements should appear on the screen like their size, color, alignment, etc. UX is how the user interacts with the interface and move from one screen to another. The term UX has become extremely important for mobile app development in recent years. Most of the companies now understand the importance of UX and hire expert UX designers. UX is a science while UI is more of an art. UX is what defines how a user interacts with the app and the process flow. To understand it better, here is a small real life example Imagine yourself placing an order in a normal restaurant and in a luxury 5-star hotel. Now think how the waiter will interact with you in a normal restaurant and in a 5-star hotel. This is defined by User experience. A Waiter in a 5-star hotel greets you with a pleasant smile and takes your order with a lot of patience and also answers any questions you might have. This is the reason why people who visit such places becomes loyal and prefers to visit again. The waiter in a local restaurant who is not well paid and trained, will not greet you with a smile and might not even have the patience to list out the full menu. This bad experience will drive away customers. Same applies to UX design; it is how your app interacts with the end user. If it's pleasant, simple and direct, then the user will be satisfied, else they are most likely to uninstall the app. A good UX should be simple and should not confuse the user. It should be intuitive in the sense; the user should navigate from one screen to another without thinking at all. Slowly but steadily, it will be the quality of UX that will determine the competition. Just a few years back, it was the service and pricing which made a business stand out in the competition. With mobile apps, it is the app with the best UX will win more hearts than the one which offers the same in lesser price. Let’s consider there are two hotel reservation apps that offer the same functionality. Let's assume APP-A1 takes 20 minutes to book a hotel room and APP-B1 takes 5 minutes for the same, then users will prefer to use the second app. A bad UX is one of the primary reasons why users uninstall the app these days. In near future, UX will slowly overtake UI and will be the forefront of app development. With the growth IoT, VR, etc, UX becomes much more sophisticated and equally important. A company cannot launch an app with a perfect UX always, it is a continuous process. There will be instances where a company might launch an app update just for UX sake.
Continue reading

2017 mobile App UI/UX Trends

  According to a survey there are over 2.4 million apps available in Google Playstore alone in 2016. Mobile app development is the future and the most crucial part of app development is UI/UX and security. User Interface design and User Experience have evolved over the past 3-4 years. This article will explore various UI/UX trends to be popular in 2017.
  1.  Micro-Mini Interactions
These are basically small animations that happen in response to a user event. User event can be a touch, drag and drop, double tab, etc. The objective of these micro-mini animations is to enhance user experience. When a mobile app user touches the check box, instead of just enabling the tick mark, you can show that tick with a fade animation from bottom to top. This will give a pleasant effect to the user and keeps him engaged. 2017 mobile App UI
  1. Age-Responsive Design
Designers have been using the responsive design for years now, which basically means the website will adjust based on the device size the user accesses it. Age-Responsive design is a step further in that direction. Here designs will vary based on the age of the user who is reading it. We can determine potential age of the end user based on product we’re developing. If the website is selling hearing aids, then their primary target audience will be elderly people. So a design which has higher font size and letter spacing will make easier for them. If the website is selling printed t-shirts, then age responsive design can use small animations, bright colors, etc.
  1. Interactive Walkthrough
This is basically showing the demo of the app to the user in the welcome screen. It can be a small animation or a video. It can also be a set of slides explaining the product workflow. You need to have a complete app before designing the walkthrough. You can also include the screenshots of various screens in your app. This is where you showcase the most important aspects of the app to the user. It is imperative that you provide the skip option to the user.
  1. Virtual Reality & Artificial Intelligence
Both the terms VR and AI have been in practice for a long time now. In recent years they have become more affordable to end users. Now they are part of mobile apps. The design for a VR should change with respect user actions like head movement, acceleration, etc. In a VR a user sees things in real time, so make it beautiful.
  1. Simple User Interface
The basic idea is to showcase only the important things and remove unnecessary things from the app. Do not confuse the user with many options; instead give him only what he wants to see. An important aspect of simple UI is the Invisible UI. In an invisible UI, we completely remove the UI and make the content as the UI. An example is Google maps who recently removed all the buttons and showed only the map.
  1. Internet of Things - IoT
Designing UI for a normal app and an IoT app is totally different. A user in IoT interacts in a different manner. App is only one part and there is the primary hardware device. Here the primary focus should be how the app interacts with the device through the user actions.
  1. Mobile payments
Mobile payments and wallets are the most trending topics in mobile apps now. When designing a mobile payment app, don’t focus too much on the graphics instead give importance to the following things
  • Make it fast and smooth
  • Give instant response – keep the user well informed
  • More focus on security and gaining user trust.
  • Easy access to their balance
  • Make it seamless
  1. Touch ID
A Fingerprint sensor on the mobile is not something new. There are many mobiles which come pre-built with this hardware. Now you can let users login to your app using touch id. No need to remember login credentials and is secure. Card Design - Cards are basically dominating mobile design as it is present everywhere from websites to native apps. They are designed to look like their physical counterparts. They are neat, little containers for information and a style made for apps. Card-style design lies at the intersection of design for desktops and mobile devices. It bridges the gap between interaction and usability. It creates a consistent experience regardless of device. It is basically used as an interface and distraction. Cards work well with content. Metro (from Microsoft) and flat-style cards were some of the earliest uses of cards that were specifically for apps and mobile devices. Google Maps uses layered cards to help users navigate and find the exact location. To conclude, cards will continue to stay as a fixture in mobile app design.
  1. End of Hamburger Menu - The hamburger menu is one of the embarrassing design conventions of recent years. It is not regarded as a default, unquestioned solution for mobile navigation anymore. It’s called a “hamburger” as it looks roughly like a bun-meat- bun sandwich. The idea of it was to hide site navigation on smaller screens. This design pattern accomplished a major goal by preserving precious real estate on mobile, tablet or other small screens.
Continue reading