-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
127 lines (126 loc) · 6.83 KB
/
index.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
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Designer-Challenge</title>
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<header>
<nav>
<a href="#"><img src="./assets/pics/logo.svg" alt="elephant logo"></a>
<div>
<h1>TheDesignProject</h1>
<h2>by a WebDesigner</h2>
</div>
</nav>
<section class="intro">
<div class="intro-text">
<h2>How to become a better designer?</h2>
<h3>A challenge to improve your product design skills by solving problems in your daily life. <img src="./assets/pics/rocket.png" alt="rocket logo"></h3>
<h4>SCROLL TO SEE MORE -</h4>
</div>
<div class="intro-pic">
<img src="./assets/pics/ilustracion_people.png" alt="falling guy">
</div>
</section>
<section class="design-examples">
</section>
</header>
<main>
<article>
<h3>Every idea <img src="./assets/pics/idea.png" alt="light bulp"> starts with a need</h3>
<p>Earlier this year (January 2018). I started to think about how I could improve my design skills and attract more customers. I wanted to start designing some ideas that for a long time I had only on paper and stored on my cell phone, I decided to look for some challenge, something that makes more sense with what I thought. I saw that many designers (especially in dribbble) made a daily user interface, I really liked the idea, but the problem was that the result was just something nice and did not solve any problem.</p>
</article>
<h2>After several weeks of sticking to this challenge, I learned a lot</h2>
<section class="tiles-row-1">
<div>
<h3><img src="./assets/pics/title02.svg" alt="bulb logo">Start with asking why</h3>
<p>You will start seeing things differently and coming up with more effective ways of achieving goals.</p>
</div>
<div>
<h3><img src="./assets/pics/title04.svg" alt="share logo">Your ideas will have more value</h3>
<p>By looking at problems from a different perspective, your ideas will be fresher and more valuable.</p>
</div>
</section>
<section class="tiles-row-2">
<div>
<h3><img src="./assets/pics/title01.svg" alt="heart logo">design solutions with love</h3>
<p>Only when you experience a problem yourself do you understand the frustration of the users and resolve to end it.</p>
</div>
<div>
<h3><img src="./assets/pics/title03.svg" alt="pen logo">Share and show your work</h3>
<p>As designers, we are often afraid of showing work that's not finished or doesn't look perfect. You will learn to accept feedback and learn from it.</p>
</div>
</section>
<section class="lets-go">
<h3>Are you ready? Let's go!!</h3>
<p>The challenge lasts 30 days. On each of those days you will have to create a solution to any problem you yourself are facing and show the result to the community.</p>
</section>
<section class="lets-go-1">
<div class="letsgo-pic">
<img src="./assets/pics/step01.png" alt="searching dude">
</div>
<div class="letsgo-text">
<h4>01</h4>
<img src="./assets/pics/step01.svg" alt="eyes emoji">
<h5>Find your problem</h5>
<p>It has to be a problem that’s personally affecting or affected you, like finding your keys, calling a taxi or even remembering something. Open your eyes, look around you carefully and pay close attention to your surroundings.</p>
</div>
</section>
<section class="lets-go-2">
<div class="letsgo-text">
<h4>02</h4>
<img src="./assets/pics/step02.svg" alt="writing hand emoji">
<h5>Think about the solution</h5>
<p>It's time to look for solutions. What can you do to solve these problems? It's time to think out of the box, grab your notebook and start writing down all the ideas that come to mind.</p>
</div>
<div class="letsgo-pic">
<img src="./assets/pics/step02.png" alt="brainstorming chick">
</div>
</section>
<section class="lets-go-3">
<div class="letsgo-pic">
<img src="./assets/pics/step03.png" alt="teamwork on design">
</div>
<div class="letsgo-text">
<h4>03</h4>
<img src="./assets/pics/step03.svg" alt="work emoji">
<h5>Design your proposal</h5>
<p>How can design help solve your problem? It's time to think about features and functionality, and then start designing. Don’t forget to always ask yourself: Would I actually use this?</p>
</div>
</section>
<section class="lets-go-4">
<div class="letsgo-text">
<h4>04</h4>
<img src="./assets/pics/step04.svg" alt="surfer emoji">
<h5>Share your work</h5>
<p>Share your design on instagram or dribbble with the hashtag #thedesignproject Remember to explain what the problem was, how you came up with the solution and how the design achieves it. Find out what people have to say about it.</p>
</div>
<div class="letsgo-pic">
<img src="./assets/pics/step04.png" alt="brainstorming chick">
</div>
</section>
<section class="subscribe">
<h4>Do you like this challenge?</h4>
<p>Subscribe to be the first to hear about updates,tips and recommendations!</p>
<form action="" onsubmit="return false">
<input type="email" name="" id="email" placeholder="Enter your email here" class="email">
<input type="submit" value="Subscribe" class="btn" onclick="openPopup()">
<div class="popup" id="popup">
<img src="./assets/pics/confirmed-logo.png" alt="kiss emoji">
<h2>YOUR EMAIL HAS BEEN CONFIRMED!</h2>
<h2>THANKS FOR SUBSCRIBING</h2>
<button type="button" onclick="closePopup()">CLOSE</button>
</div>
</form>
</section>
<footer>
<h5>Created with Love by a Webdesigner <img src="./assets/pics/pixelheart.gif" alt="heart"></h5>
</footer>
</main>
<script src="./assets/js/main.js"></script>
</body>
</html>