UI-Design mobile shop MoAction

Project Description

Moaction – control system with visual designer of mobile online-shops

In the past, the post has been submitted describes the process of designing the product catalog demo shop, graphic design described here, ui-design and layout pages based on a detailed prototype.

Task

  1. Create a visual design demo store Moaction.
  2. Develop a ui-design interface components containing style sheets to store all the components of the interface.
  3. To design the architecture style sheets easy for the user, but in a multi-component, setting color schemes demo shop in the designer design.
  4. Make the adaptive layout of the store page, install js-ins dynamic interface components
  5. Create motion effects, disclosure, transitions via js / css-animation
  6. Integrate layout templates in the working version Moaction

Requirements for graphic design

  1. Demo Shop Moaction – a universal template that should be the basis for many custom shops, must be scalable visual concept, which can be supplemented by other different color schemes
  2. It is exclusively and only a mobile site with an adaptive design to be developed oriented primarily at mobile users.
  3. Style – flat design with thin line elements icons, buttons, free space between the functional elements.
  4. The composition of pages and page layout has been approved at the design stage and do not require processing.

Technical requirements

  1. The design should be developed in the form of raster graphics layouts in several versions to choose from, after the approval of the proposed style of the example of the home page, developed 10 more templates section of the store, covering all the functionality of the store.
  2. The design should be well displayed on the vast majority of mobile devices available on the market
  3. raster graphics should be loaded into templates in three sizes, corresponding ppt mobile screens, from simple c density of 1 to 3 and more (retina).
  4. All graphics interface must be vector.
  5. The interface must consist of modules is completely independent of the location in the template.
  6. Integration of the finished design – held in twig-templates.

Process

To create a universal solution must take into account a number of technical factors, that:

  1. Will it be scalable for different subjects online stores?
  2. Will the same visual concept to look organic and stylish in other colors
  3. How the proposed solution will be implemented technically in terms of a comfortable display on a mobile screen with a variable brightness and in terms of technology development patterns that require integration to produce.

Subsequently we developed three options for the design of the main page store.

At the stage of discussion, it was assumed that graphic design is desirable to use unchanged, following the guideline, style Material Design from Google or design style ios7 mobile applications, but eventually developed a style based on ios7 own version of a flat design with thin line icons.

In addition to the selected were offered such options
Design of mobile Internet store

A typical universal online-shop with a large product catalog involves quite rich functionality of pages, the interface for Web applications and mobile devices should not lose important tinctures and opportunities. Goods catalog – have the same set of markers and options as in the online store for the desktop. Therefore lightweight markup, which is generally the width of any mobile unit equal to the width of the screen, is not appropriate.

Especially for this project:
  1. Was modified to cell size ranges modular grid framework , so that the width of the different mobile screens on the portrait and landscape orientations, the blocks on the page were reconstructed differently, thanks to differentiated mobile screen sizes grid-system .
    Slots Mobile online stores
  2. A mechanic using swip-gestures to navigate the sectionshorizontally in conjunction with the opening of the internal vertical accordion menu.
    menu in the Mobile Internet store
  3. Modified and optimized design of the usual html-form components, drop-down lists, modal windows
  4. Enter the visual difference between full-screen pages containing the interfaces search filter from the pop-up modal windows, also occupying the entire area of ​​the mobile screen, but interacting differently.
  5. A typical mechanic tab panels replaced only visually, but technically, it is important for the development, the dynamics of the opening of the active the tab bar at the top of the screento hide all the blocks on top of the page, I see only the convenience of the information that is now in the attention.
    Tab-panel mobile Internet store
  6. On the mobile web page implemented full zoom and Carouselto view a larger image of the goods.
    Zoom in the mobile Internet store

  7. To view a list of the goods involved specific mobile test events : swipe left and right, zooming with two fingers
  8. Filter to view the list of productsCreate a similar data on the interaction with the user as a filter settings ios. Round checkboxes convenient thumb switch.
    Display Settings category in the mobile Internet store

Designed in accordance with the prototypes and the entire dynamics of the interface components developed in the layout has been successfully transferred to integration into twig-templates.