-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwork-soundslice.html
111 lines (102 loc) · 4.34 KB
/
work-soundslice.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Soundslice - 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="js/global.js"></script>
<style>
section:nth-child(even) {
background-color: var(--tint-background);
}
section img {
border-radius: 0.5rem;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
margin-top: 2rem;
margin-bottom: 2rem;
}
.ui-enhancements2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.landing {
display: grid;
grid-template-columns: 1200fr 365fr;
gap: 1rem;
}
</style>
</head>
<body>
<nav></nav>
<header>
<h1>Soundslice</h1>
<dl class="project-info">
<dt>Client</dt>
<dd>Soundslice</dd>
<dt>Platform</dt>
<dd>Responsive web application</dd>
<dt>Role</dt>
<dd>UX/UI Design</dd>
</dl>
</header>
<section>
<p>
Soundslice is a web-based music-learning platform that helps musicians learn pieces of music by synchronizing notation with video and audio, and providing tools for looping, slowing down and transcribing music. The software is used to deliver Soundslice’s own courses, by teachers as a way to supplement their lessons, and by third-parties who license the technology and embed it in their own applications.
</p>
<div><img src="images/work-soundslice-store.png" alt="Screenshot of the Soundslice Store"></div>
<p>
The developers of Soundslice approached me to help them with some user-interface challenges that they have been struggling with, and to design a new landing page to help market the product to potential licensing partners.
</p>
</section>
<section class="ui-enhancements">
<h2>User-interface enhancements</h2>
<p>
When teachers are transcribing a piece of music, they often need to isolate a section from a longer piece of music but there was no straightforward way of doing so in the user-interface. I designed an intuitive solution that allows the user to drag start- and end-braces in the waveform display.
</p>
<div><img src="images/work-soundslice-crop.png" alt="Screenshot of the Soundslice cropping UI"></div>
<p>Soundslice provides guitarists with a realtime fretboard display but didn't provide the learner with guidance on fingering. I designed a straightforward colour-coding system as well as a UI for the teacher to specify which finger to be used for each note.</p>
<div class="ui-enhancements2">
<img src="images/work-soundslice-editor-fingering.png" alt="Screenshot of the fingering editor">
<img src="images/work-soundslice-bookmarks-menu.png" alt="Screenshot of the work-soundslice-bookmarks-menu">
</div>
</section>
<section>
<h2>Responsive landing page</h2>
<div class="landing">
<img src="images/work-soundslice-marketing-wide.png" alt="Soundslice landing page design">
<img src="images/work-soundslice-marketing-narrow.png" alt="Mobile version of the landing page">
</div>
</section>
<footer id="more-work" class="inverse"></footer>
</body>
</html>