/
poker.html
139 lines (122 loc) · 10.9 KB
/
poker.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Matt Allen - Interaction Designer & Photographer</title>
<link href="css/main.css" rel="stylesheet">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Aleo:400,400i,700&display=swap" rel="stylesheet">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
</head>
<body>
<div class="site-wrapper">
<nav>
<a href="/">
<div class="logo">
<svg viewBox="0 0 1000 1000">
<title>Matt Allen - Interactive Designer</title>
<path
d="M236,75.08C316.16,24.91,411-1,505.39.06c7.72-.33,15.38.81,23.1.66,7.59.9,15.32,1,22.93,2C661.9,13.64,768.08,63.1,847.54,140.6c6.52,5.2,11.51,11.94,17.5,17.69a503.46,503.46,0,0,1,75.35,104.77,495.43,495.43,0,0,1,55.24,172.49c.27,2,.52,4,.84,5.95.44,5.2,1.13,10.38,1.43,15.6.71,3.07.07,6.29.89,9.36,0,7,1,13.89.66,20.88-.31,4.51.49,9,.57,13.47-1,7.77-.41,15.62-.56,23.44l-.62,1c.29,7.52-.8,15-1.25,22.51-5.4,56.27-20,111.73-44,162.94a500.7,500.7,0,0,1-80.06,121.92C806.74,907.6,717,962,619.33,985.62a470,470,0,0,1-53.16,9.94c-3,.52-6,.91-9.08,1.13a73.17,73.17,0,0,1-11.47,1l-1,.55c-25,1.56-50.13,2.74-75.09.69-10.15-.26-20.24-1.54-30.33-2.53A498.74,498.74,0,0,1,1.59,541.21C-.44,521,.08,500.71,0,480.44a15.07,15.07,0,0,1,.5-4.09,369.34,369.34,0,0,1,3.33-39.69A496.75,496.75,0,0,1,125.43,168.41,502.54,502.54,0,0,1,236,75.08ZM410.44,300c-20.76,2.11-41.33,8.17-59.07,19.31-21.44,13.55-37.46,34.15-49.28,56.31C291.65,396.1,284,417.89,277,439.79c-26.79,87.39-53.95,174.66-80.66,262.08,48,.17,96,0,143.94.09q58-202,116.45-403.93C441.28,298.06,425.81,298.15,410.44,300Zm128.27,12.13c-27.68,12.53-48.33,36.71-62.26,63.18-10.37,20-17.8,41.33-24.72,62.72-27,88-54.43,175.89-81.16,264,48-.08,95.91,0,143.86,0C553,567.26,592.27,432.78,630.76,298.08,599.72,298,567.36,298.7,538.71,312.09Zm192.93-7.41c-20,5.35-38.83,15.53-53.3,30.4-10.15,9.64-18.41,21.1-25.53,33.08-12.3,21.79-20.78,45.43-28.43,69.17C597.28,525.58,569.82,613.72,543,702c47.91-.24,95.84-.11,143.76-.07q52.45-181.27,104.68-362.61c3.78-13.78,8.16-27.41,11.54-41.29C779.08,298,754.84,298.4,731.63,304.68Z"
transform="translate(0 0)" style="fill:#ff6900" />
</svg>
<!--
<svg viewBox="0 0 1000.12 1000">
<title>Matt Allen - Interactive Designer</title>
<path
d="M999.85,502.22c0-.47.09-.95.15-1.42-.08-4.5-.87-9-.57-13.47.36-7-.66-13.91-.66-20.88-.82-3.07-.17-6.29-.89-9.36-.29-5.22-1-10.4-1.43-15.6-.32-2-.57-4-.84-5.95a495.43,495.43,0,0,0-55.24-172.49A503.46,503.46,0,0,0,865,158.28c-6-5.74-11-12.49-17.5-17.69C768.08,63.1,661.9,13.64,551.43,2.73c-7.62-1-15.34-1.12-22.93-2-7.73.16-15.39-1-23.1-.66C411-1,316.16,24.91,236,75.08a502.54,502.54,0,0,0-110.62,93.34A496.75,496.75,0,0,0,3.85,436.66,369.33,369.33,0,0,0,.52,476.35a15.07,15.07,0,0,0-.5,4.09C.08,500.71-.44,521,1.59,541.21A494.77,494.77,0,0,0,58.51,735.62,500.12,500.12,0,0,0,439.24,996.38c10.1,1,20.18,2.27,30.33,2.53,25,2.05,50.12.87,75.09-.69l1-.55a73.17,73.17,0,0,0,11.47-1c3-.23,6.07-.61,9.08-1.13a470,470,0,0,0,53.16-9.94c86.89-21,167.48-66.38,231.19-128.95.88,4.92,1.87,9.82,3,14.7,4.11,16.06,9.68,31.87,18,46.19,11.45,21.71,29.35,39.42,50.07,51.91,24.06,14.59,51.56,23.06,78.44,30.53l.12-497.78ZM153,736.23c30.53-102.3,61.58-204.43,92.2-306.7,8-25.63,16.73-51.13,28.66-75.15,13.51-25.94,31.83-50,56.33-65.9,20.28-13,43.79-20.13,67.52-22.59,17.58-2.11,35.26-2.21,52.94-2.25Q384.2,500,317.49,736.34C262.64,736.22,207.79,736.43,153,736.23Zm363.59.07c-54.82,0-109.63-.05-164.45,0C382.64,633.26,414,530.42,444.86,427.42c7.91-25,16.41-50,28.26-73.4,15.93-31,39.53-59.27,71.17-73.93,32.76-15.67,69.75-16.53,105.23-16.39C605.52,421.32,560.68,578.71,516.54,736.3Zm197,.07c-54.78-.05-109.57-.2-164.33.08,30.69-103.37,62.07-206.51,93-309.79,8.74-27.78,18.43-55.45,32.5-80.95,8.13-14,17.58-27.43,29.18-38.72,16.54-17.4,38.11-29.32,60.93-35.57,26.53-7.35,54.23-7.82,81.52-7.72-3.86,16.24-8.87,32.19-13.19,48.32Q773.42,524.21,713.51,736.36Z"
transform="translate(0 0)" style="fill:#ff6900" />
</svg>-->
</div>
</a>
<ul class="menu">
<li class="menu__item"><a href="/">Home</a></li>
<li class="menu__item"><a href="https://linkedin.com/in/sdmix" target="_blank">LinkedIn</a></li>
</ul>
</nav>
</div>
<section class="project project--poker">
<header>
<section>
<img class="rocky-dashed animate-pop-in" src="assets/poker-logo.png">
</section>
</header>
<div class="site-wrapper">
<div class="experience-wrapper">
<img src="assets/sky-logo.png" width="100" class="extend--1">
<h3>My Role: UI Design + Code
</h3>
<h6>Collaborating with: Developers, Tester, Stakeholders, Marketing
</h6>
</div>
<h1 class="lower--3 extend--2">Migration from Flash to HTML5 table redesign</h1>
<p class="extend--1">Working within a small team I was the main designer on the Poker project. Creating the future of the Sky Poker gaming client by creating a modern product with performace, design and future development being the key deliverables.</p>
<img src="assets/poker-desktop-multi.jpg" width="100%">
<p class="lower--1 extend--1">Initially only being a desktop launch the redesign would eventually be made available across all devices, so this needed to be responsive and built in a way that we could launch new features fast, often and offer improvements based on user testing and feedback while keeping the design flexible, allowing customisation and giving users control over their gameplay was a difficult task to complete. This was a challenging project as online poker players were resistant to change, especially when it's their money on the line, some of them play 15 tables at once and have varing computer hardware ranging from basic laptops to high end desktops, they all needed to be considered and carefully thought out to make this product work how they expected online poker to work.</p>
<img src="assets/poker-desktop.jpg" width="100%" class="extend--1">
<img src="assets/p-compact-mockups.jpg" width="100%" class="extend--1">
<img src="assets/poker-mobile.jpg" width="100%">
<h1 class="lower--3 extend--2">Mobile and Tablet responsive lobby</h1>
<p class="extend--1">Once we had delivered a working responsive table redesign away from Flash we focused on bringing the experience to tablet and then eventually onto mobiles. This required a redesign of the lobby, where users were to find the tables they wanted to play at.</p>
<p class="extend--3">Working in the same team as the main designer, this involved simpifying a large amount of data and filter options to allow easy navigation on a much smaller screen (iPhone 4 screen size was to be supported). This meant lots of testing of user journeys to find the simpliest route for players to get to where they wanted to go. Keeping the navigation choices as straightforward as possible to avoid confusion.</p>
<img src="assets/p-mlob-tourn.jpg" width="100%" class="extend--1">
<img src="assets/poker-tablet.jpg" width="100%">
</div>
</section>
<footer>
<div class="site-wrapper">
<div class="content-padding">
<p>Copyright © Matt Allen (sdmix) 2019</p>
<p>All client and company work shown here remains the intellectual property and copyright of it's
respected owner.</p>
<p class="lower--3">I have an active social side. Get in touch!</p>
<p class="raise--0-5"><a href="https://twitter.com/sdmix" target="_blank">Twitter</a> | <a
href="https://www.linkedin.com/in/sdmix" target="_blank">Linkedin</a> | <a
href="http://flickr.com/sdmix" target="_blank">Flickr</a> | <a href="https://github.com/sdmix"
target="_blank">Github</a> | <a href="http://dribbble.com/sdmix" target="_blank">Dribbble</a>
</p>
</div>
</div>
</footer>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="js/slideshow.js"></script>
<script>
AOS.init({
// Global settings:
disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
initClassName: 'aos-init', // class applied after initialization
animatedClassName: 'aos-animate', // class applied on animation
useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
disableMutationObserver: false, // disables automatic mutations' detections (advanced)
debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
// Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
offset: 200, // offset (in px) from the original trigger point
delay: 400, // values from 0 to 3000, with step 50ms
duration: 800, // values from 0 to 3000, with step 50ms
easing: 'ease', // default easing for AOS animations
once: true, // whether animation should happen only once - while scrolling down
mirror: true, // whether elements should animate out while scrolling past them
anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation
});
var optsWork = {
//auto-advancing slides? accepts boolean (true/false) or object
auto: {
speed: 2500
}
};
makeBSS('.work-slideshow', optsWork);
var optsPics = {
//auto-advancing slides? accepts boolean (true/false) or object
auto: {
speed: 5000
}
};
makeBSS('.pics-slideshow', optsPics);
</script>
</body>
</html>