-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
136 lines (121 loc) · 5.95 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
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0,
user-scalable=no">
<title>le-cittra</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="src/css/main.css">
<link rel="stylesheet" href="src/css/responsive.css">
</head>
<body>
<header>
<nav>
<div class="logo">
<h1>le-cittra</h1>
</div>
<ul class="menu">
<li><a href="#">HOMEPAGE</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">TEAMS</a></li>
<li><a href="#">TESTIMONIALS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
<div class="container">
<div class="rows">
<div class="column">
<h1>le-cittra</h1>
<h2>We create<br />
and design websites.</h2>
<p>We are working with professional design implementation in web platform.</p>
<p>
<a class="btn" href="#">
SEE WHAT WE'VE DONE
<span class="btn-go">→</span>
</a>
</p>
</div>
<div class="column">
<img src="src/img/web-laptop.png" alt="frontpage of website">
</div>
</div>
</div>
</header>
<div class="top-wrapper">
<div class="container">
<h1>Hear from our experts.</h1>
<div class="rows card">
<div class="column profile">
<figure>
<img src="src/img/profile-1.jpg" alt="Alan Wong" />
<figcaption>
Alan Wong<br />
Head of Design of le-cittra
</figcaption>
</figure>
</div>
<div class="column profile-opinion">
<h3 class="heading">What is design?</h3>
<p>Design is the process of envisioning and planning the creation of objects, to creating solutions for people, physical items or more abstract systems to address a need or a problem.</p>
<p>Design has very broad concepts and varieties from one field to another in many aspects of our lives from product design, sound, virtual reality, interaction, to design cars, video games, software interfaces, interiors, etc.</p>
</div>
</div>
</div>
</div>
<div class="top-wrapper">
<div class="container">
<div class="rows card">
<div class="column">
<h1>A common misconception about design</h1>
<h3 class="heading">Design is not about making things pretty just for the sake of it</h3>
<p>
Nowadays, it can be categorized as a fancy sounding word, and there seems to be a certain amount of misconceptions surrounding it.</br>
But what is it really at its core? Is it simply a process to make pretty looking things? Far from it. It doesn’t focus purely on aesthetics, nor is it about adding ornaments to an item. First and foremost is it about making the user’s interaction with the environment more natural and complete.</p>
</div>
</div>
</div>
</div>
<div class="top-wrapper">
<div class="container">
<div class="rows">
<h1>The key concepts of design</h1>
<h3>1. Art or science?</h3>
<p>While not being exactly an art nor a science, it takes elements from both. Art is about creating something that expresses the author’s vision, ideas and feelings. While designers can express feelings and leave impressions through their work, doing so is not their prime objective.</br> So it takes the creating aspect of art, as it is about crafting an item, a tool, an experience even.</p>
</div>
</div>
</div>
<div class="top-wrapper">
<div class="container">
<div class="rows">
<h3>2. The creative design process</h3>
<p>Problems are best solved when approached in a comprehensive and systemic way. The goal of this process is to guide you and organize your work to turn ideas into concrete solutions. Designers do research and collect information about the problem they are considering: who is person facing this problem? Why? How are other people trying to solve it?<br> From this research, they make a general hypothesis and identify the main features should be part of the answer. Then with these key aspects in mind it’s time to experiment different solutions and iterate. This last part is about learning from what works, what doesn’t to adapt your solution to fit the user’s need best.</p>
</div>
</div>
</div>
<div class="top-wrapper">
<div class="container">
<div class="rows">
<h3>3. Great design is invisible</h3>
<p>It is achieved when the user doesn’t even notice its presence. This principle is particularly true in interaction design. Navigating a user interface should feel natural and unhindered.</br>The user should be able to understand its rules and the meaning of its elements almost immediately. The user is guided by an invisible hand made of colors, shapes, contrast, repetitions.</p>
</div>
</div>
</div>
<footer>
<div class="container">
<h4>Stay connected!</h4>
<nav class="social-links">
<a href="#" class="btn signup">Yahoo</a>
<a href="#" class="btn facebook"><span class="fa fa-facebook"></span> Facebook</a>
<a href="#" class="btn twitter"><span class="fa fa-twitter"></span> Twitter</a>
<a href="#" class="btn instagram"><span class="fa fa-instagram"></span> Instagram</a>
<a href="#" class="btn youtube"><span class="fa fa-youtube"></span> Youtube</a>
<a href="#" class="btn whatsapp"><span class="fa fa-whatsapp"></span> Whatsapp</a>
<a href="#" class="btn google"><span class="fa fa-google"></span> Google</a>
</nav>
</div>
</footer>
</body>
</html>