Convert Sketch to Angular 4 / Ionic 3
- or -
Post a project like this2386
$
- Posted:
- Proposals: 9
- Remote
- #1723498
- Awarded
Scrum Master, Project Management, SAFe Agilist,PHP, Wordpress, Zend Framework, CI, Smarty, Magento, ANY API, PSD to HTML, Webservices (ios & Android), nodejs, angularjs, reactjs, laravel and vuejs
Ahmedabad
Web & Mobile app developer | MVP & Startup expert - Meteor | node JS | React JS | React native
Ahmedabad
AI & Data Science Engineer | Nodejs | Ruby On Rails | AWS | GCP | Python | React | Angular |
Auckland
Full Stack Developer| POS System Expert | Hybrid Mobile Application Developer | Web APP Developer | Graphic Designer | UI/UX
Chandigarh
8286369095691007526108868111393521463048163961416524521834946
Description
Experience Level: Entry
Estimated project duration: less than 1 week
General information for the website: We map citizen feelings
Kind of development: New website from scratch
Pixel perfect conversion of Sketch file to Angular4/Ionic3 responsive website.
Num. of web pages/modules: 7
Description of every page/module: 1/ Map page with search and time travel :
Sketch 01 Map
IMPORTANT DO NOT DESIGN THE MAP - only include a sample static map image
Design the search component with 01 Map 4.1.1 + 01 Map 4.1.2 + 01 Map 4.2.1
Design the time travel component with 01 Map 5.1.1 - do not design the magnifying glass in 01 Map 5.2.1
Design the toast component with 01 Map 3.2 ( make the edit button optional )
Design the whole page + menu bar component and add recenter button / photo carrousel button (bottom left)
2/ List
Sketch 02 List 2.1
Design the scrolling page list
Design the "compact view" component
Add the "resume" bottom component ( with the "24" + total + filter + etc )
3/ Add button
Sketch 03 Add 1.1
Simple add button / take a look at the INVISION about interaction and animation
4/ Full screen view
Sketch 04 Parrot 1.1 + 2.1 + 3.1 (not 4.1)
Simple page to display the content of a picture taken / pay close attention at the INVISION to map the action buttons
5/ Notification center
Sketch 05 Notifications 1.1 + 2.1 (not 3.1)
Design the simple notification component for the list ( Artist spotter - unlocked)
Design the "survey now" notification
Design "Parrot refused" toast component
Design the list to display the notifications
6/ Profile
Sket 06 Profile 1.1 + 2.1 Badges
Design the Profile page & the badges page
7/ Home
Sketch 07 Home default
Design the home page
Reuse the search component (01 Map 4.1.1)
Reuse the parrot component (04 Parrot 1.1)
Description of requirements/features: This is a web design job, not a coding job.
Do not code any interaction other than loading page / showing components like described in the INVISION here : https://invis.io/UCDFFHNWZ
All the graphic artifacts are in the Sketch file here : https://goo.gl/UwqkDY
You have to start from : https://github.com/marcoturi/ionic-boilerplate
Read the quick start to setup the project.
Create pages and components using "ionic generate"
Any repeating item *must* be a component
Do *NOT* modify anything else than typescript/scss/html source files.
Use only standard IONIC pages/components
Specific technologies required: angular ionic sketch
Extra notes: Linting must not produce any error or warning (test with "npm run lint" and "npm run scss-lint").
This is critical and your delivery will not be accepted if warnings are found.
SCSS for the page stays in the page SCSS. Any common SCSS is promoted to the global SCSS.
Get in touch if you have warnings you cannot resolve.
This project will be launched this week and delivery is for next week.
The best budget will win, I already have offers for less than 400€.
Kind of development: New website from scratch
Pixel perfect conversion of Sketch file to Angular4/Ionic3 responsive website.
Num. of web pages/modules: 7
Description of every page/module: 1/ Map page with search and time travel :
Sketch 01 Map
IMPORTANT DO NOT DESIGN THE MAP - only include a sample static map image
Design the search component with 01 Map 4.1.1 + 01 Map 4.1.2 + 01 Map 4.2.1
Design the time travel component with 01 Map 5.1.1 - do not design the magnifying glass in 01 Map 5.2.1
Design the toast component with 01 Map 3.2 ( make the edit button optional )
Design the whole page + menu bar component and add recenter button / photo carrousel button (bottom left)
2/ List
Sketch 02 List 2.1
Design the scrolling page list
Design the "compact view" component
Add the "resume" bottom component ( with the "24" + total + filter + etc )
3/ Add button
Sketch 03 Add 1.1
Simple add button / take a look at the INVISION about interaction and animation
4/ Full screen view
Sketch 04 Parrot 1.1 + 2.1 + 3.1 (not 4.1)
Simple page to display the content of a picture taken / pay close attention at the INVISION to map the action buttons
5/ Notification center
Sketch 05 Notifications 1.1 + 2.1 (not 3.1)
Design the simple notification component for the list ( Artist spotter - unlocked)
Design the "survey now" notification
Design "Parrot refused" toast component
Design the list to display the notifications
6/ Profile
Sket 06 Profile 1.1 + 2.1 Badges
Design the Profile page & the badges page
7/ Home
Sketch 07 Home default
Design the home page
Reuse the search component (01 Map 4.1.1)
Reuse the parrot component (04 Parrot 1.1)
Description of requirements/features: This is a web design job, not a coding job.
Do not code any interaction other than loading page / showing components like described in the INVISION here : https://invis.io/UCDFFHNWZ
All the graphic artifacts are in the Sketch file here : https://goo.gl/UwqkDY
You have to start from : https://github.com/marcoturi/ionic-boilerplate
Read the quick start to setup the project.
Create pages and components using "ionic generate"
Any repeating item *must* be a component
Do *NOT* modify anything else than typescript/scss/html source files.
Use only standard IONIC pages/components
Specific technologies required: angular ionic sketch
Extra notes: Linting must not produce any error or warning (test with "npm run lint" and "npm run scss-lint").
This is critical and your delivery will not be accepted if warnings are found.
SCSS for the page stays in the page SCSS. Any common SCSS is promoted to the global SCSS.
Get in touch if you have warnings you cannot resolve.
This project will be launched this week and delivery is for next week.
The best budget will win, I already have offers for less than 400€.
Philippe V.
100% (10)Projects Completed
5
Freelancers worked with
3
Projects awarded
65%
Last project
22 Jul 2018
Belgium
New Proposal
Login to your account and send a proposal now to get this project.
Log inClarification Board Ask a Question
-
There are no clarification messages.
We collect cookies to enable the proper functioning and security of our website, and to enhance your experience. By clicking on 'Accept All Cookies', you consent to the use of these cookies. You can change your 'Cookies Settings' at any time. For more information, please read ourCookie Policy
Cookie Settings
Accept All Cookies