Unit Viewer.png

30 Minute Daily UI Challenge Part 2

30 Minute Daily UI Challenge Part 2

 

Visual Design Boost

With Visual Design being the weakest point of my designer's toolkit, I am embarking on a journey to improve my Visual Design skillset through the 30 Minute Daily UI Challenge. Every day will have a new prompt that I will create a mockup for within 30 minutes (once that timer rings, I put the pixel-brush down) as well as a brief description, what I liked about the project, and what I didn't. Hopefully, over time, we'll see an increase in ability :) Feel free to take a look and keep me accountable!

 
 

Day 88

Avatar. Alright, so this isn’t an avatar, but I just did that literally yesterday and really didn’t want to just copy it for kicks and giggles. So let’s do something a bit different! This is the current WIP design for my consultancy website that I am designing through Wix over the past few days in my downtime. I’ve actually found Wix to be much more flexible and powerful than Squarespace (what this website is running on), I’m almost certainly going to be switching this site and my wife’s at the end of our year with Squarespace. There are a lot of remnants here from the old template (such as the logo and all the Projects), but I’m happy with the direction that it’s going in.

Things I like:

  • COLOR! I’m bringing in my color palette from my resume and I’m absolutely loving it here. I feel it injects energy, play, and professionalism and I’m very happy with it.

  • Avenir and Avenir Light are doing a lot of heavy lifting here, I find that those two next to each other can help give a playful look while focusing attention where it is wanted.

Things I don't like:

  • Obviously I’ve got a lot of content to gather before this can really move very far.

  • When you are actually on the site, it is quite janky. The images all scale oddly so that at larger screen sizes they become largely illegible as images of any meaning.

  • The alignment on the top “Joseph Newell - Design Sprint Facilitator” section is off a bit

screencapture-josephnewell90-wixsite-joesprints-2018-11-15-13_43_15.png
87.png

Day 87

Tooltip. OK, so I cheated here and did a rich data tooltip, which isn’t really a tooltip as much as it is a flyover or a popover. Fight me. Anyone can build a regular old tooltip according to already defined detailed specs. So here comes this, an ID card for a profile.

Things I like:

  • I managed to include enough white space here, and the dark valued colors in the background really emphasize the stark whiteness nicely.

  • Color accents in the flyover work well to vary up the boring white and black while focusing attention where it needs to be.

  • I put a slight inner shadow over the profile image as well as the drop shadow and I think it helps it look a lot more natural.

  • The background gradient leads your eye exactly where I want it nicely while leading to setting the stage for the rest of the content.

Things I don't like:

  • The dark purple probably shouldn’t be on the both the divider bar and the actions. You start to build in some slight interference effects there. Doing it again, I would explore using some of the peach in the upper left of the gradient.

  • The background actually has some faint line work over the gradient that you can’t really see now that it’s all exported. Lesson for me that if I’m doing anything subtle I need to remember to make the image size large enough that it actually shows up.

Day 86

Progress bar. I wanted to show progress towards a goal, so in this case it would be towards unlocking a new unit for an army in a game. I feel like I’m starting to get more sophisticated in my use of fill layers to obtain certain effects. It’s quite exciting to see!

Things I like:

  • The design is very atmospheric, which really fits the ambiance of the Tomb Kings as a faction.

  • The tarnished precious metals aesthetic also carries through in the frame for the unit.

  • I think the design has a very balanced weight, while still clearly emphasizing a certain part. It is immediately obvious which faction you are viewing as well as how far along you are towards unlocking it’s next unit.

Things I don't like:

  • The slider bar itself doesn’t stand out as much as I would like. I was really struggling trying to find ways for it to look like it belongs with the rest of the aesthetic. I think adding some sand texture to the loading bar might help that? Right now it is pure color, which doesn’t really exist in the rest of the design.

  • The faction emblem on the left has some unfortunate tangents with the top of the page, it would have been smart to move it up or down to remove that and provide some more breathing room in the design.

86.png
85.jpg

Day 85

Pagination. I went back to the idea of Figure Mentors from way early on and made it a lot more minimalistic. This was another of those components I didn’t feel many creative juices sparking, so I built the rest of the UI with my time.

Things I like:

  • I like the minimalist approach here, it definitely feels very classy with lots of black and white and empty space.

Things I don't like:

  • Not sold on the layout for the contact cards. I feel like there would need to be lots of work done there for it to make more sense.

  • The stars and chips have the same visual weight, something needs to give there.

  • The violet and greenish yellow clash too heavily here. The purple I think needs to be much more understated in a very small part of the UI to work well here.

  • I’m noticing a trend that I’m not allowing enough whitespace in my designs recently.

Day 84

Badge. This turned out more fun than I thought it would. Once again, I think the play shows through. I’m not perfectly happy with things, but overall it was fun playing with overlaid textures, shadows, and light to try and make something a bit realistic.

Things I like:

  • The textures work really well, there are several overlapped in blending modes for the golden part of the shield and I think it came together really nicely.

  • The tagline at the bottom was great, since this was largely decorative I didn’t worry too much about legibility and picked a very thematic font, not a luxury that I get very often.

Things I don't like:

  • The background is too dark for the shield to really stand out from it. I probably would try again with a lighter valued shade or a different hue altogether.

  • I would have loved to do a lot more weathering effects like chipping the paint on the hammers, adding some stains across the shield here and there, add some cleaved metal. Unfortunately I ran out of time after throwing away 2 previous ideas before getting to all that.

84.png
83.png

Day 83

Button. So we zoomed to a macro level of the UI and I’m not going to lie, I kind of froze. I kept on thinking, I have made dozens and dozens of buttons for this challenge already, what more should I do? So I made…this? I honestly can’t rationalize it with words, it was more a string of loosely affiliated thoughts than anything coherent. There may be something to this, but I can’t really explain it with words at this point.

Things I like:

  • Micro-interactions are on display here, highlighting the hovered choice and dimming the other while adding an underline make it feel a lot better to choose something. That can be important as we ask for more and more decisions, especially during onboarding when users can easily fall off.

Things I don't like:

  • Not sure why there’s a color for the background

  • The illustration has a lot of tidying up to do

  • I wish it was in the context of the full page I think? I just don’t think there’s enough to a button (without doing something funky like adding motion or something) to merit a full on macro view. They’ve kind of all been done by this point, it’s just a matter of getting a style that gels with your own.

Day 82

Form. This would be for Warhammer players to be able to create their lists digitally and easily share them.

Things I like:

  • Why add your items one at a time? The addition of the import button makes the whole process a lot smoother and even could lead to higher social sharing.

  • I originally had the add and import buttons swapped, but moved them to their current location because the add button is a much more repeated action, so it should take the easier to reach spot, even if it isn’t the primary action necessarily.

Things I don't like:

  • Not sold on the colors here, I’d like to give it another shot sometime and work that better. The colors are complimentary with a high contrast, but it is distracting instead of enhancing.

  • I think the Army Name field could actually just be the title of the page and be an editable display.

  • Practically speaking, we’d probably want this to auto-save on creation and edit without needing a huge save button on the bottom. There’s no need for a manual save checkpoint on something like this.

82.png
81.png

Day 81

Status Update. The idea here is a type of journaling app providing a short status and a picture. The idea is brief documentation that is easily skimmable over time.

Things I like:

  • It’s got a bit of a minimal style which I think is somewhat interesting.

  • It’s also very directed in its purpose, the home screen is immediately targeted towards a specific use case. No need to navigate, nothing. Just open it and start typing.

Things I don't like:

  • Overall it feels a bit simplistic, as well as busy at the same time. I think I should have maybe added some tabs to the bottom instead of fitting three different types of content on the same screen.

  • I didn’t have very much purpose on this one. The idea was very loose, and I think it shows. I had a lack of focus and that resulted in slower design times, meaning everything was that much less polished than others. I’m noticing that trend, when I have a solid idea at the outset, I’m able to get quite a lot more done within 30 minutes than otherwise.

Day 80

Datepicker. Not much to say conceptually here. This was one of the ones I was really not looking forward to, but I got to play with colors and typography in a way that was really satisfying.

Things I like:

  • Probably my favorite part here was the colors. I’ve been reading Color and Light by James Gurney and put a lot of what I’ve been learning into practice with a bright chroma blueish green as the primary color, then a lower chroma pinkish red and an even lower chroma blue gray. I think the three work really well together and each signify a different thing with the green being navigation, pink being interaction controls that are necessary, and the blue providing structure through elements like the background and the divider lines.

  • The unconventional direction of the light I feel lends to a bit more of an adventurous feel, something that would be appropriate for something like a travel app.

Things I don't like:

  • The header for the day names feels a bit crowded. I played with a couple different options there but wasn’t able to find something I fell in love with in time.

  • I might swap the colors of the pink and the teal. I think it would make more senes for the bright colors to be on the primary action.

80.png
79.png

Day 79

Itinerary. A simple trip planing and sharing app. I didn’t have time to think this one all the way through, there’s not even a way to view who has been added to it or manage them. Most of my time was spent trying to make an otherwise very simple layout a bit more interesting. I tried to use lots of colors from a Material scheme to try out their Color Tool.

Things I like:

  • I think I was able to make things more visually interesting with the colored background cells, transitioning each day as a color, and the shadows on the new day.

Things I don't like:

  • Were I to do this again I would do things so differently. Small things like the background color of the cells being too skinny to big things like not having the background be pure color. I also would have added in the social controls which are clearly missing from here.

Day 78

Pending Invitation. What can I say, they can’t all be winners. I spent so long trying to work out colors on this one that by the time I decided to move on, there wasn’t enough time to fix the lacking layout. The idea is a sort of progression system based off of recruiting friends to join the app.

Things I like:

  • The orange and white with the cool blue gray work well together.

  • It was fun experimenting with the progress bar up top. I think I like the idea of the graphic coming in from off-screen.

Things I don't like:

  • Everything feels pretty plain and lacking. Visually it’s all very simple, and yet selectively busy at times. The layout just doesn’t work, this is a project that would merit more than just 30 minutes for me to really work out what could be useful and fun, something I really wish I could take the time to do.

78.png
77.png

Day 77

Thank you. I didn’t really have the resources available that I wanted here, but I feel like I made a good go of it. This would be right after an order is finished.

Things I like:

  • The color of the red works really well, I played a lot with blending modes, gradients, and textures today.

  • I added just a bit of green to the text color to try and make it stand out a bit more, being a complementary color to red. I think I like the effect?

Things I don't like:

  • Not sure about the greenish text? It might make it look a bit cartoony.

  • I’m not sure I’ve got the right information here. I’d like to talk to people who order Citadel Miniatures regularly on what they feel is most important for them.

Day 76

Loading…. This was one of those that I was really not enthused to try out, but ended up liking the result. This is a loading screen for a companion app for Age of Sigmar, the tabletop roleplaying game.

Things I like:

  • I think the colors worked really well, pushing the art to be a strong focal point. Warhammer has some great art, and we can use it to not only build brand or generate excitement, but also to keep people engaged while their game loads. I also put an inner shadow with a Hard Light blending style to try and make an even stronger focal point in the center, gearing people up for their tabletop conflict they’re about to participate in.

  • The “loading” text is made a bit more interesting and I think it’s still easily identifiable since it is so close to a loading percentage.

  • The rule tips on the bottom cycle out, and have a visual indicator of when they will move. I think this not only provides something a bit more interesting and dynamic, but also provides a service to the players.

Things I don't like:

  • The metal frame around the art is not good at all. It’s how I’ve typically done these, and I’m just realizing this doesn’t really work at all. It doesn’t really have any dimension to it, it’s just a flat disc being hit by the light equally in any given section. I definitely need to fix that.

76.png
75.png

Day 75

Pre-Order. I think this turned out really well actually. A pre-order for a new expansion to an existing game on a marketing website.

Things I like:

  • I think this is some of my best typography I’ve done. I finished the broad idea really quickly and was able to really fine tune things a lot more. I feel like it is thematic, while still being clear and getting the most important information to the user while exciting them about the purchase.

  • The Kill Team orange branding as the ghost button worked really well. It reinforces the sci-fi look while being a great complimentary color to the dark gray blue background.

  • The background images worked really well, the blood stain pulling the eye from the box down to the board and carrying that energy through to the pre-order button. Also, the sound waves are very lone ship in outer space-y and serve as a really nice divider between the title and description text. It all helps the otherwise very plain background to feel more alive and energetic.

  • There were a lot of subtle effects to help this feel better, subtle gradients on the background color and inner shadows on the “What’s in the box?” section once gain help it feel more dynamic and atmospheric.

Things I don't like:

  • Feels like the header is a little bare, but I’m not sure on that one. Like there should be a title or something.

  • The colors of the background images keep on bugging me. We’ve got a super transparent pure white and a very rich, dark red that is also transparent. My attention keeps on going back to those. I tried to make the sound waves the same color as the blood, but it didn’t really work out. They lost their distinctness. Maybe I could have shifted the sound waves to a more complimentary color, like the Kill Team orange? Really separate it from the blood stains? Not sure on this one.

Day 74

Download App. I spent a lot of time on the background which was fun, although I wasn’t able to achieve the effect that I wanted. The idea here is an app that people can download to partner and facilitate WarhammerFest, a wargaming convention. I got the idea after seeing Silicon Slopes’ companion app and chatbot that they had ready for their conference.

Things I like:

  • Love the concept!

  • Contextual menus are my jam.

Things I don't like:

  • I’m just not entierly sold on it. It seems a bit too dark and the variance in the purples isn’t coming through like I want. I should have probably shifted some to be a bit more reddish, and some to be a bit more blueish.

  • I didn’t have the time to refine the header like I would have wanted, I was trying to make an exploded metal sort of background for the title, but it wasn’t coming together in time.

  • The typography is all a bit off. I used a typography scale I already have access to to save time, but I’m not super happy with the results.

  • The buttons don’t have enough contrast as the main calls to actin on the page.

74.png
73.png

Day 73

Virtual Reality. OK so this is augmented reality but I feel it still works. The idea here is a fully digital tabletop experience. This would allow for people to have a computer assisted version of the game and serve as a gateway to buying the physical product for those that want to get into the hobbying aspect. People could buy their armies twice, once digitally and then decide they want the physical figures. Huge win for the business side, especially if they let the digital version be cheaper so people could “try before you buy.” Unfortunately, I clearly ran out of time before I was able to really flesh this out.

Things I like:

  • Love the concept!

  • Contextual menus are my jam.

Things I don't like:

  • Ran out of time so didn’t get to think through the controls very well, how they flow, what information is most important, or how it should all look. BUT IT WAS SO FUN TO MAKE.

Day 72

Image Slider. I kind of felt like this was another one of those practical challenges that are important, but at the same time….remarkably boring. This is a folder for gathering project inspiration. It is very minimal, just showing the image, link, and some wayfinding with what position they are at.

Things I like:

  • Very focused direction allows for large images, useful when pulling them up as a resource in the middle of a painting job.

Things I don't like:

  • It’s just…kind of boring, isn’t it? I really searched for ways to make this more interesting with some screen transitions happening with the swiping and everything but…I just…couldn’t…

72.png
71.png

Day 71

Schedule. With Jake Knapp and John Zeratsky’s Make Time having just released, I got it into my head to do a more focused and mindful schedule. Moment helps you to focus on one thing at a time, and is meant to feel liberating and freeing. I tried a largely grayscale palette today since it fit the idea and I wanted to try something a bit more visually stripped down to reflect what the app is trying to help you do, remove all the unnecessary noise. There is a way to view your full day schedule in the bottom right, as well as a sliding drawer where you can quick reference the next thing to do in your day.

Things I like:

  • I think the grayscale kinda works. I think it needs lots of help and revisions, but overall I do feel it gives the impression of lightness, simplicity, and calm that I was going for.

  • The blue ties to the scheduled appointment and serves to direct the eye nicely.

  • The common actions are in very easy to reach places, allowing a quick reference.

Things I don't like:

  • The actions might be too easily referenced. If the idea is to help people focus on the immediate thing they are doing, it might actually be good to introduce some friction into those actions that distract.

  • The color palette needs help. I’m not sure where to take it, but it’s not where I would like it to be yet.

Day 70

Event Listing. This is pretty straightforward, an app that would allow you to see nearby gaming events and RSVP. This does have the added benefit of being super integrated with Warhammer specifically. This means that once you’ve RSVP’d, you’d pick one of your pre-built army lists to associate with the RSVP, then everyone would see the army’s badge next to your profile icon. The thought there was it would drum up interest as people would see the wide variety of armies that could be present, helping them fill out the narrative in their own minds.

Things I like:

  • I guess I’m on a bit of a purple kick. I don’t think I pulled off the analogous color scheme here, but I am glad I tried it and would like to explore it further.

  • Everything reads really cleanly, which has been a trial for me in the past. All the information is pretty distinct.

  • I love the army badge, I think it adds value to the user but also really does push that idea of helping them build out their narrative in their mind. Nothing motivates people like a story.

Things I don't like:

  • Like I said, I think the colors are off. It’s too sharp of a jump between the purple and the red without an intermediate color to bridge it, so it just looks too disparate and separate.

  • The text on the event description could use some refinement. It seems too heavy, but there might be a different problem at play here, such as the proximity of the date to the description. Maybe the date needs to go higher to associate more closely with the title, I’m not sure.

  • The Read More and RSVP buttons aren’t really working. They kind of stick out like a sore thumb. Very sore.

70.png
69.png

Day 69

Trending. Crispy is tomorrow’s hot new app to stay on top of all the new mini painting amazingness. Upvote pieces you feel are worthy of a spot of fame, and find new talent for your projects. It’s on fleek, it’s cray, it’s Crispy.

Things I like:

  • I’m actually really happy with how this came out. I think this is my best dark theme by far. I relied heavily on line work and punchy complimentary colors sticking out of a dark green background. I used ColorBox, the new tool by Lyft Design to generate the color gradations.

  • The images work well and serve as a built-in tournament style layout, helping the feeling of competition, and the drive to participate and be a part of a cheering crowd

  • The progressive gain of information also plays into the feeling of bigger and better.

  • The typography scale I think worked really well here. It enforces the hierarchy quite well, even if the font itself doesn’t have any variations and is a little bland.

Things I don't like:

  • The date labels are too small to really read. I need to get Sketch beaming to work on my phone to test stuff like that out.

  • The header feels a bit plain and static in comparison with the rest of the app. I think there’s lots of room to refine stuff there.

Day 68

Flight Search. Another challenge I wasn’t really thrilled with, haha. Additionally, I had to do this one away from my typical workstation, and I was definitely feeling the pain of not having an external mouse and keyboard. I tried another shot at a dark theme today to see if I could pull it off and I think the result is a lot better than previous attempts.

Things I like:

  • The neon colors stand out well against the dull background.

  • The focus on line work here works much better compared to the heavy shapes I was using in previous dark themes. The heavy background color is already a lot, so when I added in big blocky shapes with their own complicated colors, it just felt overwhelming. The line work is way better.

  • I hope these were some intelligent defaults, it’s hard to say without having real user feedback.

Things I don't like:

  • The purple of the button seems too strong for me. Maybe a ghost button could have worked better?

  • Same thing with the number callouts for the steps. That may have been better with the colors flipped to be less color screaming in the face all at once.

68.png
67.png

Day 67

Hotel Booking. This is one of those things that I didn’t want to do and gained a silent appreciation for those who have to day in and day out. It is just one of those things that is so standardized that I feel like doing a UI challenge on it is just copying essentially. So, I decided to try a different interaction pattern. The only information we would want from the user here is when they wanted to stay with us. After they had committed to that little bit, we would do the more intense information gathering from them during checkout. This gets them invested and less likely to fall out of the funnel.

I didn’t have much time this time round, Sketch was freezing every few seconds, so I didn’t get around to fully exploring the interaction on the calendar and how it would work in various circumstances.

Things I like:

  • The calendar is fun and interesting I feel. It gives enough space to tap and use on mobile.

  • All the interactions to push the user forward are in the sweet spot for one-handed use.

Things I don't like:

  • The calendar doesn’t function as seamlessly as I would need in order to really pitch this. There are multiple things that just don’t function quite yet. How do you return to the arrival date after selecting it? How do you skip ahead months at a time for those who plan far in advance? Do we even need the Book button if the calendar is the real CTA?

  • I tend to use red, warm schemes on stuff like this to engage the appetite and push the emotion. I wish I had tried something other than red here. Looking back it looks like I use that a lot, and a part of this challenge is to break out of old habits and develop a wider perspective.

  • The arrows in the calendar’s header are too high up and need to be brought down.

Day 66

Statistics. The idea here is a win-tracker for your tournament runs. I went for a dark orange for the background, with a brighter blue as a contrasting color. You could add all your armies, track your win percentages against different armies, and determine where you needed to shore up your tactics.

Things I like:

  • I haven’t done many dark themes, so it was fun trying that out.

Things I don't like:

  • I honestly really didn’t like how this one came out.

  • The background for the opened panel doesn’t have any affordances to tell you that it’s actually in an open state, not just a big tile. Honestly, I would probably change that filter icon to be a dropdown icon and the army selection could be there with the rest of the space down below being available for statistics that are relevant to the army you had selected.

  • The dark theme feels very simple and minimal, while the multi-colored shapes feel a bit more robust and the two just don’t work together. I need to pay more attention to unifying the attitudes of the design.

  • The blue on top of the dark orange really works I think, but the orange on top of the blue is too bright, too similar in value to work effectively, especially for the buttons since they don’t have the darker border on them. The background should have probably been a lot brighter in value, and the colors that go on top of it could have gone back to the dark orange in the background to help that out.

  • I just struggled finding ways to provide visual interest here, I think I just went in the wrong direction overall. I feel I would need a lot more research, feedback, and iterations before getting this into a reasonable state.

66.png
65.png

Day 65

Notes Widget. First off, the background of all this was not my creation, but pulled from Google. My only contributions here are the note widget itself.

I struggled trying to make this something more than just a tiny notepad on the screen. You can see two different states, one is the inactive and the other the active, tapped-on state.

Things I like:

  • I think the changes in opacity between state work well, and I like that you can edit pretty reasonably from the home screen with it expanding over everything else.

  • I tried to inject a bit more personality into it by adding some small curves here and there, especially with the color and carrot trail on the settings menu. I’m not convinced that it worked, but it is at least a bit more opinionated than a simple dropdown.

  • I had the settings menu in a darker brownish-orange, and it made everything look really old school. I switched to a complimentary color and that lightened it up dramatically, even though I didn’t have the time needed to refine the colors to be easier to read on.

Things I don't like:

  • It’s all a bit simple. Not sure if that was just the challenge, or I couldn’t get the inspiration I needed to accomplish something I’m really proud of.

  • The carrot trail could have been done better I feel. It doesn’t tie in to much right now, so I think I needed another element here or there to make it feel more cohesive.

  • The colors and type are hard to read together. Definitely need to refine that a bit.

Day 64

Select User Type. I thought this could be a good opportunity to allow an app to personalize it’s content through a type of Quickstart model onboarding in Material. The user could self-select what they were interested in and move from there. This was a good learning experience for me as it was planned out much better in my mind and the execution really let me down. Principally, the icons are all over the place, and it was a lesson to me to try to avoid doing too many custom icons within the space of this little half hour time frame I have. I had to quickly ditch my efforts and scrounge for random images on the internet which of course resulted in things appearing very chaotic, and took time away from refining the typography.

Things I like:

  • This was the most math I had ever used in a design, planning out the dimensions of the squares and the crown icon before even touching the shape tools, which felt quite empowering.

  • I like the beige border on the selection options. For a while, it was white, and right at the end I had decided I wasn’t liking it. Even with some transparency, it was still too stark and desaturated the screen. Changing it to the beige still accomplished the contrast I wanted, but kept more of the rich color to keep things feeling lively.

Things I don't like:

  • As I said above, the icons aren’t great. Too disparate and chaotic.

  • The typography is…fine. But I would have liked to have more time to futz with it and personalize it more to the app instead of doing straight Roboto Regular.

  • The progress dots in the bottom are a bit too spaced out I feel.

64.png
63.png

Day 63

Best of 2018. I wanted to step a bit outside of my comfort zone here and use lots of bold colors and dynamic shapes for this publication style app. I tried to direct user attention with strong, sharp angles and lines to lead them right into the content. I worry I might have put too much in there, but overall I think it was a good exercise to push myself a bit.

Things I like:

  • The lines would support reducing instant bounce rates, directing the user's attention back to the content.

  • Large focus on the content, which is fantastic. Big pictures of the minis, right into the content, and nothing that a casual reader wouldn't actually care about I'M LOOKING AT YOU COOKING BLOGS THAT HAVE 18 PAGES OF HOW YOUR WEEK WENT BEFORE GETTING TO THE RECIPE!

  • I am not sure why, but I loooooooove the oversized numbers for each entry. It probably just fits nicely with the bold aesthetic.

Things I don't like:

  • The background colors really gave me hassles. I had to futz with the lines for a long time, and you can't even really tell on most of it because it's covered by the content. The colors were a huge pain, I'm still not satisfied. I wanted them to not blend in too much with the content blocks, but it feels like an entirely different color palette from the content blocks. That could have stood a lot more refinement.

Day 62

Workout of the Day. I've recently picked up casual running, but the only thing that got me to do it was the combination of three different apps: Zombies Run, Pocketcasts/Audible, and Pokemon Go. Once I had that much value coming while I ran, it became worthwhile for me. The idea today would be something similar. Story is a powerful incentive, and if we could bring worlds that people have already bought into to bear, I'm positive we would be able to positively influence healthy habits for an under-serviced group of users. Each day, they could get a unique workout tailored to their goals and progress, while pursuing a story about one of the factions that they love from 40K. In this case, the user has chosen the Blood Angels.

Things I like:

  • I've been playing around a lot with texture, so I wanted to try something more simple again. I feel the effect worked, especially with the line drawing of the demonstration. This would be very expensive to animate, however and I'm not sure if it would be truly viable.

  • I like the focus on the faction, I think it really helps involve the user in a more compelling way, adding to the story. Additionally, it adds a sense of replay-ability for each exercise, to see the story from each faction's perspective.

Things I don't like:

  • I wish I had found a way to make the Space Marine outlines white, unfortunately they were taken from a quick google and while I could wipe out the white background with blending modes, I couldn't find out how to convert them to white.

  • While I like it being a more minimalistic approach, it feels a bit...too simple. I'm not sure what to do about it, but I feel like there's maybe more that could have been done here. Maybe the Space Marine being animated would alleviate that feeling?

62.png
61.png

Day 61

Redeem Coupon. I went with a QR code idea here. Time snuck up on me really quickly here with work demands, so I had to move extra quickly on this one. The thought was that this could be useful for both the customer and the store representative with the extra bit of information of where the promotional code came from. I don't know how useful that is now having a few moments to think about it, if they are scanning it and the app recognizes it as valid, it will just be added to the cart and won't really need any oversight. As you can tell, I didn't have much time to think this one through haha.

Things I like:

  • I think I effectively prototyped a picture, so that's fun haha. The wood grain is too big though and gives it away that it's not actually real.

  • I like the "blood stain" in the bottom right. It's actually a coffee texture stain with a color overlay positioned so you only see a bit of it. That, combined with the papyrus texture work together to make an effective background I feel.

Things I don't like:

  • The typography is off. The header font is just....blech. The second screen also wouldn't really happen since the check mark would animate onto the screen, then quickly disappear. Honestly, that micro-interaction would need some way to confirm it or just not exist at all.

Day 60

Color Picker. What started out as a reimagining of the Citadel Paint app quickly became a paint system agnostic planning app. You could choose from P3, Army Painter, Citadel, or an RGB value. Selecting one of the colors would reflect those changes on the model. This would obviously not be a perfect process involving color filters, but it could at least approximate the idea. Additionally, you could toggle a 3d view, removing the color swatches and allowing you to freely explore the model.

Things I like:

  • I remembered my lesson from the video player from another day. Having a complicated background requires a more busy line structure to ensure contrast when you don't know what it will be on top of.

  • The fact that I was able to cram as much on the screen as I did I feel is impressive, though I have some ideas to further consolidate the area for the mini by putting the colors in a drawer and not have direct lines to the model. That way, they could select a node on the model, then have the corresponding color highlighted. This would make things much more compact, allowing the color selection to have some more breathing room, but also obstruct the model a bit less.

Things I don't like:

  • The color selection area is really cramped.

  • The footer seems very....plain and rushed.

  • The gray background for the color is supposed to support the ability to more neutrally discern each color, though I think there may be a better way to still accommodate that while looking more purposeful.

60.png
59.png

Day 59

Background Pattern. This was a pretty fun one, incorporating the logo for Age of Sigmar that I recreated into a subtle background pattern. I'm showing here what it might look like with an interface on it that I threw together in the last moments of the challenge, as well as what it looks like on it's own. 

Things I like:

  • The logo reinforcement in the background is really nice I feel. I had a great time recreating it and I feel it went well and much more quickly than it has in the past for similar challenges.

  • I think there is enough visual interest without overwhelming the user. The gradient on the background reinforces the Stormcast Eternal palette, and the rotated and varying transparency of the logo provide a bit of visual rhythm to the piece.

Things I don't like:

  • I'm not sure if it's too busy for a background, that's why I tried to throw some quick interface on it but just didn't have the time to get it looking very great. I probably should have just brought in the interface from a previous challenge that I really liked.

Day 58

Shopping Cart. Another day that I wasn't super thrilled about, but these things need to be worked on, regardless! I used red heavily since that induces appetite and passion, encouraging people to move forward quickly. I also made everything hyper focused, each section having a direct and clear purpose.

Things I like:

  • It's a bit different from many carts, but I think there's something worth exploring here. I don't believe that the perfect cart formula has been found, so I liked exploring things to try and get it a bit more direct.

  • I've always liked the idea of including descriptions in the cart. Sales need to be emotional, and we need to keep them reminded of why they felt the need to add that item to their cart.

  • I like the wording on the 7 Future Masterpieces. It carries with it that sense of pride that comes from the hobbying aspect, and builds into the community. Brand, and words, are important.

Things I don't like:

  • I think it could have used another Checkout button down below the list of the items, that way they could make any edits on their long list of purchases and not have to scroll back up to the top in order to check out.

  • I wish I had had more time to throw in real content for the images, I think getting real images would have taken this to another level.

  • The trash icon feels kind of orphaned where it is. I'm not sure what the solution is to that, but there has to be a better way to handle deletion of items from the cart.

  • The price information feels crowded.

58.png
57.png

Day 57

Video Player. I feel like video players in and of themselves have had pretty solid conventions established for them, so I decided to try my hand at building a video editor. I feel like that still satisfies the requirements ;). This ended up being much more fun than I thought it would be, trying to think up the interactions for video editing, the environment it would be in, and what actions we allowed the user to take. Trying to jam such powerful software into a tiny form was a great challenge. I did start to run out of time pretty quickly unfortunately, and did not get to make lots of revisions that I was hoping to sneak in before the end.

Things I like:

  • A limited action set allows for tight interactions and a focused purpose.

  • The name is just great as well, combining the Machine Spirit from 40k with the Machinima term of fan videos, it works well to tell the user what they can do on the app with no further explanation.

  • I really like how the color pallet turned out, even though I don't feel like I made the best use of it, particularly on the video controls themselves.

  • The background color is suitably subtle while still reinforcing the feeling of the app. I really like how it came out.

Things I don't like:

  • The video controls. I think from an interaction perspective they're fine, but they don't work visually. I ran into a big problem of needing contrasting colors against content that could be both light and dark on any given frame. I think were I to redo it, I would make them all the same colors, instead of mishmashed like they are, and have a bright border on everything for if the background was dark, and a dark fill color for if the content was bright. That way, it should have contrast against any background at least a little.

  • I obviously just ran out of time and didn't get to explore the typography very much, or work out the filters section or anything.

Day 56

Breadcrumbs. I wanted to experiment with a "menu-less" app. Here, the breadcrumbs are actually dropdown menus that display all sibling elements. In order for something like this to work, the app itself would have to have an extremely limited scope and a laser focus. In this case, viewing the warscrolls could function well, so I repurposed an old design from a few days ago since the purpose of today was to play with breadcrumbs, not a page layout.

Things I like:

  • A heavy emphasis on images helps carry the brand and story, but also means there's no text to translate.

  • I feel that it is quite a smooth interaction that allows for 3 more layers deep of navigation before the UI starts to fail and need exceptions. 6 levels deep is definitely far more than would ever be needed here.

  • The images also allow for a higher perspective, allowing you to browse while still in-context of your previous page.

Things I don't like:

  • I feel like the breadcrumb bar could use some refinements. The yellow bars just don't feel great. Probably could do with a pitted metal type golden background or something, once again hitting the brand.

  • The bounding box around the selected breadcrumb isn't centered :(

56.png
55.png

Day 55

Icon Set. This was really not in my wheelhouse, especially using Sketch instead of something like Illustrator. Sketch's strong point is not icon design. I definitely struggled with that while trying to create some icons for my faction in Age of Sigmar, the Beastclaw Raiders.

Things I like:

  • I think the icons, for the most part, read well from a distance, these could go on a set of dice and still make sense.

  • The icons themselves are very thematic and would only need a few more to strongly evoke the feeling of the Beastclaws.

Things I don't like:

  • The bulb of the fang is too large, I had to call it quits and move on because when I tried to modify it it would mess up the entire shape composite. I also think it should be an outline to better fit the style of the others instead of being filled.

  • The skull icon just didn't work out. Too much detail for a small space and I didn't know what to do to simplify it. Maybe I could have tried just the teeth? That probably would ahve been the better call.

Day 54

Confirmation. You can see that I ran out of time pretty quickly here, I was called away with various work duties right in the middle of this challenge and had to just move forward with what time I had. The focus here was on the interaction instead of the visual design being super polished.

Things I like:

  • As a list builder, this seems like an efficient way to add things quickly.

  • I accounted for animations here, though I would have liked to have gone further with the loader spinner, bringing in a logo or something as the animation source.

  • The fading out of the unit showing that it was no longer selectable is a nice touch, I was trying to think if it would be a good idea to rearrange it to the bottom of the list on blur, but didn't get far enough.

Things I don't like:

  • Obviously I ran out of time, so the typography, colors, polish, etc. are all off.

  • The focus of the app seems strange to me, I didn't really nail down what it was supposed to accomplish.

54.png
Unit Viewer.png

Day 53

Header Navigation. The idea here is an app to view your units in Warhammer: Age of Sigmar. The header navigation serves a couple purposes here, to allow quick purchase of a unit directly from Games Workshop's online store (something that their current app lacks altogether), as well as chunking the information about the unit into 2 different sections, the Warscroll (for the people that are playing with the unit currently), and the Lore (for the people wanting to know the story, this also serves as a way to incentivize sales as units sold correlates with how well the the story is built out and how much people have bought into it).

Things I like:

  • I think this accomplishes the goal quite well, providing 2 different views depending on the current use. The play scenario is much more common than someone wanting to read the Lore, so it was placed as the default.

  • GW has done a lot of hard work on the color schemes for these armies, and I wanted the app to reinforce that. I took the color pallet directly from the miniature, creating that brand cohesion.

  • The unfurled scroll section was so much fun to work on! I feel like the affect works really well, effectively showcasing the miniature itself (the picture of the mini would of course be on a transparent background in a production environment). I was able to put in some decent lighting, fun textures, and even added some color into the papyrus style backdrop with a couple of radial gradients.

Things I don't like:

  • The warscroll itself could stand to be reformatted, this is the literal card just scanned and placed on the screen. Clearly some work needs to be done there to adapt it.

  • I couldn't get the lighting down quite perfectly for that mini showcase area, something that I'd need some good critiques on to work out I feel.

Day 52

Logo. I wanted to make a logo for an app that would publish narrative wargaming campaigns. Bits of story to go alongside a living world that gets played out through games like Warhammer, or Hordes. I spent a lot of time sketching and had to rush in to build this after a while. The best idea I had would be an animated warhammer slamming down, lifting up, then having one of the faces open into the book with the handle going down, the final version of the logo. Clearly, 30 minutes isn't long enough to bring something like that to life, so I settled on this.

Things I like:

  • I like incorporating the book and the lightning bolts. It carries home the idea of the narrative alongside the Age of Sigmar setting which I'm really big into right now.

  • I think the idea of the shapes works to create focus and be visually distinct from many other logos.

  • The idea still carries across on small versions of the logo as well as black and white.

Things I don't like:

  • Just didn't have the ability to execute on this one given the time limit. The lightning bolts didn't turn out right, they're too top heavy and too spindly on the bottom.

  • Too many conflicting gradients, I would have liked to fix that before the timer rang.

  • It's all a bit simple, I would have liked to put some textures into the fills to make it look a bit more visually interesting, but alas, there just wasn't the time for it.

Logo.png
51.png

Day 51

Press Page. And so we begin on the second leg of our journey! I tried some new stuff with the header this time around to follow some of the examples they had there. It still feels odd to me to not have the company name at the top, but I guess that gets resolved once you open up the menu.

Things I like:

  • I tried to use complimentary colors here to replicate lighting with the yellow red head and the lightly green background and while I like it, I think I missed the color a bit. I'd like to go back in and work on a color wheel to help my planning a bit.

  • The typography felt good while I was making it and the CTA is clear.

Things I don't like:

  • The typography got a bit out of wack in my Sketch file. I didn't remember to clear out all the default values on things like line height until after the timer had sounded.

  • Spacing is off for some reason, not really sure how things got so wrong between elements.