From Wireframes to Design

Creating a Mobile Application Mockups

Website Wireframing Methodology

Website wireframes are grayscale line drawings used as blueprints during the development cycle. They help developers, designers & key project stakeholders build a shared understanding of site functionality before spending time and resources on design and development. In other words, wireframes define what the product will do when complete.

Key Benefits:

Wireframes are great if you are not sure how to best communicate requirements and specifications in a way that is easy to understand for all project stakeholders.

UI-interfaces design

Visual brand identitification on the site.

Interface design includes solutions of colors, shapes, background images, which are under the brand identity or corporate identity of the company.

Visual design of microinteractions is performed by creating a micro-UI elements.

Micro-UI is secondary elements of a smaller size interface relative to the main one, which carry additional information about the ongoing activities. For example, switching accounts in Android-application the Inbox displayed as a choice between two user’s photos of each profile. In the same application there is a micro- gestures – quick letter deleting.

Animation makes an interface more intuitive and can even specify some details of the design. An example of successful animation usage for interaction is design-concept of Material design from Google.

Animation shows the reaction of the interface on the vernal command from the user: press, click, gesture. The animation shows how the machine accepted the command and confirms its accuracy. For example, the element deliquescent circles in Android material suggests that a click/press happened and now commands are performing – will be opened the post on Facebook, start a music track, and so on.

Animation creates a responsive interface, teaches the user, generates his information waitings on work with the interface or application.

Also, animation combines several elements in the same context. As a result, the user understands that these elements may be involved in one operation, and focuses attention on them. Therefore, the animation is often used in primary submersion ot the user and interface promotes storing stroke action to accomplish the task.

Animation lets you save space on the screen and beat it nice: static element can hold the whole taskbar and open it only on-demand of user – pressing or click.

The princip of mobile first: first think how the interface will look and behave on a mobile device:

  • in the first place – we show the importance of the content to the user;
  • Mobile devices are used in areas with different connection quality, so the design and implementation should focus on optimizing for the mobile Internet;
  • User-friendly interface for navigation in a mobile device;
  • correct use of screen space;
  • reducing the user time to perform a task or content production.

Interactive interface types, whose behavior indicates to the user the next action – these are wizards (wizard is a guide).

The need for wizards occurs when the user needs to achieve a specific purpose (eg, correctly fill out the profile on the site) must make a number of settings. The user himself can not cope with the task, because he does not know what data is needed for the system to work correctly. Therefore wizard “leads” him along the task, consistently showing the screen behind the screen, in which is needed to perform the action. The sequence of actions and a set of options for them are determined by the UX-designer, and UI-designer uses graphics and animations to make this interaction understandable, easy, and what is the most important – successful.

The knowledge of design implementation helps to prevent difficulties in development and contributes to the normal communication between teams of designers and developers.

We offer only unique design solutions, but with an eye to the possibility of their embodiment without functionality sacrificing, page loading and ease of use.

standard package of source files under web-development
  • Source files ( Psd, Ai, Eps.)
  • UX-card
  • Patterns of UI elements are on request

What is not included in standard package

In stantard package are not included such services as design-support, marketing kit implementation.

UX-design interfaces

Interaction design

Sites dashboards, console for developers, control panels and other complex interfaces.

UX-interface designer tasks ares much wider than the visual solutions and they include the following:

  • Designing of information and visual interface structure, the creation of navigation between pages, sections, and – within the pages.
  • Creation of interaction between service and user by means of interface.
  • Visual interaction design: facilitating the user experience through visual solutions.
  • A single functionality interface for desktop and mobile devices.
  • Developing of flexible design solutions for convenient work with the interface on all available devices.

Informational Architecture of the site/service defines an informational logic, construction of the whole site / interface and compliance of all its pages, sections with this logic. The architecture for maximum takes into account information user expectations, tasks, actions associated with the error, gradual and non-intrusive user interface training.

Prototyping is performed after or together with the development of the information architecture of the service / site. We create dynamic prototypes with demonstration of the basic functionality, transitions between pages and navigation. In the prototype the structure of standard pages, and user interaction with each page is also worked out.

Responsive interface is fully adjusted to the dimensions of the browser.

When designing the Responsive interface it is used a single layaut, blocks of which are rearranged depending on the device, and during the development HTML5 / CSS3, UI-library JQuery and minimally – JS are applied.

Adaptive layout design contains several layouts specifically for each screen resolution and, therefore, it is widely used JS, because some elements need to be hidden and some are shown.

We delivery standart package of source files:
  • Sourse files ( Psd, Ai, Eps.)
  • UX-card
  • Patterns of UI elements are on request

icon apple icon android Design of the product icon

Product icon is one of the key visual factors that affect the user’s motivation to download the mobile app.

a2w_portfolio_icons_preview

Icon begins with a general idea of the application, and multiple versions of how to convey this idea in accordance with the following parameters:

  • client company tasks,
  • users expectations,
  • standard operating systems,
  • current trends in mobile design.

The work begins with a sketch, drawing the appropriate choices from which the single image is approved on revision.

When designing icons the following resolutions are taken into account:

  • For IOS: 29×29, 40×40, 58×58, 60×60, 76×76, 80×80, 120×120, 152×152, 512×512, 1024×1024.
  • For Android: 36×36, 48×48, 72×72, 96×96, 144×144, 192×192, 512×512.

On approval are given icons sized no more than 152х152 px in Png format.
Usually application icons are provided in several key dimensions required as for application and for marketing publications.
After finishing the work we will give the archive with the icon in all sizes and source editable documents (Eps or Psd).

iOS and Android icons have slightly different design standards. Android icon may have a different geometric shapes and is on a transparent substrate, whereas the icon for the iOS-application has rounded corners.For cross-platform mobile applications it is optimally to draw the image first for Android and adapt it to the requirements of iOS.

Иконка appleИконка androidAuthor’s supervision of the development

UX-tracking the process of mobile application development.
The correct behavior of the elements and displaying screens on different mobile devices.
The final result in the release does not differ from the approved layout.

Testing for compliance with standards for GUI Apple and Google during the development of mobile application. Release verification for compliance with the original layout application.

The result of verification the product looks and functions as approved by the customer in the design layouts.

Preparation of necessary files and documentation for the development of:

  • UI-kit,
  • cutting graphics;
  • application UX-card;
  • GUI-document with examples of the main screens;
  • editable source files in Psd, Ai, Eps formats;
  • font package;
  • application icon in the required sizes.
Consultancy of the development is available to all queries relating to layouts and documentation, specifications operating systems, layouts setting, element behaviors, animation.

  • provide all the necessary information about the behavior of an element;
  • supporting documents and сonsultancy on the correct development of the application design, and on the use of effects;
  • refinement of indent “rubber” elements, font usage and other information.
The results of the author’s support

As a result, copyright tracking the mobile application in the release does not differ from accepted in the layout. Developers during the process have access to interaction with the design team to be consulted on all matters concerning the layout, behavior of the user interface, animated moves.

Microtext interfaces and texts for a site

Microtext – is any text up to 200 letters with spaces.
In marketing, the goal of this text is the direct contact sale. The interface is the User support in the tasks performance.

Interfaces microtexts
Tasks for which you cannot hire a copywriter at the exchange.
Writing internal textsб interfaces, mobile applications: Pages ‘About’, displays with a zero status (empty), notifications, loading screens, naming elements.
Microtext is a part of usability
Microtext forms the context of use.
To interface Microtext are included such elements as, for example, the button label, guidance pop-up text, the name of the form. This text provides the maximum level of interaction and understanding of the interface, creates and refines the context of the custom task implementation.
The text for the Landing, promotional pages
Commercial selling texts for pages and sites
Writing of commercial and advertising texts for application promotional page in their own store or Landing page for promoting service / mobile applications.
The purposes of these texts are as follows: the user can focus on the description text of the mobile application if it is not clear whether the application fits into his main query in the search.

Design of the selling page is performed by its commercial text and key visual image. Also, the text affects the formation of user needs in product and lead generation.

Information Texts
Instructions for Use, the User Agreement and other accompanying textual content interfaces.

Information text keeps the user from access to the offline (phone calls, visits) and the termination of the interaction (when the problem is not clear, and it is easier to close the page). The commercial value of such texts is reducing the load on the customer support department and the overall high customer loyalty.

Interface Localization
Interface Localization under the Ukrainian, Russian, English.
Correcting inaccuracies of automatic text translation to improve the user experience.

Editing texts directly in the prototype or after the release of the mobile application, interface for small errors, inaccuracies, which will inevitably be at the stage of visual design or programming.

Иконка appleИконка androidDesign Supporting

Supporting of the mobile application design after the release. Development and partial redesign of screens, application elements for iOS, Android.

The visual updating of the user mobile application interface elements is necessary in case of releasing an operating system version with a new design, otherwise the current design will look outdated.

After all the trends of design interfaces and mobile applications should be taken into account: for marketing purposes it would not be out of place to update the UI in accordance with users expectations.

At this level, there occurs an interference, not only in appearance, but also in the structure of the application. Adding of new features to the application leads to the emergence of new screens, notifications, UI elements and processing at least two adjacent screens. Sometimes, to add at least one new button, it is necessary to change the application UX-card and redo several screens.

The result of the project design support:

  • timeless design of the interface or mobile application;
  • opportunity to meet needs of your digital-product users in a best way;
  • timely release of updates on the design and functionality;
  • new elements do not differ in style from the current;
  • developers consultancy.

Animated Mobile Application

Mobile app animation is a displaying of correct work, help in the use and additory involvement by realistic motility elements. Visually, the app with good animation looks full and completed quality product.

Application animation is an additional service that is not included to the standard package, and is performed on request.

At the stage of prototyping a possible motion is placed, while the layout is static. Next stage is consultancy on the animation on the subject where to place the movable elements, how many seconds are given to the motion, etc. In the process of UI-design layouts of screens with gif-animation are made.

The Purpose of Animation

The original purpose of the craft interface is to respond and confirm the commands entered by the user. For example:

The motility of the mobile application helps to achieve a good level of user experience increases the perception of an application and tactile sensations. In other words, it makes an interface as simple as possible, clear, comfortable, and moreover, involving.

Animation generates users’ habits. Accustom people to a certain behavior of the application, it is possible to further simplify the design and add new features.
The versatile interface is motivated to return to it ones more, sometimes even without a specific purpose – to twist in hands. Herewith, the user is open to interact with the content and the company: downloads, scans, generates content, leaves feedbacks and etc.

The space of mobile devices screens is limited by their size. Due to the elements that are hidden, you can get additional free space. Animation will fit nicely these movements in the overall concept of the application.

Animation in Action
At the touch the animation is more beautiful than in word: you touch the screen and it reacts with light and movement. The process is pleasant itself, it seems that your hands can work wonders. This is the effect of full human interaction and application.
With an animation application “knows” such actions as acceleration and motion sequence; movement trajectory; imitation of the material (expression of the object “hardness” in its compression rate); focusing on the subject; smooth glide; folding and foldovering of elements; deployment of pages; scaling; turn; parallax effect (one element “zooms in” on the other); appearance / disappearance; reduction in transparency.
Compliance with the standard behavior of the OS
The complexity of the animation implementation is also depends on the platform. For example, the animations on iOS is easier to do, and design looks cool thanks to the Retina-display and hardware capabilities.
For each mobile platform, there are the guidelines for development and adding the animation. It is done to ensure that all third-party design solutions fit well into the system and looks natively (i.e., in the same visual space with the operating system design).
Actions Clarity
Animation confirms that the application responds to an external command.
The user must understand what action takes place and what led to it. For example, clicking on the button, one sees how it travels with the menu. This means that he has caused this particular menu button, and not another. The app responds to touch and gives aesthetic result.

Adaptive design under front-end

What is Adaptive design

Adaptive – graphic web-design, in the result of which we have different layouts for each device and, accordingly, different mockups. The target of adaptive design – optimal and comfortable interaction at the given devices and screen resolutions, comfortable user experience with the interface.

Differences of the front-end part

Web service is divided into the web part, frontend and backend. Adaptive design for the front-end part allows to establish rapid and flexible work with any device.

Web part

Web Part is a public client interface, which runs the end-user.

Front-end

Front-end – interface for internal user and service management. Programmers, administrators, managers of the content (eg, the console service management, content management system) are working with it.

Back-end

Frontend connects internal backend user – the server of the service.

Key differences between responsive and adaptive

Because of the similarity of the terms adaptive / responsive, it is thought that they are one and the same. In fact, there are significant differences between responsive and adaptive in the process of design and development.

The responsive design is used as so-called “Rubber layout”: All elements of the UI and the content are scaled according to the size of the screen. The responsive can not be applied on JavaScript, only on CSS and HTML. Design is within the grid without the possibility of replacing one elements on another or change their behavior. When you load the responsive page there are loaded only the elements necessary for the current device and the user sees the rebuildiing of the interface

The adaptive layout needs JavaScript. For each device there created a separate layout and accordingly to that different design layouts. When you load adaptive page identifies the device and the desired layout to be shown. So that the user can immediately see the interface in the most convenient for work format.

Elements of the adaptive design of the page can be used interchangeably. This makes it possible to prioritize functionality: for the desktop version – complete, mobile – optional (complete, but first and foremost be seen the most important interface options).

Using of adaptive

Adaptive interface design is used for big multifunctional products and requires qualified specialists, responsive – for more “light” sites as easy to learn and implement.