-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathworks_view-more.html
145 lines (145 loc) · 5.79 KB
/
works_view-more.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
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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=Lato:wght@300;400&family=Red+Hat+Display:wght@300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="stylesheet" href="css/works_view-more.css">
<title>Homework19</title>
</head>
<body>
<div class="wrapper">
<header class="header">
<div class="header__container">
<a href="" class="header__logo"><img src="/img/Logo.svg" alt=""></a>
<div class="header__menu menu">
<div class="menu__icon">
<span></span>
</div>
<nav class="menu__body">
<ul class="menu__list">
<li><a data-goto=".page__section_1" href="/home.html" class="menu__link">HOME</a></li>
<li><a data-goto=".page__section_2" href="/about.html" class="menu__link">ABOUT</a></li>
<li><a data-goto=".page__section_3" href="/works.html" class="menu__link">WORKS</a></li>
<li><a data-goto=".page__section_2" href="/blog.html" class="menu__link">BLOG</a></li>
<li><a data-goto=".page__section_3" href="/contact__us.html" class="menu__link">CONTACT</a></li>
</ul>
</nav>
<form id="form__search" action="">
<input id="search" type="search">
<button class="search__btn"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
</header>
<section class="container__portfolio-more">
<div class="case-title">
<p class="case-title">CASE STUDY</p>
</div>
<div class="case__title-name">
<h4>Al Fashion Platform</h4>
</div>
<div class="case__title-image">
<img src="/img/works/portfolio__view-more/Img 01.png" alt="">
</div>
<div class="case__general-information">
<div class="case__overview">
<h5>Project Overview</h5>
<p>FashHanger is a bespoke sustainable high-fashion accessory company based out of Berlin,
currently operated by Siesly and her sister Ashely.
They needed help for a big rebrand and wanted to relaunch their website.</p>
<p>Their goals were simple, create a unique e-commerce store that bring a wonderful
shopping experience at every stage of the buyer’s journey.</p>
</div>
<div class="case__specifications">
<p>
Year
<span>2019</span>
</p>
<p>
Platform
<span>Shopify, Webflow</span>
</p>
<p>
Role
<span>Research, Design</span>
</p>
<p>
Deliverables
<span>www.fashhanger.com</span>
</p>
</div>
</div>
<div class="sections__about-case">
<div class="first-section info__about-case">
<div class="section-name">
<p>User Research and Personas</p>
</div>
<div class="section-image">
<img src="/img/works/portfolio__view-more/Img 02.png" alt="">
</div>
<div class="section__informations">
<p>Who is your user? Indicate her KEY personality traits and help round out her overall image.</p>
<p>Originally, the personality section of this persona was based off the Myers Briggs personality test.
According to the Myers Briggs, there are 16 potential user personality types.
Our template integrates questions from this online personality test example into a series of sliding bar graphics.
If you’re confused as to what the sliders mean, check out the Myers Briggs basics article.</p>
</div>
</div>
<div class="second-section info__about-case">
<div class="section-name">
<p>Initial Sketches</p>
</div>
<div class="section-image">
<img src="/img/works/portfolio__view-more/Img 03.png" alt="">
</div>
<div class="section__informations">
<p>In the beginning, It’s just about brainstorming.</p>
<p>I list out a jumble of words and draw tiny sketches related to what I’m working on (and find the parallels later).
Personally, I prefer paper with a grid so I can convey things responsively.
Most of the time perfection isn’t an issue and the sketches are just for me.</p>
</div>
</div>
<div class="third-section info__about-case">
<div class="section-name">
<p>Final Design</p>
</div>
<div class="section-image">
<img src="/img/works/portfolio__view-more/Img 04.png" alt="">
</div>
<div class="section__informations">
<p>I played with adding a wireframe of the website flow that would lead you in to each screen.
For each of those screens I added a floating footer that allows users to see where they are in that particular flow and jump around as needed.
” We’re digging this InVision-made wireframe.</p>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="footer__container">
<div class="contact__info">
<h5>Need a project?</h5>
<a href="tel:(239) 555-0108">(239) 555-0108</a>
<br>
<a href="mailto:[email protected]">[email protected]</a>
</div>
<div class="block__link">
<nav class="navigation__link">
<li><a href="/404.html">Facebook</a></li>
<li><a href="/404.html">Instagram</a></li>
<li><a href="/404.html">Dribbble</a></li>
<li><a href="/404.html">Linkedin</a></li>
</nav>
</div>
<div class="copyright__info">
<p>© Copyright Manifest Theme. Allrights reserved</p>
</div>
</div>
</footer>
</div>
<script src="js/script.js"></script>
</body>
</html>