-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathuiux.html
57 lines (55 loc) · 3.86 KB
/
uiux.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Intro To UI/UX</title>
<link rel="stylesheet" href="frontend.css">
</head>
<body>
<div class="timeline-container" id="timeline-1">
<div class="timeline-header">
<h2 class="timeline-header__title">ROADMAP</h2>
<h3 class="timeline-header__subtitle">USER-INTERFACE & USER-EXPERIENCE</h3>
</div>
<div class="timeline">
<div class="timeline-item" data-text="LEARNING THE FUNDAMENTALS" >
<div class="timeline__content"><img class="timeline__img" src="img/fundaele.jpg" />
<h2 class="timeline__content-title"><a href="https://youtu.be/fYs2Mdyasuc">Begin Course</a></h2>
<p class="timeline__content-desc">This covers design theory to human behavior. You usually spend about two to three weeks here—realistically, there’s way too much knowledge for you to stay at one spot. You ideally just want to know ‘enough’ for the next steps.</p>
</div>
</div>
<div class="timeline-item" data-text="DESIGN THEORY">
<div class="timeline__content"><img class="timeline__img" src="img/ui11.jpg"/>
<h2 class="timeline__content-title"><a href="https://youtu.be/GyVMoejbGFg">Begin Course</a></h2>
<p class="timeline__content-desc">This is pretty straightforward. You are looking at fundamental designs such as colours, typography, shapes, and forms. Here, you’re trying to understand the theory that goes behind colour, the terminologies in typography, and training your brain in understanding shapes and forms.</p>
</div>
</div>
<div class="timeline-item" data-text="WIREFRAMING">
<div class="timeline__content"><img class="timeline__img" src="img/wireframe.jpg"/>
<h2 class="timeline__content-title"><a href="https://youtu.be/c9Wg6Cb_YlU">Begin Course</a></h2>
<p class="timeline__content-desc">Wireframing is a process where designers draw overviews of interactive products to establish the structure and flow of possible design solutions. These outlines reflect user and business needs. Paper or software-rendered wireframes help teams and stakeholders ideate toward optimal, user-focused prototypes and products.</p>
</div>
</div>
<div class="timeline-item" data-text="PROTOTYPING">
<div class="timeline__content"><img class="timeline__img" src="img/protoui.png"/>
<h2 class="timeline__content-title"><a href="https://youtu.be/ps6p9e6QmgY">Click Here</a></h2>
<p class="timeline__content-desc">Prototyping is an experimental process where design teams implement ideas into tangible forms from paper to digital. Teams build prototypes of varying degrees of fidelity to capture design concepts and test on users.</p>
</div>
</div>
<div class="timeline-item" data-text="BUILDING A DESIGN SYSTEM">
<div class="timeline__content" id="react-id" ><img class="timeline__img" src="img/design2.png"/>
<h2 class="timeline__content-title"><a href="https://youtu.be/RYDiDpW2VkM">Begin Course</a></h2>
<p class="timeline__content-desc">What’s a design system? Imagine if your login page, your sign up page, and your homepage all looked highly different from one another. That would be a disaster in terms of consistency, and design systems are meant to ensure the branding and style is consistent throughout. When doing UI design, you’ll likely work with existing design systems, enhance existing design systems or even build your own.</p>
</div>
</div>
<div class="demo-footer">
<!-- <h2 class="timeline__content-title">Want to learn more ?</h2> -->
<h2 class="timeline__content-title"><a href="index.html">Go Back To Home</a></h2>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="frontend.js"></script>
</body>
</html>