Asos UI
Created on Jan 09, 2016

Introduction

ASOS is an e-commerce website selling fashion items worldwide. They also have their own mobile app (ASOS for iOS ver 2.6.1) with a really neat and efficient UI, and it got 5 stars rating. I don't think we need more for a shopping app on mobile. I'm an UI/UX lover, I see nice UI, I clone. That's it lol.

I always take it serious to keep the code quality high, with clean and self-explained code. When purchasing this, you also get my latest "helper" snippets inside the package to make it more fun to code.

What's in the package

  • Ionic Project source code: based on the folder structure generated with Ionic CLI
  • No Backend code: this is just the UI, not a fully functional app. Data is mostly static dummy unless mentioned, e.g GIF search uses the real Giphy API

Preview

Watch on Youtube

See how it works on Youtube: https://youtu.be/wYUJwaKJV5Y

Happy prototyping!

Changelog

Note: All updates are on Ionic 1

Last updated: Jun 17 2017

v1

  • First version

v2

  • Replace some copyright assets

v3

  • Compatible with Ionic CLI ~3.4.0

Screens

  1. Welcome
  2. Login/sign up
  3. Top menu panel
  4. Sidemenu (incl. my own Sidemenu plugin)
  5. Featured
  6. List view
  7. Grid view
  8. Refine (Filter)
  9. Product detail: (catwalk view, recommended items, …)
  10. Share (using Cordova plugin)
  11. Search
  12. Saved Items
  13. Your cart/bag
  14. Checkout

Run locally

1.Install Ionic environment

$ npm install -g cordova@9.0.0
$ npm install -g ionic@4.12.0

2.After purchasing, download the zip file containing the entire demo app and unzip

3.Go inside the extracted folder

4.Install all dependencies

$ npm install
$ bower install

5.Start local server

$ ionic serve

6.Your default browser should now automatically open the template

Notes

Modify the default color theme to match ASOS's color in /scss/ionic.app.scss

// line 18
$dark:                            #000 !default;
$energized:                       #fc9338 !default;
$stable:                          #e6f5f8 !default;

Contact

If you need any technical support or have any questions, don't hesitate to send me a message: mr_hie@yahoo.com

Homepage: https://www.takethatdesign.com

<StartOfPromotion>

[PROMO] Ionic 4 Bundle: 4 in 1 - Best Seller

My best Ionic 4 products (3 themes + 1 plugin) are now on sale with promotion code BUNDLE4. Please click the button below for more information.

Purchase Externally

</EndOfPromotion>

More Like This