-
Notifications
You must be signed in to change notification settings - Fork 1
/
dailyuichallenges.html
920 lines (847 loc) · 69.1 KB
/
dailyuichallenges.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
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
<html>
<head>
<title>Matthew Marquise - Daily UI 100 Day Challenge</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="arrow.css"/>
<link rel="icon" type="image/x-icon" href="/img/favicon1.ico"/>
<link rel="shortcut icon" type="image/x-icon" href="/img/favicon1.ico"/>
<link rel="apple-touch-icon" href="/img/favicon1.ico">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<!-- MOBILE NAV -->
<div class="hidden-desktop">
<header class="header">
<a href="home" style="text-decoration: none; color: black; font-size: 30px" class="logo">
<img src="/img/mattsmac.png" width="50" height="54" class="d-inline-block align-top" alt="me">
</a>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu" style="display: block; text-align: center;">
<li class="nav-item"><a href="work" class="nav-link" id="nav">Work</a></li>
<li class="nav-item"><a href="about" class="nav-link" id="nav">About</a></li>
<li class="nav-item"><a href="resume.pdf" class="nav-link" id="nav">Resume</a></li>
<li class="nav-item"><a href="contact" class="nav-link" id="nav">Contact</a></li>
</ul>
</header>
<br><br><br><br>
</div>
<!-- DESKTOP NAV -->
<div class="sidenav hidden-mobile">
<br><br>
<a href="home"><img src="/img/mattsmac.png" width="55" height="60" class="d-inline-block align-top" alt="hi"></a>
<br>
<a href="work"><span class="linkborder">Work</span></a>
<a href="about"><span class="linkborder">About</span></a>
<a href="resume.pdf"><span class="linkborder">Resume</span></a>
<a href="contact"><span class="linkborder">Contact</span></a>
<div class="bottom-left" style="padding: 15px;">
<div class="row">
<p><a href="https://www.linkedin.com/in/matthew-marquise-4a688019a/"><i class="fa fa-linkedin" style="font-size: 22px;"></i></a> </p>
<p><a href="https://github.com/MattMarquise"><i class="fa fa-github" style="font-size: 22px;"></i></a> </p>
<p><a href="https://dev.to/mattmarquise"><img width="20" height="20" src="https://d2fltix0v2e0sb.cloudfront.net/dev-black.png"></a></p>
</div>
</div>
</div>
<!-- MAIN -->
<div class="main">
<h1>Daily UI - 100 Day Challenge</h1>
<h6>Duration: April 6, 2021 - 🤷🏼♂️ Sometime in the future</h6>
<p class="card-text" style="font-size: 12px"><span style="color: grey;">Research / Design</span></p>
<div class="row">
<div class="col-12 col-md-8"><img src="/img/dailyuibanner.jpg" width="100%" height="auto"></div>
<div class="col-10 col-md-4">
Purpose:
<p style="font-size: 13px; font-family: 'Roboto', sans-serif; padding-left: 2%;">I decided to start Daily UI's 100 day design challenge because I felt it would be very important for me to enhance my deisgn skills, and because that this challenge would be the perfect way to do so. If you would be interested in taking on this challenge I'd strongly recommend giving it a shot. To begin the challenge, simply visit <a class="linkborder2" href="https://dailyui.co">dailyui.co</a> and insert your email. The following day you'll recieve the first day's challenge in your inbox, and everyday for the next 100 days, except on weekends which provides a nice break and time to review past challenges. Below are all of my current completed challenges. It would mean the world to me if you gave it a thumbs up on Bēhance and or Dribbble. Thank you!</p>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-6">
<img alt="001" width="100%" src="/img/day001.jpg">
<h3>Day 001 :: Sign Up Page</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">This is the first day of Daily UI's 100 day design challenge. I've done multiple takes on this first day of having to create a sign up form. Visit my profile to view my other take and consider following so you can see my next projects over the next 100 days!</p>
<div align="right">
<a href="https://www.behance.net/gallery/116957689/Daily-UI-001-Sign-Up-Page-Take-2" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
</div>
<br>
<div class="col-sm-6">
<img alt="002" width="100%" src="/img/day002.jpg">
<h3>Day 002 :: Credit Card Checkout</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">For day two, the challenge was to create a credit card checkout page. I decided to go with a checkout page for a mobile app. It's honestly pretty straight forward and simple. Starting from the top, The total amount due is shown with the tax rate listed just below the price. Moving down the screen, we have the actual payment method options. While this challenge was mainly focused on use of a credit card, there are also two express checkout options (PayPal and Apple Pay) that could be used. After a user has populated each of the fields, the lower, "Swipe to Pay" area will lighten up and the arrow will begin sliding from left to right indicating that the user must then swipe to complete their purchase. Again, the design is very simple and quite modern but easy to navigate and understand.</p>
<div align="right">
<a href="https://www.behance.net/gallery/117045531/Daily-UI-002-Credit-Card-Checkout" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<img alt="003" width="100%" src="/img/day003.jpg">
<h3>Day 003 :: Landing Page</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">This is the landing page I decided to build for day three. As many can likely guess, it's a mock of IKEA's landing page but with a change in bg color. This landing page features a main element ("Chairs for any room.") that users first see when entering the site. Within that same element is a button directing users to the entire chair collection in the shop. To the right of the main piece, there is a simple 5 button list that offers users easy access to any of the specific things they may be looking for that are listed. I may add more to this in the future, but we'll see. Thanks for checking this out!</p>
<div align="right">
<a href="https://www.behance.net/gallery/117087675/Daily-UI-003-Landing-Page?tracking_source=project_owner_other_projects" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
</div>
<br>
<div class="col-sm-6">
<img alt="003" width="100%" src="/img/day004.jpg">
<h3>Day 004 :: Calculator</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">For day 4 the challenge was to design a calculator, and that I did. When it comes to designing a calculator it's pretty straight forward as to what components and features it needs. While this calculator is on the simpler end, as it doesn't allow for more advanced calculations as the proper buttons to do so aren't in the app, I think we all can agree that this simple calculator can still do a great job at solving random math equations quickly. This calculator also has my favorite feature, one I wish more calculator apps offered, a voice component. Tapping the icon would initiate the voice feature and simply telling it the equation you need to solve will output the answer even quicker.</p>
<div align="right">
<a href="https://www.behance.net/gallery/117192879/Daily-UI-004-Calculator" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<img alt="003" width="100%" src="/img/day005.jpg">
<h3>Day 005 :: App Icon</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">For day five, the challenge was to design an app icon. App icons are something I've never experimented with before. That changed today! The app icon I designed is very modern and while it isn't like most traditional app icons using a basic icon or lettering, mine features a modern logo that I created specifically for this challenge.</p>
<div align="right">
<a href="https://www.behance.net/gallery/117359277/Daily-UI-005-App-Icon" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
</div>
<br>
<div class="col-sm-6">
<img alt="003" width="100%" src="/img/day006.jpg">
<h3>Day 006 :: User Profile</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">For day six the challenge was to create a user profile. So I did, and the design above is what I came up with! I thought it would be neat to have a social app that incorporates emojis in place of basic icons. In each user's profile the users will have the option to set the main colors, choose a background image that uses emojis, and choose their profile picture which also uses emojis. Only text posts would be allowed on this social app as adding pictures could take away from not having a real profile picture. Also, each post has a like feature just like any social app would. What do you think?</p>
<div align="right">
<a href="https://www.behance.net/gallery/117418175/Daily-UI-006-User-Profile" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-6">
<img alt="003" width="100%" src="/img/day007.jpg">
<h3>Day 007 :: Settings</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">In short, this is a minimal settings page with just about all the necessary settings options. The idea for the app was a mobile gaming platform. Below the username, and beside the user profile image is an "online" button. For the actual settings there's everything from typical Account settings to privacy/security, and even display theme options. Notifications are an important part of a gaming app because it allows each user to know when their friends are playing a video game therefore access to notification options are crucial. Besides those settings options, there's a contact us and support option.</p>
<div align="right">
<a href="https://www.behance.net/gallery/117574201/Daily-UI-007-Settings" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
</div>
<div class="col-sm-6">
<img alt="003" width="100%" src="/img/day008.jpg">
<h3>Day 008 :: 404 Page</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">For the 404 page I decided to go with a very minimal page for a cafe. A simple image related to the cafe acts a a great, minimalistic background to the page. Below the 404 error text, is a button directing lost users back home. Again, this page is very minimal however, easy to understand.</p>
<div align="right">
<a href="https://www.behance.net/gallery/117615023/Daily-UI-008-404-Page" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-6">
<img alt="003" width="100%" src="/img/day009.jpg">
<h3>Day 009 :: Music Player</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">For day 9 I needed to design a music player. A simple, easy to navigate music player is what I like so that's exactly what I designed. On the first screen (left), users will see a search icon to search a their current songs and albums. Below that is a now playing area allowing users to move to the actual player screen (right) quickly. Below the now playing section is an area where all of a user's albums live. For quick access to the albums users can scroll till they find the perfect one, however as they get more albums, that'll be a nightmare. So there is a button to view all albums in a full list on a separate screen. Moving to the player screen we can see the search button still remains and just beside it are a more options icon, allowing users to view more info on the album or song they're listening to and a favorite/heart icon that allows users to easily save songs and albums to the favorites section. Further down the screen is the literal player where users control the part of the song they're listening to, loop or shuffle an album/playlist, and pause or play a song.</p>
<div align="right">
<a href="https://www.behance.net/gallery/117649155/Daily-UI-009-Music-Player" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
</div>
<div class="col-sm-6">
<img alt="003" width="100%" src="/img/day010.jpg">
<h3>Day 010 :: Social Share</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">The tenth day asked for a social share component/feature to be designed. The feature itself is quite straightforward and easy to understand. The coloration with a black and white contrast is something I thought would be different and appealing. That it is.</p>
<div align="right">
<a href="https://www.behance.net/gallery/117855447/Daily-UI-010-Social-Share" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<img alt="003" width="100%" src="/img/day011.jpg">
<h3>Day 011 :: Flash Message</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">For day 11 the challenge was to design a flash message for both a success and error. I decided to make my flash message for a newsletter sign up, informing the user wether or not they were successfully signed up or not. I honestly wasn't sure how my designs would look, but as you can see they turned out fairly decent.</p>
<div align="right">
<a href="https://www.behance.net/gallery/117945771/Daily-UI-011-Flash-Message" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
<div class="col-sm-6">
<img alt="003" width="100%" src="/img/day012.jpg">
<h3>Day 012 :: E-Commerce Shop (Single Item)</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">For day twelve, the challenge was to create a single item in an e-commerce shop. I wanted the design to be simple as I personally hate e-commerce sites that are hard to navigate and give every user a headache. Color themes can be overwhelming at times on various shopping sites too, so the colors for mine are simple and provide a warm feeling to each users. Under the product image and description is an add to cart button. Below that, a row of similar products is shown. While this design is minimalistic, it's also very pleasing to users.</p>
<div align="right">
<a href="https://www.behance.net/gallery/118009485/Daily-UI-012-E-Commerce-Shop-%28Single-Item%29?" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<img alt="003" width="100%" src="/img/day013.jpg">
<h3>Day 013 :: Direct Messaging</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">For day 13 the challenge was to create a direct messaging application. I designed this messaging app with ease of use in mind. In this design, I made sure that a user could easily navigate in and out of messaging with friends using the return to inbox button in top left corner of the app. In the top right, a user can click on their friend's profile picture to view that user's full profile. It's minimal, the color theme isn't overwhelming and it achieves exactly what was challenged.</p>
<div align="right">
<a href="https://www.behance.net/gallery/118096309/Daily-UI-013-Direct-Messaging" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
<div class="col-sm-6">
<img alt="003" width="100%" src="/img/day014.jpg">
<h3>Day 014 :: Countdown Timer</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">Day 14 involved creating a countdown timer. I choose to design one for an app. Starting at the lower, navigation portion of UI, there are three options: a clock, a countdown and a stopwatch. Each of these options are all very standard on most time tracking apps and sites, however changing the layout and adding a fast way to navigate between each time tracking option is crucial. In the center of the screen, the physical countdown is located, encouraging the user as they near the end of the set time. Above the timer, in the top right is the user's icon, keeping track of their past countdowns and stopwatches, as well as their favorited world clocks. In the top left is a create new countdown icon allowing a user to create up to 4 countdowns at one time. Each being displayed in a two by two, stacked format.</p>
<div align="right">
<a href="https://www.behance.net/gallery/118162333/DailyUI-014-Countdown-Timer" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<img alt="003" width="100%" src="/img/day015.jpg">
<h3>Daily UI 015 :: On/Off Switch </h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">For these On/Off Switches I chose to design them as toggles between dark and light mode and they're fairly simplistic as most toggle switches are.</p>
<div align="right">
<a href="https://www.behance.net/gallery/118344487/Daily-UI-015-OnOff-Switch" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
</div>
<div class="col-sm-6">
<img alt="003" width="100%" src="/img/day016.jpg">
<h3>Daily UI :: 016 - Pop-Up / Overlay</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">Day 16 called for the design of a pop-up/overlay. This overlay is shown after a user purchases honey from this online shop. It informs the user that their order was successfully placed and allows them the option to get a receipt sent to their email inbox. Below the company name, is an x icon allowing users to close out of the overlay and return to the app or website. While this overlay is minimalistic, it achieves everything a user would need to know and do after making a purchase.</p>
<div align="right">
<a href="https://www.behance.net/gallery/118475349/Daily-UI-016-Pop-Up-Overlay" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<img alt="003" width="100%" src="/img/day017.jpg">
<h3>Daily UI 017 :: Email Receipt</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">Email receipts are typically overcomplicated and far from easy to understand. With that being said, the email receipt I've designed is one that any user can understand. This receipt reminds the user of what they ordered and the total cost, as well as allows them to track their order. This email receipt displays all the essentials that every customer would ever need to know.</p>
<div align="right">
<a href="https://www.behance.net/gallery/118524955/Daily-UI-017-Email-Receipt" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
<div class="col-sm-6">
<img alt="003" width="100%" src="/img/day018.jpg">
<h3>Daily UI 018 :: Analytics Chart</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">For the analytics chart challenge, I decided to design a crypto trading app. The main page of the app allows the user to see current prices, trends on the actual analytical graph and also view their wallet balance. While it's minimal, this app could be a great way for users to track their investments as well as decide on future investments.</p>
<div align="right">
<a href="https://www.behance.net/gallery/118625759/Daily-UI-018-Analytics-Chart" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<img alt="019" width="100%" src="/img/day019.jpg">
<h3>Daily UI 019 :: Leaderboard</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">This leaderboard is minimalistic, and informative for users. At the top of the leaderboard screen, the highest ranked players are listed. Players are given a crown beside their name if they rank within the top three and beside or below their name is the amount of gems they've acquired.</p>
<div align="right">
<a href="https://www.behance.net/gallery/118649407/Daily-UI-019-Leaderboard" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
<div class="col-sm-6">
<img alt="020" width="100%" src="/img/day020.jpg">
<h3>Daily UI 020 :: Location Tracker</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">For day 20, the challenge was to design a location tracker. Wether this app be used for setting destinations and choosing the fastest routes like most maps, or tracking you and your friends and family, it can do it all. The map is enlarged upon opening showing the user's current location. A quick search would allow the user to find places he/she would like to travel to. For quick searches, the app offers quick links to things such as restaurants, parks, stores, and supermarkets and others, based on the user's most frequented searches. While this design is quite minimalistic, it certainly offers the same features and more of most map apps.</p>
<div align="right">
<a href="https://www.behance.net/gallery/118825193/Daily-UI-020-Location-Tracker" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<img alt="021" width="100%" src="/img/day021.jpg">
<h3>Daily UI 021 :: Home Monitoring Dashboard</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">On the main screen of the home monitoring dashboard, it allows the user to be informed of everything they need to know and more. Everything from the user's Nest cameras to their curtains, they can access every smart device in and around their home from this one app. They can control the sprinklers, the indoor and outdoor speakers, lights and temperature from the main screen. Other, not frequently used devices, can be accessed from the "more" screen of the app. It can be visited by selecting the three dots in the bottom navigation tab. The design is simple and easy to understand, allowing the user to quickly and efficiently control and check on all the smart devices within their home.</p>
<div align="right">
<a href="https://www.behance.net/gallery/118830999/Daily-UI-021-Home-Monitoring-Dashboard" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
<div class="col-sm-6">
<img alt="022" width="100%" src="/img/day022.jpg">
<h3>Daily UI 022 :: Search</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">Designing a search screen is fairly simple and making it user friendly is extremely important. Adding quick search options is also a great way to help users out when searching a site or app and making it minimalistic is key so that the users aren't overwhelmed.</p>
<div align="right">
<a href="https://www.behance.net/gallery/118984481/Daily-UI-022-Search" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<img alt="023" width="100%" src="/img/day023.jpg">
<h3>Daily UI 023 :: Onboarding</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">For this onboarding screen I wanted to incorporate the user and create hype around them joining. Though this screen is minimal, it welcomes then informs the user of the next necessary steps in this case checking email to verify account.</p>
<div align="right">
<a href="https://www.behance.net/gallery/119104719/Daily-UI-023-Onboarding" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
<div class="col-sm-6">
<img alt="020" width="100%" src="/img/day024.jpg">
<h3>Daily UI 024 :: Boarding Pass</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">This boarding pass is minimalistic, modern, and digital which is something I find very unique. Simply arriving at an airport, train station, bus station, and any other transport facility and showing their ticket via their phone for a contactless, and headache free check in. They'll never forget their boarding pass again. A user can also email themself the boarding pass so they can share or print out.</p>
<div align="right">
<a href="https://www.behance.net/gallery/119110259/Daily-UI-024-Boarding-Pass" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<img alt="025" width="100%" src="/img/day025.jpg">
<h3>Daily UI 025 :: TV App</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">This tv app is specific to college sports. It offers users every sport, from every college in North America. The idea sprouted from the fact that it's hard to find where to watch a college sports game, that is if it's being streamed at all, but with U Sports, you'll never have to miss another game from your favorite college. This app was designed with quick access to specific games in mind. In the nav, various popular sports are listed, below that is a live section for every currently live game. Continuing down the screen, a list of popular universities, based on the user's watch history and favorited teams, allows for quick access to on-demand sports and live. U Sports the perfect streaming app for any college sports fan.</p>
<div align="right">
<a href="https://www.behance.net/gallery/119330761/Daily-UI-025-TV-App" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
<div class="col-sm-6">
<img alt="026" width="100%" src="/img/day026.jpg">
<h3>Daily UI 026 :: Subscribe</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">This subscribe button allows a user to be added to a mailing list that sends various recipes to their inbox each day. This form is minimalistic, yet informative as it explains to the user what they're signing up for.</p>
<div align="right">
<a href="https://www.behance.net/gallery/119393531/Daily-UI-026-Subscribe" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<img alt="027" width="100%" src="/img/day027.jpg">
<h3>Daily UI 027 :: Dropdown</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">This dropdown allows a user to access other important info such as contact support, account info, and settings. It's simple and straightforward yet very functional.</p>
<div align="right">
<a href="https://www.behance.net/gallery/119459719/Daily-UI-027-Dropdown" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
<div class="col-sm-6">
<img alt="028" width="100%" src="/img/day028.jpg">
<h3>Daily UI 028 :: Contact Us</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">This contact form is concise and enables users to easily get in touch with the company. Regardless what a users prefers when it comes to contacting someone, this form offers two main options, email and phone. If a user doesn't want to submit a form right away they can save the company's email and reach out later. The design isn't overwhelming and the font and color is welcoming to every user.</p>
<div align="right">
<a href="https://www.behance.net/gallery/119522619/Daily-UI-028-Contact-Us" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<img alt="029" width="100%" src="/img/day029.jpg">
<h3>Daily UI 029 :: Map</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">This is Mappy. Mappy allows users to easily search for restaurants, parks, stores, and more. Users can choose between car, public transport or walking so however they prefer to travel, they can find the best routes. This map application is designed to be easily understandable and not overwhelming.</p>
<div align="right">
<a href="https://www.behance.net/gallery/119543111/Daily-UI-029-Map" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
<div class="col-sm-6">
<img alt="030" width="100%" src="/img/day030.jpg">
<h3>Daily UI 030 :: Pricing</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">A well designed pricing page should be concise so that a user understands what they're paying for. Offering various plans at different price points allows users to choose the most suitable plan as well as a plan that is within their budget.</p>
<div align="right">
<a href="https://www.behance.net/gallery/119693489/Daily-UI-030-Pricing" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<img alt="031" width="100%" src="/img/day031.jpg">
<h3>Daily UI 031 :: File Upload</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">This is designed to be a popup window for an app, website, and or software allowing users to easily upload necessary files. After selecting the file/s, the uploading process begins automatically and a progress bar appears informing the user the completed percentage.</p>
<div align="right">
<a href="https://www.behance.net/gallery/119769717/Daily-UI-031-File-Upload" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
<div class="col-sm-6">
<img alt="032" width="100%" src="/img/day032.jpg">
<h3>Daily UI 032 :: Crowdfunding Campaign</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">Fundy is a great way to support organizations, charities, events, projects, and so much more. Each individual Fundy campaign page gives lengthy info about what you and other are helping support, as well as statistics on total money raised, the percentage of the set goal that's been funded, and how many backers have chosen to support the campaign. Supporting campaigns with Fundy is easy and allows a user to feel good knowing they are lending a hand to whatever cause they choose.</p>
<div align="right">
<a href="https://www.behance.net/gallery/119842743/Daily-UI-032-Crowdfunding-Campaign" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<img alt="033" width="100%" src="/img/day033.jpg">
<h3>Daily UI 033 :: Customize Product</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">For this product configuration/customization page, users are able to choose the color of their new car. As a user switches between available color options, the digital version of the car updates to display the corresponding body color. a back arrow in the top left returns to product page, and a lower continue button brings the user to the next configuration options. This product customization page is concise and minimalistic.</p>
<div align="right">
<a href="https://www.behance.net/gallery/119930173/Daily-UI-033-Customize-Product" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
<div class="col-sm-6">
<img alt="034" width="100%" src="/img/day034.jpg">
<h3>Daily UI 034 :: Car Interface</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">For this challenge I wanted to make a minimalistic interface that any user could easily navigate. Simple buttons and icons achieve just that. Each UI has a customizable rgb background color. The digital speedometer is located in the top left of the interface. To toggle between park, drive, reverse, and neutral. The main portion of the interface features a map, access to music, games, range and trip info, and streaming services. There's also toggles for AC, heated seats, and audio volume.</p>
<div align="right">
<a href="https://www.behance.net/gallery/120026737/Daily-UI-034-Car-Interface" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<img alt="035" width="100%" src="/img/day035.jpg">
<h3>Daily UI 035 :: Blog Post</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">This blog post preview is concise and stylish. This preview includes the post title, a header image, preview text from the post's body, the author, number of likes, number of comments, a share button, and a read button to open the full article. This blog post preview is exactly what a writer would want as it allows for readers to get a glimpse at what the post discusses.</p>
<div align="right">
<a href="https://www.behance.net/gallery/120225273/Daily-UI-035-Blog-Post" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
<div class="col-sm-6">
<img alt="036" width="100%" src="/img/day036.jpg">
<h3>Daily UI 036 :: Special Offer</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">This special offer pops up when a user enter the app. The offer screen incorporates two main shades of blue (#0C24FF & #092CE1), each of which are warm feeling, drawing the user to read what is on the screen. Below the description of the offer is a claim offer button that's concise, and because of the proportion of button it would be difficult for a user to miss it.</p>
<div align="right">
<a href="https://www.behance.net/gallery/120287953/Daily-UI-036-Special-Offer" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<img alt="037" width="100%" src="/img/day037.jpg">
<h3>Daily UI 037 :: Weather</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">This weather app is extremely concise because it's for a smart watch. A simple icon immediately informs the user of the current weather outside such as sunny, rainy, cloudy, windy, etc. Below the weather icon is the current temperature. Further down is the user's current location, followed by an arrow leading to other weather data and saved locations.</p>
<div align="right">
<a href="https://www.behance.net/gallery/120383049/Daily-UI-037-Weather" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
<div class="col-sm-6">
<img alt="038" width="100%" src="/img/day038.jpg">
<h3>Daily UI 038 :: Calendar</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">This calendar is very minimal, although very informative. The general content of a calendar app is pretty straight forward, therefore it comes down to designing a stunning theme and fully accessible features. In the top left is an arrow that expands the view of the calendar from a singular month to multiple. Below is the calendar itself followed by a scrollable list of all upcoming events. To add an event, a user would press the plus icon in the bottom left. By pressing the search icon in the bottom right, a user can search all previous and current events.</p>
<div align="right">
<a href="https://www.behance.net/gallery/120469751/Daily-UI-038-Calendar" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<img alt="039" width="100%" src="/img/day039.jpg">
<h3>Daily UI 039 :: Testimonial</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">This testimonial is very concise, but also eye catching to users who want to read them before purchasing a product. The purple background, met with the white color used for the testimonial card, compliment each other very well.</p>
<div align="right">
<a href="https://www.behance.net/gallery/120610339/Daily-UI-039-Testimonial" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
<div class="col-sm-6">
<img alt="040" width="100%" src="/img/day040.jpg">
<h3>Daily UI 040 :: Recipe</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">This recipe app allows users find recipes for their favorite meals, explore new ones, and save time. The home page of this app includes a search bar with customizable filters, popular recipes, and popular food types. Quick access to recipes based on food types makes search for a new recipe fast and enjoyable.</p>
<div align="right">
<a href="https://www.behance.net/gallery/120758425/Daily-UI-040-Recipe" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<img alt="041" width="100%" src="/img/day041.jpg">
<h3>Daily UI 041 :: Workout Tracker</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">This smart watch app tracks a user's distance in both miles and steps, as well as the total flights they've climbed. Below the distance stats is the heart rate display. For the main UI colors I chose blue and black because they compliment each other very well and the neon blue inspires energetic users to stay active.</p>
<div align="right">
<a href="https://www.behance.net/gallery/120906523/Daily-UI-041-Workout-Tracker" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
<div class="col-sm-6">
<img alt="042" width="100%" src="/img/day042.jpg">
<h3>Daily UI 042 :: ToDo List</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">This mobile app allows users to easily manage every task they need to achieve. Using simple buttons a user can mark tasks as completed and add new tasks to the list. The use of black and white for the UI allows the design to be both modern and minimal.</p>
<div align="right">
<a href="https://www.behance.net/gallery/120943693/Daily-UI-042-ToDo-List" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<img alt="043" width="100%" src="/img/day043.jpg">
<h3>Daily UI 043 :: Food/Drink Menu</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">Digital menus are a great way for users to save time when ordering from a restaurant. A user can choose their desired meal before even arriving at a restaurant, therefore a digital menu should be concise. A digital menu that's overcrowded can cause a user to feel overwhelmed and not important. A complex UI could ultimately change the users mind on where to order from based on how easy it is to a restaurants digital menu. This menu is modern and concise, keeping the user in mind.</p>
<div align="right">
<a href="https://www.behance.net/gallery/121001625/Daily-UI-043-FoodDrink-Menu" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
<div class="col-sm-6">
<img alt="042" width="100%" src="/img/day044.jpg">
<h3>Daily UI 044 :: Favorites</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">These profile cards feature a favorites icon for users to mark their friends, family, etc. as favorites, an alternative to follows. A user can mark a profile as a favorite by pressing the greyed out star. After a profile has been added to a user's favorites, the grey star will become gold. This design is simple, different, and effective.</p>
<div align="right">
<a href="https://www.behance.net/gallery/121003187/Daily-UI-044-Favorites" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<img alt="045" width="100%" src="/img/day045.jpg">
<h3>Daily UI 045 :: Info Card</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">This business card is modern and minimal, yet concise. Info cards should only offer the most important information, so those who have it know who you are and how to reach you.</p>
<div align="right">
<a href="https://www.behance.net/gallery/121106485/Daily-UI-045-Info-Card" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
<div class="col-sm-6">
<img alt="046" width="100%" src="/img/day046.jpg">
<h3>Daily UI 046 :: Invoice</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">This invoice software allows users to efficiently manage orders and bill customers. Simply selecting the customer and choosing an invoice from their list allows the user to print, share, or create a new invoice for that customer. The display is minimal and functional saving the user time.</p>
<div align="right">
<a href="https://www.behance.net/gallery/121231155/Daily-UI-046-Invoice" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<img alt="047" width="100%" src="/img/day047.jpg">
<h3>Daily UI 047 :: Daily UI 047 :: Activity Feed</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">This is an activity feed screen that informs a user of all their follower's activity relating to their account. Simply pressing the activity notification a user wants to view, will open it. This design is minimal, modern, and unique. I chose the yellow, white, and black color theme as the colors complement each other pretty well and each are subtle. </p>
<div align="right">
<a href="https://www.behance.net/gallery/121298123/Daily-UI-047-Activity-Feed" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
<div class="col-sm-6">
<img alt="048" width="100%" src="/img/day048.jpg">
<h3>Daily UI 048 :: Coming Soon</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">This screen informs the user of an app that it's coming soon, along with a countdown. Though this screen is minimal, it is very concise.</p>
<div align="right">
<a href="https://www.behance.net/gallery/121383373/Daily-UI-048-Coming-Soon" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<img alt="049" width="100%" src="/img/day049.jpg">
<h3>Daily UI 049 :: Notifications</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">On the lock screen, a user can view their recent notifications. These particular notifications are for an app I've been working on recently that allows users to pre-order food from food trucks. Alerts like these inform users of when and where a food truck will be. Notifications must be concise to overwhelm the user. An alert that's too wordy can cause a user to simply erase it without ever opening.</p>
<div align="right">
<a href="https://www.behance.net/gallery/121439239/Daily-UI-049-Notifications" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
<div class="col-sm-6">
<img alt="050" width="100%" src="/img/day050.jpg">
<h3>Daily UI 050 :: Job Listing</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">Firstly, I must say that I am now halfway through Daily UI's 100 day challenge and I cannot express how excited I am to have reached this major checkpoint. These 50 challenges have gone by quick, but I've truly enjoyed each one so far. It's important that job listings are not cluttered, but instead concise. Companies may have low response ratings to a job listing if users of a job search platform can't understand the job requirements or submit an application. This job search app has a layout that makes it easy for the user to learn about a company, read job requirements, and apply to jobs because the app uses clearly labeled buttons, simple icons, accessible colors, and concise labels.</p>
<div align="right">
<a href="https://www.behance.net/gallery/121508527/Daily-UI-050-Job-Listing" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<img alt="051" width="100%" src="/img/day051.jpg">
<h3>Daily UI 051 :: Press Page</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">This press page informs media outlets of their brand's style guidelines such as logo and font usage. A press page must be concise and minimal, giving publications all necessary resources while saving them time.</p>
<div align="right">
<a href="https://dribbble.com/shots/15856248-Daily-UI-051-Press-Page" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
<div class="col-sm-6">
<img alt="052" width="100%" src="/img/day052.jpg">
<h3>Daily UI 052 :: Logo Design</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">This logo is for an app I've been designing for Google's UX design certification course. The app will allow users to order from food trucks, therefore a food truck icon is used in the logo along with the app name "street side" below it making this logo is modern, simple, and easily recognizable. The color theme for the logo is black and white as the app I'm designing also uses this theme.</p>
<div align="right">
<a href="https://dribbble.com/shots/15881218-Daily-UI-052-Logo-Design" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<img alt="053" width="100%" src="/img/day053.jpg">
<h3>Daily UI 053 :: Header Navigation</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">These are two minimal headers that feature navigation links using text and icons. Both headers are concise and allow a user easy access to the most important links. The first header could be used in a software as it includes links to a user's dashboard, account, and settings. The second header could be used for a social app as it allows a user to directly access their profile, settings, notifications, search, and menu.</p>
<div align="right">
<a href="https://dribbble.com/shots/15890524-Daily-UI-053-Header-Navigation" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
<div class="col-sm-6">
<img alt="054" width="100%" src="/img/day054.jpg">
<h3>Daily UI 054 :: Confirmation</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">This confirmation notification is simple and concise, informing the user of the next steps in their account set up process. The notification tells a user to check their email to confirm their new account.</p>
<div align="right">
<a href="https://dribbble.com/shots/15891624-Daily-UI-054-Confirmation" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<img alt="055" width="100%" src="/img/day055.jpg">
<h3>Daily UI 055 :: Icon Set</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">Icon sets are extremely helpful to both designers and developers as they provide a consistent collection of icons to use for an app, website, or software. Icons are great to use for navigation when text isn't a good fit, therefore the icon must be easily recognizable and concise.</p>
<div align="right">
<a href="https://dribbble.com/shots/15908374-Daily-UI-055-Icon-Set" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
<div class="col-sm-6">
<img alt="056" width="100%" src="/img/day056.jpg">
<h3>Daily UI 056 :: Breadcrumbs</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">Breadcrumbs aren't a feature that gets a lot of credit however they can be very helpful in an application, website, or software. Breadcrumbs allow a user to view the directory to where they are in the directory. If the breadcrumbs are links, then a user can easily return to a previous screen. I feel breadcrumbs are underrated and are always worth putting into any project.</p>
<div align="right">
<a href="https://dribbble.com/shots/15915500-Daily-UI-056-Breadcrumbs" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<img alt="057" width="100%" src="/img/day057.jpg">
<h3>Daily UI 057 :: Video Player</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">This video player is minimal and easy to navigate as it uses icons that are easy to comprehend. A back button and the video title are located in the top left corner of the player. Across the bottom of the player, the player's timeline is located above the play/pause button, timestamp, volume, closed captions, and settings icons.</p>
<div align="right">
<a href="https://dribbble.com/shots/15926407-Daily-UI-057-Video-Player" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
<div class="col-sm-6">
<img alt="058" width="100%" src="/img/day058.jpg">
<h3>Daily UI 058 :: Shopping Cart</h3>
<h5>Deisgn Notes:</h5>
<p style="font-size: 12px; color: grey;">Shopping carts or shopping bags are common in digital shopping apps and websites. A shopping cart must be concise so a user knows exactly what they're ordering. Using light colors, such as the blue used in this design, is better than using dark, vibrant colors that can cause a user to feel uncomfortable and overwhelmed.</p>
<div align="right">
<a href="https://dribbble.com/shots/15926557-Daily-UI-058-Shopping-Cart" class="btn btn-sm smallborderedbutton">View on Bēhance →</a>
</div>
<br>
</div>
</div>
<br><br>
<h4 align="center">Stay up to date as I complete each day's challenge by following me on:
<br>
<a href="https://www.behance.net/MatthewMarquise"><i class="fa fa-behance" aria-hidden="true" style="font-size: 17px;"></i> <span style="font-size: 14px;" class="linkborder2">Explore My UI/UX Designs on Bēhance</span> </a>
<br>
<a href="https://dribbble.com/MatthewMarquise"><i class="fa fa-dribbble" aria-hidden="true" style="font-size: 17px;"></i> <span style="font-size: 14px;" class="linkborder2">Explore My UI/UX Designs on Dribbble</span> </a>
<br><br>
<div align="center" >
<h6>Occasionally I'll write an article about a particular day's challenge on DEV.to and Medium:</h6>
<a href="https://dev.to/mattmarquise"><img width="20" height="20" src="https://d2fltix0v2e0sb.cloudfront.net/dev-black.png"> <span style="font-size: 14px;" class="linkborder2">Read My Articles on DEV.to</span></a><br>
<a href="https://matthewmarquise.medium.com"><i class="fab fa-medium"></i> <span style="font-size: 14px;" class="linkborder2">Read My Articles on Medium</span></a>
</div>
</h4>
<br>
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom"></div>
<br>
<!-- FOOTER -->
<div class="row">
<div class="col-6 col-md-4" style="font-size: 12px;">
<b><u>Skills</u></b>
<br>
<div style="padding: 4%;">
<dl>
<dt>Front-End Development:</dt>
<div style="padding-left: 10px;">
<dd>- Html</dd>
<dd>- CSS</dd>
<dd>- JS</dd>
<dd>- Laravel</dd>
<dd>- Extensive work using Shopify</dd>
<dd>- Experience using Squarespace</dd>
<dd>- Responsive Web Design</dd>
<dd>- Rapid Bug Fixes</dd>
</div>
<br>
<dt>UX Design:</dt>
<div style="padding-left: 10px;">
<dd>- Research</dd>
<dd>- Writing</dd>
<dd>- Wireframing</dd>
<dd>- Design</dd>
<dd>- Prototyping</dd>
<dd>- User Centered Research, Design, Testing</dd>
<dd>- Experience using Figma & Adobe Xd</dd>
</div>
<br>
<dt>Marketing:</dt>
<div style="padding-left: 10px;">
<dd>- Social Ad Campaigns</dd>
<dd>- Mailchimp Campaigns</dd>
<dd>- Photography</dd>
<dd>- Graphic Designs</dd>
</div>
<br>
<dt>Other:</dt>
<div style="padding-left: 10px;">
<dd>- Music Producing / Songwriting</dd>
<dd>- Digital Photography & Cinematography</dd>
<dd>- Hardcore Tennis Player</dd>
</div>
</dl>
</div>
</div>
<div class="col-6 col-md-4" style="font-size: 12px;">
<b><u>Experience</u></b>
<div style="padding: 4%;">
<dt>Raleigh Golf Carts:</dt>
<dd style="color: grey;">Developer & Marketing Lead <br> Part-Time : 2020 - Present</dd>
<div style="padding-left: 10px;">
<p>Designed & developed a modern, user focused website while using graphic design skills to create high quality ads used in the company's various marketing campaigns across their social media profiles.</p>
<dd>- Social Media Ad Campaigns</dd>
<dd>- Web Design & Development</dd>
<dd>- Photography & Graphic Design</dd>
</div>
<br>
<dt>Custom Quality Covers:</dt>
<dd style="color: grey;">Director Of Sales Marketing & CX Lead, Intern <br> Part-Time : 2020 - Present</dd>
<div style="padding-left: 10px;">
<p>Selected to lead the sales marketing & customer experience for CQC, using and increasing my knowledge of Mailchimp email campaigns, website development and maintenance of a Shopify and Squarespace site, as well enhancing their social media presence.</p>
<dd>- Mailchimp Email Ad Campaigns</dd>
<dd>- Web Development and Maintenance with Shopify and Squarespace</dd>
<dd>- Social Media Ad Campaigns</dd>
</div>
</div>
</div>
<div class="col-6 col-md-4" style="font-size: 12px;">
<b><u>Certifications</u></b>
<br>
<div style="padding: 4%;">
<p>Harvard CS50 - Introduction to Computer Science</p>
<p>Goldsmith's, University of London - Mathematics for Computer Science</p>
<p>Google Professional Certificate - UX Design</p>
</div>
</div>
</div>
</div>
</body>
</html>
<style>
body {
margin: 0;
color: black;
height: 100%;
background-size: cover;
background-color: white;
font-family: 'Montserrat', sans-serif;
}
a {
text-decoration: none;
color: black;
}
a:hover{
text-decoration: none;
color: black;
}
/* BLACK BORDERED BUTTON */
.borderedbutton {
border: 2px solid black;
background-color: white;
color: black;
padding: 14px 28px;
font-size: 16px;
color: black;
}
.borderedbutton:hover {
background: black;
color:white;
transition: 1s;
}
/* SMALL BLACK BORDERED BUTTON */
.smallborderedbutton {
border: 2px solid black;
background-color: white;
color: black;
padding: 8px 20px;
font-size: 10px;
color: black;
}
.smallborderedbutton:hover {
background: black;
color:white;
transition: 1s;
}
</style>