-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwork-nl-exporteert.html
192 lines (181 loc) · 6.19 KB
/
work-nl-exporteert.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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html lang="en">
<head>
<title>NL Exporteert - UX Portfolio Case</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="css/normalize.css" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css?family=Ubuntu:400,300,300italic,400italic,500,500italic,700,700italic"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;700&display=swap"
rel="stylesheet"
/>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
rel="stylesheet"
/>
<link href="css/glider.css" rel="stylesheet" />
<link href="css/global.css" rel="stylesheet" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=UA-7367689-2"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "UA-7367689-2");
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/glider-js/1.7.7/glider.min.js"></script>
<script src="js/global.js"></script>
<script>
window.addEventListener("load", function () {
new Glider(document.querySelector(".screenshots .carousel"), {
slidesToShow: 1,
slidesToScroll: 1,
duration: 1,
arrows: {
prev: ".screenshots .glider-prev",
next: ".screenshots .glider-next",
},
});
});
</script>
<style>
header .container {
max-width: 500px;
margin: 4rem auto -3rem auto;
}
header img {
display: block;
width: 100%;
height: auto;
}
section:nth-child(odd) {
background-color: var(--tint-background);
}
section.screenshots {
padding: 0;
}
section.screenshots .background {
width: 100%;
max-width: 100%;
padding: 0;
background-color: rgb(118, 205, 242);
}
section.screenshots .carousel-container {
margin-bottom: 0;
}
section.screenshots .carousel div {
padding: 0 1rem;
}
</style>
</head>
<body>
<nav></nav>
<header>
<h1>NL Exporteert</h1>
<dl class="project-info">
<dt>Client</dt>
<dd>Rijksdienst voor Ondernemend Nederland (RVO)</dd>
<dt>Platform</dt>
<dd>Native iOS & Android app</dd>
<dt>Role</dt>
<dd>UI & Visual Design</dd>
</dl>
<div class="container">
<img
src="images/work-nlexporteert-perspective.png"
alt="Mockup of an iPhone running the NL Exporteert app"
/>
</div>
</header>
<section>
<p>
Commissioned by the Ministry of Foreign Affairs, IJsfontein developed
the app ‘NL Exporteert’. This app is made for entrepreneurs with
international ambitions and brings together all relevant public and
private export information and business networks.
</p>
<p>
Via an interactive world map, the app provides current information about
each country’s planned events, dos and don’ts of business abroad, key
macro-economic factors, funding opportunities and contact details of
embassies and trading posts worldwide. In addition you see an overview
where the highest populations live, where economic growth is the
highest, the buying power highest, how straightforward it is to do
business, and where the Dutch export market is focussed. It contains a
currency converter and shows the time differences with the Netherlands.
Another section is the ‘Export Indicator’ where the user had access to
relevant export documents, laws & regulations, international networks,
social responsibility practices, tips & tricks and information about
funding.
</p>
</section>
<section>
<h2>UI & visual design</h2>
<p>
I developed the style so that it is recognizable as coming from the
Dutch government, but also with it’s own visual personality. Using
Sketch, I designed the app for multiple platforms including both Apple
and Android smartphones and tablets and it was important to work closely
with the developers to find solutions for scaling to different screen
sizes. A good working relationship with the developers also helped
realise the finer details of the design such as transitions and
animations.
</p>
</section>
<section class="screenshots inverse">
<div class="background">
<div class="carousel-container">
<div class="carousel">
<div>
<img
src="images/work-nlexporteert-phone1.png"
alt="Screenshots of the smartphone app"
/>
</div>
<div>
<img
src="images/work-nlexporteert-phone2.png"
alt="Screenshots of the smartphone app"
/>
</div>
<div>
<img
src="images/work-nlexporteert1.png"
alt="Screenshot of the iPad app"
/>
</div>
<div>
<img
src="images/work-nlexporteert2.png"
alt="Screenshot of the iPad app"
/>
</div>
<div>
<img
src="images/work-nlexporteert3.png"
alt="Screenshot of the iPad app"
/>
</div>
</div>
<button class="glider-prev">
<i class="fa fa-chevron-left"></i>
</button>
<button class="glider-next">
<i class="fa fa-chevron-right"></i>
</button>
</div>
</div>
</section>
<section id="more-work" class="inverse"></section>
</body>
</html>