Daily UI 026 - Subscribe

Day 26 was to create a subscribe button or widget. As I've been on trains a lot recently for interviews, I decided to create a widget that offered to send your tickets directly to your e-mail address. I drew on inspiration from physical tickets to design the widget and gave the design a bit of dimension and depth by stacking the layers.

Subscribe.png

Daily UI 025 - TV App

Day 25's prompt was to create a TV app. After a week's break from the challenge, this was a nice to prompt to ease myself back into the challenge. I kept the UI fairly simple for this week and made sure to feature imagery from the various shows as to keep with current trends for these types of apps. On reflection, I feel like I could have scaled down the other shows in the carousel to add more in but overall I'm happy with the final design.

Mockup-TV.jpg

Daily UI 024 - Boarding Pass

Day 24's prompt was to design a digital boarding pass. I decided to design a boarding pass for my upcoming holiday, keeping the actual pass minimal and focusing solely on the most important information to convey. I found this prompt a little bit difficult today but I didn't struggle as much and get too in my head about it. Instead I'm just glad I'm getting out of my comfort zone and designing UI's than I may not have traditionally gone out of my way to design for. 

Daily UI 023 - Onboarding

For day 23, the prompt was to create an on-boarding process. I was happy with this how this one turned out today. As a designer that enjoys putting a focus on UX, I was pleased today was a prompt that is an important part of the UX of apps and would give me a chance to work in that area.

Overall I've kept the design fairly simple, and gone for a modern feel using the brighter colours and plain text. I'd imagined that this process was for a user using a new hotel app for the first time on mobile and I wanted to emphasise how easy it was to book rooms using the app, limiting the steps the user would need to take to reach their end goal to 3. 

Mockup-Onboarding.jpg

Daily UI 022 - Search

I kept this prompt nice and simple today and decided to create a search button to accompany the dashboard I had created yesterday. The idea was that the search bar would expand after the button is clicked and the search results would give a preview of the results that the user could then click to be taken to the full results. 

Mockup-Search.jpg

Daily UI 021 - Home Monitoring Dashboard

It's week 5 of my Daily UI challenge and the first prompt of the week is to create a home monitoring dashboard. I decided to design something that would help me keep track of the daily tasks, in the form of lists, that I've got to do around the house that could be accessed on any platform. As well as this, I made sure to leave myself the option to create additional lists for whatever I needed and that each lists are categorised by day, with the option to few feature days to pre load lists of tasks to do later in the week.

I'm still exploring Sketch, which is what I used to make this UI and finding the learning curve isn't too steep. I still need to try the prototyping features available to compare them to InVision's tool but for now I'm quite happy with the progress I'm making with getting familiar with Sketch. I think what I'm going to do is look for more plugins that will add a bit more quality of life and bring my designs up to the next level. 

Mockup-Dashboard.jpg

Daily UI 020 - Location Tracker

Another prompt where I struggled a bit, but I think I was struggling with this one a bit more because of the lack of live data required to properly track locations e.g. having access to some sort of map and designing the visuals around that. I'm happy with the results however, even if it's a bit basic and I'm really enjoying using Sketch for creating these UI's. Moving into next week I'm going to definitely begin exploring the animation options that Sketch provides.

*Map used from Harmony UI Kit

Daily UI 019 - Leaderboard

Day 19 of the challenge was to design a leaderboard, so for this prompt I decided to design a UI to show my current top most played songs in a leaderboard format, with the option to play the music video for the current number 1, as well as the videos in the rest of the playlist. The leaderboard would also track the increase or decrease in plays compared to the other weeks, signified by the arrows. If the track is particularly popular, they are starred to show this.

To continue my streak of using alternative software to Photoshop, I decided to give Sketch a whirl to create this UI and I'm really kicking myself for not trying it sooner. It definitely feels more robust and polished compared to InVision Studio, and I found it a lot quicker to pick up than InVision. This is really helping me feel reinvigorated about this challenge and I'm glad it's giving me the chance to explore different tools other than just relying on Photoshop.

Mockup-Leaderboard.jpg

Daily UI 018 - Analytics

For day 18, I decided to create an analytics screen based on my recent "data" of my travels up and down the country between Dundee and Glasgow, and my estimated spend on tickets. I kept the information featured fairly simple to contrast with the strong gradients of the graphs and it's worked well.

I also tried Studio's animation feature, which was really cool to see in action and give the graphs a bit of motion as the data changed. However I was a bit disappointed that the software didn't animate properly when gradients were involved, and there was a bit of stuttering in the animation. I guess this is kinks that they'll work out eventually, but I feel like the rest of the tool is quite solid to work with as long as the work is static.

Mockup_Analytics.jpg

Daily UI 017 - Email Receipt

I've started week 4 with the good news of receiving my beta key invite to InVision's new tool Studio, their answer to Sketch and Photoshop. This reinvigorated the challenge for me and got me excited to use it to design my next prompt - an email receipt. 

I'm really happy with how this has turned out, and I think being able to add the extra bit of interactivity makes all the difference in the final designs. I think I've still had a bit of teething issues with font sizes and spacing, but I'm putting that down to getting to grips with the tool today, as I'm still used to Photoshop's more precise measuring system.

EmailReceipt.gif

I'm really glad I got access to this tool because I think this will really help me improve on my upcoming designs going forward. It provides correctly spaced guides straight away which is perfect for me as this will really help me improve my sense of scale. Being able to view my work in real time on the devices I'm working on is also a bonus on that front.

It's going to take some getting used too moving from Photoshop and while it still lacks features that make Photoshop the superior tool to design for, having access to an interaction tool already opens up more possibilities to creative dynamic designs than Photoshop does.

Screen Shot 2018-04-23 at 14.16.46.png
Screen Shot 2018-04-23 at 14.16.51.png

Daily UI 016 - Pop Up / Overlay

The last prompt of week three of the challenge was to create an pop up or overlay element. I decided to create one similar to Spotify's new music notification but on a slightly larger scale. Overall I think this is one of the better designs I've come up with this week but I'm still having issues with scaling, especially with the text sizes in this design. I'm looking forward to the weekend to take a quick break and ready to come back with a renewed confidence and zest for designing in week 4.

PopUp_Overlay.jpg

Daily UI 015 - On/Off Button

Another day of feeling the pressure of the challenge and struggling with the prompt for the day. I still pushed on however and designed an on/off toggle button for determining the status of a social media account. I pushed myself to animate this one too to see the transition between the screenstates. While the final gif is okay, I really need to find another tool to allow me to animate transitions and elements more smoothly (and easily!)

Mockup-OnOFF.jpg
On_Off.gif

Daily UI 014 - Countdown Timer

For today's prompt, I had to design a countdown timer. Inspired by my upcoming holiday abroad, I decided to try something less conventional for a timer, and created a dashboard/countdown timer hybrid concept.

I stuck to a grid this time, which was definitely beneficial in terms of helping me understand spacing and sizing a bit better but I still feel like the finished design is a bit off and is easily my least favourite of the challenge. I think it's just because I ended up going with a concept that was a bit half baked, and could have required me to spend a bit more longer conceptualising, especially in terms of what other information I was trying to showcase.

Alternatively, I think with a bit more tweaking of the elements, this could function as a good interactive header for an email delivered by whoever is organising your holiday or be a viable dashboard for tracking holidays or upcoming events. 

Mockup-Countdown.jpg

Daily UI 013 - Direct Messaging

Today for day 13 was the first day I've really felt the struggle designing these prompts. For a direct messaging app, I've kept the design simple and heavily inspired by other popular direct messaging applications on the market. I've definitely treated today's prompt as more of an exercise in recreating a popular UI style for this prompt than pushing boundaries and trying something new. I think this is what I needed to avoid getting burnt out with the challenge and by constantly trying to innovate.

Mockup-DirectMessaging.jpg

Daily UI 012 - E-Commerce Shop (Single Item)

Week 3 of the challenge begins with a prompt to create a UI for an e-commerce shop and specifically for a single item. I felt that this was quite a nice prompt to ease myself into the week. I decided to create a UI for a streaming platform that allowed you to rent movies, and choose the release of the new Star Wars film as my single item to sell. I pulled the colours from the cover of the film and imagined that the coloured elements would change to match the predominant colour of the colour of film the user had selected. I kept the rest of the UI simple, making sure to make the streaming options predominant as well as a short description of the film. 

Mockup-Ecommerce.jpg

While I was happy with this design, I feel like I've fallen into the scale trap again which just reinforces that I need to take the time to properly scale my designs, or at least create a template I can use, as I tend to use the same size for my web mockups. I also think on reflection that I've maybe missed out some extra information that might have been essential e.g. I should maybe have featured the names of the main cast and the director, as well as the run time of the movie. I think I maybe got caught up in the details of the rest of the design that these details have slipped through.

Daily UI 011 - Flash Messages

Week 2's last prompt before a quick break over the weekend was to design a flash message, as well as an outcome for an error and for success. I decided to create a flash message for ordering groceries - in particular, confirming the shopping order to be sent out to an address at a specific time. The colour scheme I unintentionally used turned out to resemble traffic lights but I was trying to keep up using bright and bold colours in my work.

I also experimented today with the basics of animation to add a bit more life to my designs. I kept it fairly simple today by creating a basic ring loading animation that would appear after the user has confirmed their order. This was to give the user some feedback that things were happening behind the scene. This loading ring would then turn into a tick symbol and turn green if the order was confirmed or a cross symbol and turn red if there was an error. I was pleased with how the wee animation turned out and I'm looking forward to including more complex animations as the days go on, and I get more comfortable with animating elements.

Flash-Message.jpg
Flash-Message.gif

Daily UI 001 - 010 – Reflection

I'm really glad I started and have been sticking with the Daily UI challenge over the last 10 days. It's been tough sitting down to design every day, I'm already beginning to feel more confident when designing new and unfamiliar UI elements now, and feel like I'm beginning to create a nice library of examples I could use for future projects or inspiration.  My personal favourite for this set of days is day 4, which was the calculator UI – I really feel like I'd nailed that one despite it being so simple.

I've also identified a skill gap when it comes to animating these designs. I can turn out great looking static designs but I want to start taking them to the next level by animating all of the elements. I think I'll try and do this in either InVision Studio or Adobe XD if possible, so that I can start building my confidence with these platforms.

Moving ahead into the next 10 days, I want to set myself some goals to try and implement in the future prompts. These include:

  • Experimenting with different styles other than flat design
  • Bringing in even more popular design trends to show that I'm staying up to date
  • Beginning to animate more of my work and interactions
  • Trying to get a better grasp of scale - especially with web design

Bring on the next set of challenges! 

Daily UI 010 - Share Button

Day 10's challenge was to create a Share Button element. I found this challenge a bit tricky because I didn't feel my animations skills were up to scratch to properly explore designs and concepts for this day. Nevertheless, I produced something in the end that I was happy with and even produced a frame animation gif to explore the key stages - the initial state, revealing the social media options and what happens after you choose to share to these specific sites (showing the number of shares). 

Mockup-ShareButton.gif

Daily UI 009 - Music Player

The prompt for day 9 was to design a music player, which was an exciting prompt for me. I decided to opt for a traditional layout that's popular at the moment, but experimented with some less conventional elements including displaying the album artwork in a circle and having the playback bar surround the artwork.

I think these elements work from a UI perspective but I'm not sure if they would work from a UX perspective. I would be keen to experiment with this design in a prototyping software to explore this further.

Mockup-MusicPlayer.jpg

Once again I'm relatively happy with how this design turned out and I feel like I'm managing to incorporate popular design trends into each piece of work. I was also very happy with how confident I felt designing for this prompt.

Daily UI 008 - 404 Page

Day 8's prompt to create a 404 page for a site. I decided to be a bit more experimental with this prompt and try something less conventional than what I've been producing for the rest of the prompts. For this page, I was was drawing inspiration from the Helvetica posters since I love their vibrancy and the impact the style can have. I really wanted this 404 page to make a statement, even if it necessarily wouldn't fit well into most sites.