Zenpicks Thumbnail.png

30 Minute Daily UI Challenge Part 1

30 Minute Daily UI Challenge Part 1

 

Visual Design Boost

With Visual Design being the weakest point of my designer's toolkit, I am embarking on a journey to improve mytVisual 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!

 
 
50.png

Day 50

Job Posting. Half way through! I’ve been seeing good success with performance driven hiring techniques in my current job, so I wanted to do a job posting to follow that methodology. This eliminated the need for the “Qualifications” bit because whether or not they can accomplish what they need to are the qualifications. The years indicator underneath the title is simply there as a general guideline, with the large emphasis being placed on if our company and what we need from a candidate would be a good fit for who you are and what you can provide.

Things I like:

  • The banner is tight and the gradient is subtle. 
  • Laser focus leads to very understandable requirements and, hopefully, more discerning job applications.

Things I don't like:

  • I stole the branding from Games Workshop and honestly just got really hung up on the CTA. It was on all sorts of sub-pixels making aligning highlights and shadows to give it some dimension a nightmare. Way too much time was spent on that and should have been allocated elsewhere as the rest of the design suffered from it.

Day 49

Notifications. The idea behind ThriftPals was a way for people to share the great finds they encounter at thrift stores with their friends. This would require a robust notification system that was more than simple alerts.

Things I like:

  • The notifications themselves turned out pretty well I feel, the typography is spot on and all the white space lets you focus on the thing that is being shared. It’s got a solid visual hierarchy in my opinion.
  • The slanted shape on the bottom left of the notification gives a bit of an edgy vibe to it, preventing the retro color coming off as too oldsie.

Things I don't like:

  • I’m not sold on the yellow, it was supposed to be a bit retro to fit the assumed demographic of someone using this sort of an app, but I feel it just comes off as unappealing.
  • I wish I had the time to plan out what the screen would be if you tapped on a notification, and if you tapped on the action respectively.
  • The “10% off” should be all capped to match the actions in the other notifications. Whoops.
49.png
48.png

Day 48

Coming Soon. I really wanted this to be emotional, a mystery that people couldn’t wait to find out what it was. Something that could turn passersby into fans, not just readers.

Things I like:

  • I really had some fun playing with the colors and transparencies on this one. It started out trying to get the logo in the middle to stand out more, and I really like the direction it went with the warm orange light and the cool blue shadows.
  • The background pattern really helps emphasize the branding without distracting from it.
  • The large text at the top serves as a phantom CTA, not actually something that the user needs to act on, but still directly addressing them and bringing them in a bit.
  • The half block pattern is really fun, I was trying to make a gradient of some sort work when I just happened across this and kind of fell in love with it. It’s very different than my typical stuff and I think it creates some great visual interest here.

Things I don't like:

  • As much as I like the half and half pattern, I do feel that it bisects the text and makes it a bit hard to read at times.
  • I’m really wanting to go back in and tone up that logo, really pump it full of some more character with some asymmetry! A bit of paint dripping from the brush on the right, maybe a simple highlight on the left, varying the paint splotches on the bristles, etc. It might be tough to do all that I’d like without losing the simplicity though.
  • The ultra light text I feel has the right feeling, but is just a bit difficult to read. Not enough contrast to easily grab that out. Not sure how to maintain that hushed, secret feeling while making it more legible.
  • I think the blue needs to move to a more royal blue instead of the teal that it's got going on right now to better complement the orange.

Day 47

Activity Feed. The idea was to bring some sort of social aspect and moment making into Figure Fiends. Being able to track when things start and end will naturally create moments of celebration and recognition, while allowing friends to leave positive reactions creates a positive feedback loop, and this virtuous cycle drives engagement as well as positive behaviors.

Things I like:

  • I feel the concept is solid and would contribute to a better bottom line, something to always be happy about.
  • The pictures and reactions are big and juicy, just pumping up that visceral feedback in the brain.
  • The dark theme worked out I think, not entirely sure still.
  • The FAB placement is novel, but still is self evident what would happen should you click it.
  • The gradients add a nice bit of visual interest into things.

Things I don't like:

  • I feel like there needs to be another color here, or at least some value differentiations. I probably could have darkened the timeline bar and frames for the pictures, or lightened the button and reaction emojis. 
  • Not sure the spacing is right on the individual entries on the timeline either, it feels like there should be some tighter logic determining how far up the arrow needs to appear for the images that I just couldn’t figure out given the time.
47.png
46.png

Day 46

Invoice. I stuck with Figure Fiends once again here because not having a brand or purpose around which to wrap the UI was being super suffocating. After I did that, things started to flow much more quickly. 

Things I like:

  • I really wanted to inject a bit of personality into this, so found some opportunities in the micro-copy. Little things to remind you that this is more than an accounting sheet, it is a record of accomplishment. An opportunity to push the Figure Fiends brand. I could have taken this further, but ran out of time.
  • I moved all the white into a more yellow tinted off-white. The result is quite nice, lessening the contrast overall and unifying the feel of the orange.
  • The total price value was looking too heavy for a while as I had it in Avenir Next Ultra Bold to call attention to it, but it felt oppressive. I changed it to a lighter weight to still contrast from the regular type, and made it larger to be more visible and still call attention. Looking at it now, I think that same treatment really needed to be carried through to the Total and Qty fields on that row to be more visually consistent.

Things I don't like:

  • Still seems a bit simple. I really wanted to do an ink bleed texture on the bottom edge of the page, but couldn’t figure out how to do it in Sketch.

Day 45

Info Card. I decided to return to Figure Fiends for today’s work, providing a bit more information into what each tutorial could offer someone. I feel like the most important information for someone on these tutorials would be what it contains, what the final results should look like, and how good do I need to be in order to follow along. This wasn’t a commerce section, just an informational section and so no real CTA was placed here.

Things I like:

  • The head image worked really well I think. It was looking pretty sloppy until I put those little drop shadows on the cutouts and I think it really brought it all together. A little bit of dimensionality to provide some visual interest and tie it all together.
  • I really like the typography here, though I think I forgot to swap out the typeface for Skill Level, Techniques Taught in This Tutorial, and the technique list itself. Avenir Next just worked really well here with it’s wide variety of weights, bold angles and robust curves, it really screams bold and fun to me.

Things I don't like:

  • The bars on the graph took a lot of my time and attention today. I just couldn’t get it right. Adding those gradients was a last ditch effort to bring some sort of visual interest into it, but I don’t like how it turned out. Too noisy. 
  • The space around the Skill Level section is giving me a bit of visual irritation. I can tell something isn’t right there, but I can’t put my finger on it. More kerning on the headers? More space? A different layout?
45.png
44.png

Day 44

Favorites. I took this a bit more liberally than I maybe should have? Instead of adding favorites of products, I went the route of adding favorite painting recipes. This is a bizarre world where people zealously guard their recipes for achieving the perfect hue (or so they feel) of a blade in sunlight. Keeping these all written down can be a pain. Enter, Recipe Keeper. I was disappointed with how bare bones it was becoming, so tried some different things than I normally do to varying degrees of success.

Things I like:

  • I like the paint smudge, I feel like it reads well, though it’s hard to tell without actually getting up and asking people, something that is prohibitive given our time limit.
  • Painting instructors will commonly say that the best color for a palette is gray, so I tried to keep things very gray when colors were being displayed. Everything else I allowed to be high contrast, but wanted very low contrast grays to not tint the colors too much. They are already tinted enough being a digital hex code instead of a collection of pigments and acrylic mediums.

Things I don't like:

  • Everything still feels kinda simple. I feel like there could have been something like an edit mode for rearranging/renaming the categories, but I couldn’t figure it out in time.
  • The header logo and title are a bit cramped, it would have been good to shrink down the logo a bit or the typeface.

Day 43

Food/Drink Menu. Better Bob's Better Burgers seems like the kind of place that is bold, edgy, and willing to pick fights. So I went with a very literally edgy design. Everything was feeling really cramped here for a while, but adding a generous header space helped. The deep red brought back a lot of that suffocating feeling, so adding a gneerous amount of kerning to the headers helped open it back up again. I think there could have been some more kerning work done throughout the design. I wanted this to not only feel different and edgy, but also to function that way. I put the information there in a reverse order. This seemed to be the best way to help inform decisions, allowing you to filter out options before having to give them too much thought or even asking the server what the size is. That being said, the name is still carrying a lot of the visual weight alongside the pictures.

Things I like:

  • I think this worked fairly well in general, I think that the branding for a hypothetical edgy non-conventional burger place came through in the slants and mixed up order, but still displays a level of professionalism and elegance in the luxurious header spaces.

Things I don't like:

  • The background color on the menu items bugs me a bit. I couldn't find an option that would work well for that. I originally wanted the deep red there and the text to be white, but I couldn't get the icons to swap colors quickly enough before having to ditch the concept and go for something easier to meet the time limit.
  • Everything still feels ramped. The titles are too close to the images below them, and the images themselves aren't tall enough to handle the pictures very well. Especially for burgers, predominantly a vertical food, the image slots need to be a different shape and presentation.
43.png
42.png

Day 42

To-Do List. Meant to be an ultra focus app, this to do list would actually turn off your access to Wi-Fi until you go the things done. This is once you've gone into a predefined to-do list that the user would have already set up. You could temporarily turn Wi-Fi back on, exit the list, mark the current task as completed, or view the remaining tasks with the flyout menu on the bottom. There have been many studies shown that multitasking makes you less efficient, so let's force ourselves to only care about one thing at a time, and be wholly present for it, allowing ourselves to become more productive.

Things I like:

  • I played a lot with the colors in the background. I don't mean that as I fiddled with them for a long time, but I really got into a sense of play. That was a really special experience and I like how it turned out. The colors guide you right to the center where the current task is in a very subtle nudging.
  • I think that the information architecture here works fairly well as well. I really didn't want anything to distract from the task at hand, which left things like the title and progress overall in an odd spot, though I feel that where they are now at least serves the purpose of focusing the user on the task.
  • I went through a lot of revisions on the button. I wanted something that felt as light, airy, and open as the rest of the app, so a traditional button wouldn't really work as it felt too suffocating and distracting. I like the compromise of the right arrow acting as a signifier while being visually small enough that it still feels light.

Things I don't like:

  • I'm just not entirely sold on it all. While I like the information architecture, it still feels a bit...airy. Almost like there's no reason for things to be where they are, even though there is.
  • I think I could have repositioned the background gradients to have given more negative space around the task, and used that to guide the eye more than the color. I think that they create a bit of visual tension that could have been avoided by kind of flipping the ratios there a bit.
  • The color on the flyout menu draws too much attention. I tried a more subtle color with a drop shadow, but that introduced this sensation of elevation that didn't exist elsewhere on the screen that was even more distracting. Maybe I could have gone with outlines instead of solid fills? It would have made it more consistent with the right arrow on the Complete button.

Day 41

Fitness Tracker. The idea here was a low-fi 8-bit type fitness tracker themed around fantasy adventure. You would create a character that's based around the specific physical attributes you set as goals to improve over time. If you want to go up in strength, you get a warrior. Want to increase your speed? Congratulations, you're a ranger. This would have machine learning that could slowly ramp up intensity of workouts and assign statistical bonuses to them. Even better it could integrate into a Pokemon-Go like experience, building up an actual AR dungeoning party. The artwork here would obviously be done by a trained artist and not some crude masking over a random internet asset.

Things I like:

  • I feel like I got the 8-bit feel across with the simple, bright colors, and the undertextured floor above the instructions.
  • The simplicity feels really good. This doesn't have all the bells and whistles of other apps, but it's simple. A set of graduating instructions with a swipe gesture to move on to the next one. The grippy ridges on the right give the signifier that it is movable, it should be easily discoverable.

Things I don't like:

  • Using temporary art and not being able to make the thing I had envisioned. I would love to take some time in the future to improve my illustration skills.
  • Overall it feels maybe a little bit too simple, I just can't put my finger on it.
41.png
40.png

Day 40

Recipe. I wanted a very highly themed recipe app based around Warhammer. For fun. Each recipe would be themed after a faction with a corresponding them change in the app. As you can tell, I didn't have enough time to refine everything, but I at least got the elements in that I thought were important, especially that header with the quick synopsis of the recipe to help people know if it was something that would be worth it for them.

Things I like:

  • I really like the header, I feel that is all information that I've always wanted from recipes much more frequently when I'm trying to pick stuff out to make for the week.
  • I like the information architecture between the ingredient list and the directions as well, the ingredient list always seems to take up a ton of space on recipes when really it doesn't need to be. It's a quick reference when you're starting your meal but after the first few minutes it's just not needed anymore.
  • I like the sharp cutout of the header image, I think that lends itself well to the idea of a more edgy and dynamic cooking app that caters to a different market.

Things I don't like:

  • Really I just didn't have the time that I needed to make it all look great. The basic objects are there, but they're not quite arranged right, colors and typography are certainly far off. I didn't even get to bold the ingredient names like I was planning to serve as a sense of Wayfinding for when the cooks would be quickly referencing their phone in the middle of a recipe.

Day 39

Testimonials. I took this in the direction of celebrity reviews for a product. These would serve as the last bit of persuasive power to tip someone over the edge into a purchase.

Things I like:

  • I think the Material style headers worked really well here. It lets us showcase both the person as well as their technical skillset, giving not only a face (which is harder to say no to than just a name), but also establishing them as an expert in their field for the authority effect.
  • I think the colors worked really well here, the white, dark reddish orange, and the bright orange. The white cutout on the portrait helps it feel a bit more dynamic, while the dark red-orange gives some consistency between the very different images while giving the eye a nice spot to rest on, leading directly to the brightly colored name of the expert. This color also ties into positive emotions such as their box quote style recommendations in their testimonial and the ever-important "Add to Cart" button.
  • The layout here feels really great, almost like a magazine. The white cutout on the portraits I think is contributing a lot to that, as well as the name titles.
  • I went with the Light weight for Roboto for the body text and I think that was the right call. It allows for a much neater visual hierarchy without sacrificing raw readability too much.

Things I don't like:

  • I'm not entirely sure on the dark red-orange color. I like the purpose it serves and how it's used, but I just feel like a better color could have been chosen here.
  • Not entirely sure on the Copperplate font either. I think it works really well for the expert's names, but I'm not sold on it in the header. Maybe it's just a bit too noisy for that?
39.png
38.png

Day 38

Calendar. The idea behind this project was something to help plan all the stages that go into a figure painting. As the user adjusted the timetable, time would be allocated to various steps to help maximize your impact.

Things I like:

  • The concept is a lot of fun and very useful for me. There is a lot of potential value here I feel.
  • I like the gradating colors for the different stages to provide more recognition over recall.
  • The steps being explained down below wouldn't be needed for more advanced users, but would serve as a good reference for newer folks.

Things I don't like:

  • Didn't really have enough time to get everything I wanted. Things aren't as refined, namely the colors and the steps section. The typography largely went ignored as well.

Day 37

Weather. I had a lot of ideas that I wanted to cram in here, but after digging in, I felt that all these other ideas would just get in the way of what I really want out of a weather widget. What it's going to be like today (not scientific, just the mood), and how does that compare to how it felt yesterday. I ditched ideas for maximum speed to drive on the commute, and other "nice to haves" like that that weren't actually necessary to solving the problem I have with weather apps.

Things I like:

  • The rain illustration was fun to make, I tried a new way to make the rain streaks and cloud that made it all come together muuuuuuuuuch more quickly than previous attempts at similar art have accomplished.
  • The direct nature of it. It shows me what I need in order to make a more informed decision about my day and nothing else. Do I need to wear a long sleeve or short sleeved shirt? Should I wear bright colors or muted? Do I need an umbrella? I don't really care about air pressure, or even wind direction/speed. I want a quarter inch hole, not a quarter inch drill.

Things I don't like:

  • Not thrilled about the At your current location dropdown. Feels like it could be an icon in the upper right that could switch between various options.
  • The bottom text feels cramped, I'd like to re-explore that and make it a bit more compact.
37.png
36.png

Day 36

Special Offer. This was a lot of fun, something that really reinvigorated my energy for working on this. The layout all came together pretty quickly, most of the time was spent on the custom slash over the old price as well as the "mutations" on the title text.

Things I like:

  • I love all the custom work on the shapes. The slash look suitably gross, and the extra eye and wing on the letters I think were a great idea. 
  • The colors work well for it as well I feel, faithfully referencing the source material.
  • I like the personality in the headline as well, much better than a simple, Buy one, get one half off!

Things I don't like:

  • The positioning of the bust I think is too big. It all just feels pretty busy, which means that maybe the text is too busy since the focus should arguably be the content itself.
  • While I love the idea on the mutations, I think that they were definitely rushed to do it from idea to finished product in only 30 minutes all by myself and nobody else to critique it.

Day 35

Blog Post. I feel like one of the great virtues of fiction is that it lets us distance ourselves from our own lives and circumstances, and allow our brain to process them by analyzing extreme situations that are happening to other people. This attitude of play allows our brains to process everything that it is dealing with. Needing that form of distance right now in my life, I decided a blog platform allowing people to post their own short stories would be a fun way to practice the Blog Post prompt.

Things I like:

  • Courier New I feel works really well here. I like the tie in between the main points of story and bringing it back to the author. The idea was to tie the story back to the author in a subtle way, trying to being the emotions from the story back to the author in an attempt to give higher credit to them. A more abnormal font choice suits this well as well.

Things I don't like:

  • Not a fan of the colors or whitespace here. I feel like it could be more spacious and "designed." It just feels a little bland and uninteresting.
35.png
34.png

Day 34

Car Dashboard. I'll be honest here, I'm not a car person. For me, it's a means to an end and I sincerely hope to never have to own another car in my life after my current Matrix dies off. So I took an extremely practical and minimalistic approach to it. I really considered what are the most frequent things that I look for on my dashboard, and built out radially from there.

Things I like:

  • No more dials! I really don't get why they are there apart from tradition. Maybe there's a real technical reason and I just made a big no-no.
  • I feel like the most important information is available in the best spot, the speedometer, the turn signals, and system warnings.
  • The red light on the right giving a warning over there was also really nice. I like having a signifier letting me know that I really do need to pay attention to this area that I may not even remember anymore since everything is so central.

Things I don't like:

  • Ran out of time on this one again. My biggest issue was a lack of domain knowledge and domain assets. 
  • It is all a little off center which is really bugging me.
  • Lack of understanding of hte problem. Because of that, I really don't know how well I have solved the issue or not.

Day 33

Customization. I had a lot of fun with this one. The idea is that as you're buying a model, you could pre-select what options you want with it. You could tap on one of the circles, and get a selection view down below in addition to being able to rotate the model in a 360 degree fashion while the circles followed it.

Things I like:

  • I like the background gradient a lot actually. It feels very regal, providing a good spot for the miniature to shine.
  • The selection gradient is really interesting. It isn't at all what I was going for when I started, but I think it's an interesting way to show that.
  • At first, the model and selection gradient were having a hard time standing out from the background, but a happy accident led to me putting a drop shadow on that really worked, so I ran with it after some tweaking and I think it made it all much more visually distinct.

Things I don't like:

  • I'm not buying the colors here. I was really struggling with that and just ran out of time.
  • The gray behind the weapon selection was due to the axe actually being painted, so I had to grayscale it quickly in Sketch and this was the fastest way I could do that. Unfortunately, it left that big ugly gray box.
  • The 360 button seems odd, that definitely could use some reworking
  • The Finish Customization button as well needs some love. Honestly, the overall flow of the whole page could do with some more concerted UX effort instead of just UI.
33.png
32.png

Day 32

Crowdfunding Campaign. This was a really rough one for me. I just wasn't super sure exactly what was expected here. The hints made it sound like the actual campaign, not the crowdfunding app? So ya, lots of the time was spent just writing content on this sucker. I didn't have nearly enough time to be able to do what I wanted, but they said to make sure that you were keeping things interesting enough to raise money. I know that videos of the product are a hue deal for selling these kinds of games, as well as product photography. I don't have either of those, and so substituted out placeholder images and blank video tiles. However, to keep the emotion and connection strong, I kept the story about people. By opening yourself to others before asking them to open up, you affect a change in their psyche, allowing a greater spirit of trust and candidness. The beginning section was to help accomplish that.

Things I like:

  • I like the story, I think the psychology behind it is sound and would lead to increased pledge amounts.
  • I actually really like the usage of Arial here. It's classy, but allows a story to be imprinted on it based off of context.

Things I don't like:

  • Not enough real content. I was churning stuff out as quick as I could, but writing takes a while, as well as the initial confusion over what the challenge wanted me to accomplish ended up delaying things quite heavily.

Day 31

Upload. Phhheeewwwwwwwww boy, can you tell that this one. got away from me? Ya....me too....There were a lot of issues with this challenge. I just couldn't decide on anything that I could actually make happen within the 30 minutes. I had tons of great ideas, but I knew that they all required a lot of illustration work that I knew I would not be able to pull off within the time frame. So the idea just kind of wandered from thing to thing and it just...yeesh....

Things I like:

  • The buttons are all kind of fun.
  • The gradient was neat, it was fun recreating lighting coming through a window, fluorescent lighting, and the appropriate shadow colors through it. Don't think I pulled it off completely, but it was a fun attempt.

Things I don't like:

  • The "frame" doesn't read as a frame at all. The lighting on it is all off, I just couldn't decide what to do with it.
  • The dial-up loading style...I just....ya. I had some other plans for it, a character live-painting the image on, but it just fell apart half way through.
31.png
30.png

Day 30

Pricing. I got it in my head to try a super high end app for a restaurant. The high end space is quite intriguing, with space to hearken back to old architecture and art styles. Another key part of high end life is the personalized guide. The idea that someone is there to personally guide you through your efforts.

Things I like:

  • The basic premise was a lot of fun to work with. There were lots of considerations here, from the shapes of the fonts, how to display the dollar amounts, etc.
  • The idea behind the filigree was solid I feel. Something to bring a little bit of extra class to an otherwise boring space. I especially like it on the button, if it were to not be overused it could serve as a powerful signifier and brand reinforcer.
  • The server recommendation I think is great. Bringing home the idea of an individual person  guiding you through your meal is neat and very posh. The key is to keep the rest of the meal/party in mind when creating these recommendations. Context would be key here. 

Things I don't like:

  • My technical skill at making the filigree is clearly not where it needs to b, especially with the. very short amount of time.
  • While I like the colors, I think they could be tweaked a bit to make it even more lush and elegant.

Day 29

Map. I wanted to try something a bit different, as usual. This would be a map for a level selection of a sci-fi puzzle type game. This was a lot of playing with shapes and colors, and taking inspiration from other apps.

Things I like:

  • I did have a lot of fun playing with shapes. The rhombus level selections were a fun addition, and the diamond "boss fight" area seems like a nice way to differentiate between the two.
  • The background was fun to try and draw up as well, lots of shape manipulation and I feel like it's the best pattern background I've done in the series so far. 

Things I don't like:

  • Not sold on the purples. It is just too similar in value to the background and clashes pretty harshly.
  • The boss fight icon got me started on trying to do some shading on things, but just ran out of time.
  • Using Courier as a font face was a fun and interesting choice. While I feel it is quirky and sci-punk like I wanted, it still feels out of place. 
29.png

Day 28

Contact. A fairly standard contact page, but I really wanted to try and experiment with the new Material options here. The bottom bar is interesting, as is it still feels very prominent, and that that style of navigation really should be a discreet selection of tabs. Especially in the bright bold colors that the typical app bars are, it just feels a little intrusive.

Things I like:

  • I tried a hyper-sensitive FAB approach here. Should there not be a specific, obvious action to take, the FAB would simply disappear, leaving a really neat cutout. This even provides the opportunity to have a nice little animation, popping it up to draw attention to it. 
  • The colors are great, bright, bold, but also legible 

Things I don't like:

  • It feels a little empty to me. I'm still trying to figure out the right balance between empty and busy on an average project I think.
28.png

Day 27

Dropdown. They mentioned an option could be a dropdown for a tutorial, so I went that route. Honestly, my heart wasn't really in this one and I think it shows. The prompt was just really uninspiring and without the context of a product to work within, the result feels really flat to me. The idea was some sort of children's app, hence the character and the bright gradient trying to break things up.

Things I like:

  • Making the little antennae was fun. 

Things I don't like:

  • I don't love the green on the gradient, the type feels off to me, and the character just seems too simplistic and amateurish. I don't really know what to say or do about this one :\ I guess we just chalk it up as a learning experience and move along.

Day 26

Subscribe. I was having a really hard time coming up with an interesting and unique way to tackle this one today, so I decided to just let myself have fun with something other than the theme for once. I dug into Material 2 and really explored shape and color. The idea here is a widget for an app or website that would be in-line with the content.

Things I like:

  • The call to action has some fun text here. I went back and forth a lot on what kind of personality to inject here that could fit the colors and style, rapidly bouncing between too aggressive and too sterile. I think this was a nice balance.
  • The shapes worked really well I think. Lots of repeated thickness with the Material 2 2px thick borders. I really like the more desaturated colors with the shapes as well, they need to be fun and entertaining, but not overwhelming. For awhile, they were way too distracting, but reducing their opacity helped bring them in line.

Things I don't like:

  • I'm not sold on the gold on the text input anymore. The thought there was to have a color distinct from the shapes so that it could communicate something else, but I think I should have simplified a bit here.
  • I wanted to keep it very minimalistic, but at the end I realize that I should have some sort of "Subscribe" label so that people have a greater chance of knowing what on earth they are doing.
26.png
25.png

Day 25

TV App. Returning to Figure Fiends, I present the new TV App! Cycle through all of our tutorials easily from your TV. Cuz I guess that's what people do now.

Things I like:

  • I like the heavy gradient color overlays. The typography works really well on a large TV setting as well.
  • I like the idea of the chapter preview bar on the bottom, allowing you to jump between areas. I added the different color gradients because when it was all orange it was just waaaayyyyyy too samey.

Things I don't like:

  • It's all a bit simple. The bottom bar could have maybe used some embellishments to help it really work.
  • The colors on the thumbnail bar are totally arbitrary. Were this a bit more developed, it would have been fun to have color coded the different types of videos (new skill, refinement, you practice, etc.). That extra color would give some easy frame of reference while skimming chapters, but also break up the heavy orange and bring some more variety into the interface.

Day 24

Boarding Pass. Ah yes, the classic design rage. I guess I could have expected this to have come down the line at some point. I'm not a hue traveler, so I wasn't really sure how to tackle this going in. I started by looking at boarding passes that were currently being used and remembered lots of constraints I have heard about in the past. I knew having white text anywhere is a no-no since these are being printed at such high volumes, the amount of ink to great the surrounding block of color would be immensely costly. Monospace formats are quick to read and print, and colors are scary since the printers that were in use a while back were only black and white and to retrofit all of their printers would cost millions of dollars. I played it safe, only using colors that had been printed in the logo to make sure I wasn't going out of bounds here. The red box to the right would be the container for the barcode.

Things I like:

  • I really like the architecture of the pass here. Not only is the actionable information very easy to see and read, the columns are chunked into time-sensitive information. The left has the more generic stuff, while on the right is the deadline for each next step, or directions to complete the next step.
  • The colors work well, I really like the way they reinforce the brand without having to explicitly state it. This would also work well as a universal pass, you could just swap out the logo and colors and it would be strongly branded for that airline. The confusion could come in if multiple brands had the same colors though. 
  • The font works well for its job, but the kerning was a huge pain! Capital letters would be right next to each other, while numbers would be just fine. This meant I had to go in and tweak all the letter spacing on almost every word. I think the results ended up pretty well though.

Things I don't like:

  • The Class and Seat fields on the left side of the pass definitely need to be swapped. I didn't catch that before the export.
  • I should have put it all in a container to show what the paper shape should be since it should deifnitely have some rounded corners due to it being held in hand and in travel for it's whole life span.
24.png
23.png

Day 23

Onboarding. I returned to the Figure Fiends app idea but with a new twist. Figure Fiends could offer it's own tutorial service, guiding a user step-by-step through various techniques, leveling up people's skill and providing built-in celebratory milestones. I spent far, far too long trying to get a color palette that was approved for contrast accessibility guidelines.

Things I like:

  • The colored text was a fun experiment, I think there was just way too much of it to really emphasize much.
  • I love the triangle shape in the background. That actually came in the last few minutes of the 30 minutes as I hurriedly tried to look for ways to make the very plain design something a bit more interesting.
  • I'm in a battle with app bars right now. I'm not sure why, but I always hate them. I decided maybe it was because I was not putting enough stuff in them, so they looked overly bare, and I think that really helped here.

Things I don't like:

  • I feel like the gradient on the app bar is a bit too distracting on it honestly and it could have been better without it. The issue I ran into was that with the gradient on the triangle, the bar looked inconsistent. The real answer is probably finding another way to add visual interest outside of the gradient for the triangle.
  • The text area just falls a little flat. Maybe there's too much of it? Maybe the button just isn't quite cutting it? Not sure on this one.

Day 22

Search. The obvious way out of this one was a simple search bar, but since this is about pushing myself to do greater UI work and not necessarily fulfilling a business objective, I pushed myself a bit out of the box here. I looked at the search process of formulating an idea that you want to find, going to a specialist, explaining the need, and then comparing those options against your need. I decided to jump in as the specialist, assisting that process and one giant issue with web content is discoverability. This is an early concept for what an app might be that would help people discover Twitch streamers that suit their needs. The "TedFurious" boxes would be cover images that the streamer uploaded.

Things I like:

  • I'm really digging the repeated angles, the font, and the colors. They work together to tie in to Twitch, but necessarily be derivative of it. Maybe they're a bit too on the nose? I'm not sure.
  • I like the active tab, it's huge size and pushing the other tab into the background I think provides great emphasis in a different way.

Things I don't like:

  • While I like the tab, it feels inconsistent. When it's active, why does it fade out the opposing category, and none of the others? If it did the others as well, why doesn't it just open in a new page?
  • The purple and blue is all a bit overwhelming. Given more time, I would have loved to get a good accent color going here for some warm contrast.
22.png
21.png

Day 21

Home Dashboard. They specified in the email to focus on things that you would like to see reporting on your home, so Nidu was born! Nidu is a play on the Spanish word for nest, nido. As you might be able to tell, I really ran out of time on this one. I had a lot of fun with it, but would definitely change positioning of things, typography, get things more completed, etc.

Things I like:

  • The branding feels great to me with the bright blue contrasting against the duller orange and the delightfully round type face and big blocky letters, it just feels like a welcoming, cozy, calm place.
  • I got a lot of fields that I'm really happy with, the who's home right now and travel log especially seem really useful for me. The mailbox alert as well.

Things I don't like:

  • Obviously, having run out of time, there are a million refinements I would make to this.
  • One thing I didn't consider until I was done was that I feel the order of the panels is a bit off. I feel like the Camera Feed should be on the top row along with the Travel Log, then all the other stuff down below. This is because that then top row would naturally all fit together in a nice information architecture and the other panels aren't as immediately necessary. 

Day 20

Location Tracker. Cuz pirates need GPS too. I spent way more time than I'd like trying out various ideas only to have to scrap them in the end. The map here is pretty sparse, largely due to needing to experiment heavily with color and shapes. I really wanted to add way more to this, but everything I was trying in just wasn't turning out, or was being far too complicated given the time limit, and so turned out a little sparse.

Things I like:

  • I feel like there's a lot of character here which I really like. Irregular shapes and lines help convey the feeling of a light-hearted pirate romp.
  • The colors help to do the same thing with their bright, pastel hues.
  • The dotted trail turned out so much better than I thought it would. That was a big win for how hastily it had to be done.

Things I don't like:

  • The colors on the boulders on the right island and the boat don't really gel with the others. I'd like to take another crack at those.
  • I couldn't quite get the folds of the. fabric appearing right for the rest of the shapes. It is a little bit better on the trail but eehhhh....

Day 19

Leaderboard. I feel like I had a much better handle on this one. I did some quick research on game leaderboards, then came up with what I actually wanted to be on here. The time I saved there helped move execution along much more quickly. The leaderboard entries here have a couple of elements that need explaining. The gold border would be encircling a character portrait. The background of the entry is determined by the map that the high score was attained on.

Things I like:

  • I really like the character medallion borders. It was fun figuring out how to do metallic reflections in Sketch. 
  • I think the level backgrounds add a nice bit of visual interest.
  • I feel like the type face really fit the vaguely scientific/fantasy vibe really well.
  • I also really like the dynamic angles used everywhere in the design. It gives a very sharp feel and the repeated shapes help unify the design despite the blending of sci-fi and fantasy genres.

Things I don't like:

  • The place indicator feels a little out of the way and disassociated with the actual entry.
  • I think the player name needs to be nudged up a few pixels

Day 18

Analytics Chart. Can you tell this one got away from me? I just couldn't seem to make it all quickly enough. I had way more plans for this, but just didn't get around to them. One of the big time sinks was figuring out what the graph itself was going to look like, curves vs. angles, what do the axis look like, how do I add visual interest, etc. I tend to like the ideas I have during these challenges, but I am rarely able to execute on them as well as I want to. I could definitely go a safe route and make something that looks like it could be in any app, but I really want to create something with personality and that aligns with my hobbies, not just another pretty screen. It's trying to identify what that intersection is that I tend to spend the most time.

Things I like:

  • The line work in the back was a fun exercise, though it took way too long.
  • It was fun making the trophy icon, it's not where I want it polish-wise, but it was still fun to try to quickly throw that together.

Things I don't like:

  • It feels extremely out of context
  • The colors aren't working for me
  • The trophy in the upper right lacks so much pizazz I can feel my heart ache
  • I'm missing a ton of iconography I wanted to add as a kind of timeline for why the graph increased/decreased, but I didn't have the time to do it.

Day 17

Email Receipt. I honestly had a really hard time with this one. I haven't had to work too much in email in the past, but I know enough to know that it is wildly restrictive. There was a lot of copy to write and I didn't feel like I had either enough time or enough of a focus to be able to really pull this one off.

Things I like:

  • The idea was fun and silly and I liked the brighter green color for the CTAs. I really liked the idea of showing a more in-depth profile for the adopted 'roos. Silliness aside, I felt it was a great way to keep the customer excited and enticed by our brand after the purchasing decision had been made.

Things I don't like:

  • The overall visual design just feels a little clunky to me. Text is all over the place despite being the same font. It doesn't feel cohesive, just like a lot of stuff thrown onto a page. We'll chalk this one up to learning and another experience for learning how to get out of a funk.

Day 16

Pop-Up. Today I really just wanted to play with color and shapes. There isn't really any true purpose behind this, just play. Something interesting was that the green and pink seemed way more vibrant in Sketch, so much that I had to tone them down but it now looks like they aren't bright enough. That's something I'd like to investigate for the future.

Things I like:

  • I think I succeeded with playing with the colors. I like the palette,  I think it is fun, vibrant, and inviting while still being dependable. There's a lot of blue here, helping to introduce some professionalism while the red in the pink helps keep things a bit lively.
  • I think the type worked well here as well, the hierarchy works and the explanatory text is so out of the way you won't really notice it unless you need it.
  • I like the shapes. They're not perfect, but it's a fun little pattern. The thing that really ties it together for me is the circle in the back.

Things I don't like:

  • The shape placement. The lines feel fun, but they seem a little too oddly spaced, or maybe not oddly spaced enough? Also, scrunched down and exported, the green doesn't seem to work very well on top of the pink. Not enough contrast there to ease the eyes into it.
  • I forgot the context of the challenge and forgot to put a way to cancel out of it :\
16.png
Sneakin' About.png

Day 15

On/Off Switch. Hahahaha, oh gosh, this went so poorly! I completely ran out of time with just not a lot to show for it, but it was so much fun! This is less than half of what I was hoping to achieve. The original idea was to have this thief type character you could toggle between going around doing thiefy stuff, or "acting casual." It ended up being really ambitious for my current speed and skill level, but it was still a blast coming up with the expressions and planning out how things would shift onto the next screen that I didn't get to work on.

Things I like:

  • I love how expressive the face is! The color of the teeth and the linework on that I feel really help sell this sleazy underbelly of society. I also enjoy the colors on the face, I think they could be much more finely tuned, but they give the impression of being in shade but also something else that's not quite natural there.
  • The moon! I really, really, really wanted to pick up the linework and the moon and the teeth were the best I could get away with with the time that I had available. 

Things I don't like:

  • I RAN OUT OF TIME oh gosh ahahahahaha. It was too ambitious of a project, I should have just done the face and the background. Even then I may have ran out of time. DO YOU BELIEVE ME NOW WHEN I SAY I CUT THE TIME AT 30 MINUTES? DO YOU SEE???
  • Right. OK. The gradients on the knife and money bag are also way too much and not really congruous with the simplistic linework style established by the moon and teeth. I would do that in a totally different style were I to go back and do this right.

Day 14

Countdown Timer. Honestly, I just wanted to play around with shapes and color here. The thought was that it would be a minimalist, abstract timer, but it was really just an excuse to play a bit.

Things I like:

  • I like the color palette itself. It feels kind of bright and alert, but at the same time not necessarily tying too much into each other or anything really. It just kind of fits the feel of the purpose of the app.
  • The name! I don't know why, but I really love that. I think that Merriweather was a good font choice for this as well, with the big black font face. The serifs worked beautifully for the title, giving a sort of Norwegian sophistication to it.
  • The focus of the app! Very limited in what it does, it's just there to be a slight visual interest while the timer goes down. No need for tons of options, two works fine for this.

Things I don't like:

  • The green on the seconds is just not high contrast enough for the text behind it. I made the text semi-transparent and even added a tiny dropshadow but it didn't seem to help much.
  • The shapes were fun, but I don't think it works as well as I would have hoped. The idea is that the shapes start off transparent and cold in tint, and for each increment in time, the foremost card drops off, allowing the one in the back to move forward, become more solid, and shift to a warmer tint. Fun, but I don't think it really worked.
  • I should have gone with a less fiddly typeface on the shapes and icon labels. A sans-serif would have probably been best, maybe even Roboto or something.
Kulo - Abstract Countdown Timer
Messaging.png

Day 13

Messaging. I've been wanting to experiment with some sci-fi feeling stuff with Material 2's new design being announced. I though it would be fun to have an unlikely family sci-fi family texting each other, and so this was born. 

Things I like:

  • I really like the cut corners and sharp angles there. It feels very futuristic.
  • The bottom message bar is interesting. I actually stole the shape from Luke's X-Wing targeting computer which is fun, though I'm not convinced it works here.
  • The background logo was fun as well, this could be the company branding. Also inspired by the old control panels on display during the movies, the faded out logo is a subtle callback to Star War's unique feel.

Things I don't like:

  • It all just feels a little simple. I finished with 3 minutes to spare and feel like there could have been a bit more to do to really refine it all, though I am not entirely sure what.

Day 12

E-Commerce Shop. Another pretty fun challenge! The more I'm able to put my personality into these, the faster and faster the time goes. Additionally, I feel like I'm moving much faster than I used to which is very rewarding.  

Things I like:

  • I feel like the colors were a real success here. I don't know if they would work for other items in this hypothetical store, but they tie in really well with this backdrop. I've been trying to pay special mind to the balance of color, texture, and size, and I feel like the colors worked will for how busy things are with the image here.

Things I don't like:

  • There are a lot of little things I'm not super happy with, the hamburger menu should be a back arrow if we're inside an individual product view, the slide bubbles should have a dropshadow to indicate elevation, the title of the piece has the same visual weight as the Reviews section which I don't like. 
  • The bottom section is really busy. I tried to have a side-by-side for the product info and the reviews, really give the reviews the space they need to make a big impact. Maybe a different background color could have helped it to differentiate it from the product info.
Minis Express.png

Day 11

Flash Message. This was pretty fun! Once again going for a painting tutorial app, I had a lot of fun playing with colors and what the success/failure message might be. 

Things I like:

  • I really like how the colors turned out here! I am trying to push myself to be using bolder colors, and I think it worked out really well here. I would have probably chickened out here earlier in this challenge and gone with something much more muted.
  • The icons were a ton of fun to make, especially the failure message! Fraying the brushes and making the dazed stars just put a big smile on my face, bringing some small character to lifeless objects was great haha.

Things I don't like:

  • I'm not super satisfied with the explanatory text, it feels too busy.

Day 10

Share Icon. I honestly wasn't looking forward to this one very much. I just think it seems really uninteresting, it's already been reasonably well defined, and has good accepted conventions. With that being understood and doing it anyways, I went for something a little different. Share icons have removed people from them and I'd like to focus the thoughts around the idea of people connecting with each other again. Most of my time here was spent toying around with color and trying to figure out how to preview artboard at size in Sketch.

Things I like:

  • I like the premise of bringing the people back into the icon.

Things I don't like:

  • I messed with the colors for a long time. I started with a subtle gradient before I realized at the size that the icon would need to be, that would be unintelligible and increase the sense of noise on such a small icon. I tried to have a successful red/green color comp with the purple in here, but I don't think the green works. It's too bright and similar in value to the white background.
  • The iconography doesn't really work at such a small size in the browser. I think a future version might be the purple as a full circle and inside it could be just two people with an arrow between them or something. Even that seems really busy just from saying it, I'd have to explore it a bit more.
9.png

Day 9

Music Player! The idea here was a different spin on the audio visualizer, jumping out from the center album art. Most of the time came in here from making the icons and finding a way to add some color to the otherwise very bland design.

Things I like:

  • The icons were fun to play around with, I feel like the two on the bottom need to be thicker though.
  • I like the focus on the content and big controls. Fitts' Law really jives with the large controls.

Things I don't like:

  • The app idea was not well defined. It started out as a random song presenter that would machine learn your preferences, but then I added the shuffle button and it all just kind of...went away
  • The design feels very bland to me. I need to figure out how to add color in a way that isn't overwhelming. 

Day 8

404. I wanted to play a bit after having just seen Infinity Wars and Vision having lost is Soul Stone seems like a pretty big whoopsie doosy here, perfect for a 404 page.

Things I like:

  • I like the theme, it puts a really silly and lighthearted point on something extremely serious, hopefully that results in a laugh or two instead of anger ;)
  • I used Comic Sans, he's a comic book character, and I can't help but smirk. I never thought I'd get to use that font in my life.

Things I don't like:

  • Vision's color palette is really hard to integrate into a fun UI! Red and Green may be complimentary, but I personally have never enjoyed the combo. It was all either too harsh or too washed out.
  • I got interrupted a couple times and so didn't have the time or focused attention to polish this up very much. Most especially of note is a missing, "Return to home" button.
  • I would have liked to have polished up the Vision smiley a whole lot more, adding some shading, refining colors, etc. but time simply ran out and I had to move on to other areas of the screen.
8.png
Settings.png

Day 7

Settings. My goal here was to provide a more feedback rich environment to show people what their settings were actually affecting in the game.

Things I like:

  • I think I succeeded in showing a bit more feedback to the user. The little vignettes would ideally be animated as well.
  • The purple was a fun, bold color that I don't typically use. I was definitely inspired by the game I stole the image from, Fortnite.

Things I don't like:

  • Not sold on the gold gradient, I think there should have been a better accent color there.
  • The gesture arrow in the bottom right needs a better lining around it to provide some better contrast.
  • Overall I just feel it's missing something visually.

Day 6

Since today's prompt was a User Profile and it is the day that Infinity Wars is officially released in theaters, I figured it would be a good opportunity to combine the two. Enter, Lonely Hearts, the dating app with a brand new profile for Thor. Apparently, he's been feeling the burden of losing his planet, his hammer, his father, AND his girlfriend, all in one movie. 

Things I like:

  • It was a fun idea and I had a lot of fun playing around with what Thor might put on his profile.
  • Apparently I'm on a bit of a Tindr kick, but I really want to add more context so that the service isn't quite so shallow. Letting the user add pictures of 4 likes/dislikes provides structure, and allows for some personality to kick through.

Things I don't like:

  • I think the imagery could have a larger role here. I would like to toy around with making the profile image a full banner instead of a constrained circle. This could have condensed a lot of the demographic type information onto the banner, allowing the Likes and Dislikes to take a bigger portion of the screen.
  • I really wanted to add more fun iconography, really add some branding, but I couldn't think on my feet quickly enough to make something that would actually work for this.

Day 5

With the prompt of "App Icon" I wanted to try something a little different from what I have been doing. I started out trying to do a kind of game icon, it evolved into a sort of mindfulness thing, and eventually ended up with just a shape that I kind of liked. 

Things I like:

  • Still working on my subtle gradient game here. I like the colors used in the icon background especially.
  • I feel like going with a circle icon was the right call given the end output here. Lots of repeated curves make the composition stronger.
  • Rule of thirds on the shape inside the icon also help the composition out.

Things I don't like:

  • There's no real purpose behind this. No imagined use, nothing. It bothers me because I don't know if I actually succeeded or not in any meaningful way.
  • I wasn't satisfied with the gradient on the shape and I finally figured it out. It doesn't match the lighting given by the background color. As it is, it introduces an incongruous texture and with the large sharp lines and the bold color in the back, it just becomes a bit noisy.

Day 4

Today's prompt was "Calculator." Once again I wanted to tackle something that's a bit close to me and I have always loved Warhammer. I don't own any of the armies myself, but many childhood afternoons were spent admiring the models and the lore behind them. Because I've been close to this area for basically my whole life, I understand the pain of having to calculate how big of an army you can bring when each model has a different point value. This calculator could help alleviate that pain point. You'll notice some repeated content, I'm working harder at just keeping the design to the minimum needed to communicate the concept without worrying too much about branding and specific content since I only have 30 minutes.

Things I like:

  • The faction selection bar. I would like to try some other ideas out, but I liked having that all there and the I feel like the visual hierarchy when you select something is very strong and in-brand for Warhammer Age of Sigmar. 
  • Big pictures of the models really help this become an attractive design. Their artists have done excellent work and that should be used as much as possible to help draw people in to the excitement of going to war that often goes completely forgotten when going through these laborious planning phases.
  • I love the typography on the model thumbnails! The font face solidly fits the theme while still being out of the way.

Things I don't like:

  • A lot of the interactions. The idea was to tap on a thumbnail to add one to the count and you can then delete the whole stack. Clearly this isn't a great way of handling it, but I was cruising with only 30 minutes of time. Also the faction bar, while it looks nice, is way too bulky for something that won't be changed frequently. I'd like to explore other options to get this smaller and progressively disclose the other elements that aren't needed 95% of the time.
  • The Iconography on the thumbnails feels a little out of place. The bright red trash doesn't fit very well and the gradient on the count badge I think is a little heavy.
Army Calculator.png
Paint Backlog.png

Day 3

Today's prompt was to create a landing page. The idea behind Painting Fiend was a Tinder-esque way to find great painting resources for painting miniatures and sculptures. I wanted to do more than just show a great paint job, but provide some information at a glance that people could use to decide if they wanted to save that tutorial for later.

 

Things I like:

  • I think the orange and grey worked better today than yesterday, though the white looks a little too pinkish. 
  • I had fun experimenting with adding texture to things as I tend to rely heavily on basic line work to get the job done. It's not there yet, but it was a fun experiment :D
  • The extra information sections down below I think are on the right track, giving a bit more context before a snap decision is made, but I don't think they're quite actionable yet. I'd like to get together with a product team and do some contextual inquiry to figure out what is most useful for potential users.

Things I don't like:

  • The white looks too pink. I might like to return and experiment with trying a cool white to see if that helps, or transition it more to a yellow tint.
  • The tutorial sources links I think are useful context, but are not displayed properly here. Probably some icons to show the source instead of the full text could help, maybe even with a small thumbnail display of the content waiting behind the link.
  • The stone texturing didn't work out, there's a lot more that I need to figure out how to do with it to make it subtle enough to be a legitimate effect I could use in a real product.

Day 2

The prompt here was a checkout page. I kept myself to the 30 minute timer and it was pretty rough. I experimented with color, line work, and typography here.

 

Things I like:

  • I like orange and gray, though I don't think I pulled it off here as well as it needed.
  • I like the simplicity of the form but I'm not sure how it would work on a mobile device. I worry that the fields aren't big enough to be worthwhile and that the layout probably needs to be revisited heavily here.
  • I like the breakdown of the charges, I feel it helps build trust. This would of course need to pan out with usability testing.
  • I used Arial and Arial Black along with various weights to create a decent visual hierarchy, but it also needs some work.

Things I don't like:

  • Where to begin! I really struggled with this challenge. I spent way too long trying to figure out what sort of company this was and didn't spend enough time on the main part of the challenge. Lesson learned :)
Notebooks Forever.png
Screen.png

Day 1

The prompt here was simply a sign up page. I was really experimenting with color, shapes, and typography here.

 

Things I like:

  • The colors in the back were fun to play around with and went through lots of different versions, especially as the idea of the app became a relaxed guitar mentoring service. 
  • I had a good time experimenting with font weights and styles to create visual hierarchy. I am hesitant to have such a light font weight on the form inputs, but I think it works really well for the header especially with the extra kerning.
  • Playing around with shapes led to the logo in a very freeform manner. The logo shape led to the idea and name for Zenpicks. I think it's a very simple logo that can scale up or down easily that reinforces this fictional companies mission.

Things I don't like:

  • Everything after "What's your experience with guitar?" I wanted to have some visual to easily display ability with the instrument, but it ended up being busy and unnecessary. This would be the biggest thing I revisited if I had time left over in the design challenge.