-
Notifications
You must be signed in to change notification settings - Fork 0
/
DealDone.html
118 lines (111 loc) · 7.7 KB
/
DealDone.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="style2.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anek+Devanagari:wght@600&family=Didact+Gothic&family=Inter&family=Overpass&display=swap" rel="stylesheet">
<title>Deal Done To Do App</title>
</head>
<body>
<div class="container-lg">
<nav class="container sticky">
<ul class="main-nav">
<li><a class="title-m" href="index.html">Mikhail Vodopyanov</a></li>
<!-- <li><a href="">About me</a></li> -->
<!-- <li><a href="">Our team</a></li> -->
<li class="push"><a href="mailto:[email protected]">e-mail.me</a></li>
<li class="tg-me"><a href="https://t.me/vodopmi" target="_blank">tg.me</a>
</ul>
</nav>
<br>
<br>
<br>
<br>
<div class="container12">
<img style="width: 80%; padding-left: 3rem;" src="logo2.png">
</div>
<br>
<br>
<div class="container12">
<img class="size-cor-main center" src="main-img2.png">
</div>
<div class="container12 block1">
<h1 class="rightfont rightsize">Deal Done To Do App - это простое, быстрое и эффективное приложение для ведения списка дел.</h1>
<br>
<a href="https://www.figma.com/file/hUgEbKT8mVEie0Tg0HKPhp/Intern-Test-Case?node-id=4607%3A3346" target="_blank"><button class="cta">Перейти прямо к файлу Figma</button></a>
<p class="rightfont">Как правило, занятые, успешные люди чётко планируют свой график и изначально становятся успешными также благодарая тому, что вовремя решают поставленные задачи. В идеале, такое приложение должно не только стать помощником в составлении ежедневного графика, но и каким-то образом побуждать пользователя действительно этого графика придерживаться, мотивируя его.</p>
</div>
<ul class="nodots rightfont 1col">
<li><b>Задача</b><br>
Нарисуйте экран приложения-тудушки по предложенному вайрфрейму. Вы можете двигать и видоизменять текущие элементы или добавлять новые элементы.
<br>⛔️ Чего нельзя: убирать элементы, которые уже есть на экране.
<br>💡 Экран приложения должен выглядеть современно (сделайте акцент на графику) и достаточно удобно. Целевая аудитория — эффективный дизайнер Яндекса. Платформа iOS.
<br></li>
<li><b>Результат</b><br>
Был отрисован основной экран приложения, отржающий главный функционал. Присутсвтует функция распределения задач по трудоёмкости и по порядку. Продемонстированна тёмная тема.</li>
</ul>
<div class="container13">
<div class="boxinline">
<img src="scr1.png">
<img src="scr2.png">
</div>
<br>
<br>
<br>
<br>
<br>
<div class="container12">
<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FhUgEbKT8mVEie0Tg0HKPhp%2FIntern-Test-Case%3Fpage-id%3D0%253A1%26node-id%3D4612%253A3887%26viewport%3D938%252C-194%252C0.47%26scaling%3Dscale-down%26starting-point-node-id%3D4607%253A3346" allowfullscreen></iframe>
<!-- <div class="boxinline"><img class="size-sk2" src="sk2.png"></div>
<div class="boxinline"><img class="size-sk3" src="sk3.png"></div>
</div>
<br>
<h2 class="header12 rightfont">Step 2. User Flow & Sitemapping</h2>
<p class="discription rightfont">The processes of registration, finding the right product through the search and making a purchase through search. Each step is supplemented with a description of where the user is and what he can do next. Important elements are marked with accent color. On the sitemap, the main page is in the center, each item will indicate the section where you can get from this page. Different colors mean different levels of access.</p>
<div class="boxinline"><img class="size-uf1" src="uf1.png"></div>
<div class="boxinline"><img class="size-uf2" src="uf2.png"></div>
<div class="boxinline"><img class="size-uf3" src="uf3.png"></div>
<div class="boxinline"><img class="size-sm" src="sm.png"></div>
<h2 class="header12 rightfont">Step 3. Lo-Fi Prototyping</h2>
<p class="discription rightfont">At this stage, an approximate structure of the screens is shown. You can observe the hierarchy of fonts and tones. Location and size of elements. Some small details.</p>
<div class="boxinline"><img class="size-cor" src="lofi.jpg"></div>
<br>
<br>
<h2 class="header12 rightfont">Step 4. Design Sistem</h2>
<p class="discription rightfont">Creating a system design is the most time-consuming stage, but this stage pays off. Any screens are easily obtained from the elements of the design system. I have chosen fonts, colors and grids. I created cards for all possible items and products. Buttons and input fields options.</p>
<div class="boxinline"><img class="size-tgh" src="tgh.png"></div>
<div class="boxinline">
<img class="size-colors" src="colors.png">
<img class="size-ds1" src="ds1.png">
</div>
<div class="boxinline"><img class="size-ds6" src="ds6.jpg"></div>
<div class="boxinline">
<img class="size-ds3" src="ds3.png">
<img class="size-ds5" src="ds5.png">
</div>
<div class="boxinline"><img class="size-ds2" src="ds2.png"></div>
<div class="boxinline"><img class="size-ds4" src="ds4.png"></div>
<h2 class="header12 rightfont">Step 5. Final Hi-Fi Prototype</h2>
<p class="discription rightfont">Having made all the main screens, I moved on to prototyping. Onboarding. Registration and login process. Finding the right product through the search. Filtering search results. Adding to cart. Removal from cart. On the profile page, payment settings, delivery, chat with support are available. With "Flow 2" you can hit the splash screen.</p>
<div class="container12">
<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FqeJJTScdy9b9tMVeU39KYW%2FUserFlows%2526WireFrames%3Fpage-id%3D66%253A6518%26node-id%3D108%253A9154%26viewport%3D353%252C48%252C0.06%26scaling%3Dscale-down%26starting-point-node-id%3D108%253A9154%26show-proto-sidebar%3D1" allowfullscreen></iframe> -->
<!-- </div>
<div class="box-1">
<p>.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div> -->
<br>
<br>
<br>
<footer class="zone yellow">Mikhail Vodopyanov</footer>
</div>
</body>
</html>