Daily UI #032 - Crowdfunding Card

Wow, it's been quite a while. In my defence, it's been an insane past 30-some-odd days.. 

Anyways, for this daily UI, I used a colleagues real project (check them out at https://www.instagram.com/maakedesign). Their pen holder functions as an iphone holder, pen holder or a box, depending on how you fold it. I wanted to keep the design light, clear and engaging, with a focus on the current amount raised and the CTA for raising more. I did this by keeping these elements bold and emphasized through use of colour. The product's images can be displayed through swiping or clicking the arrows. I also figured a "share" button would be important so that friends and friends-of-friends could share the awesome projects and gain some more traction.

Daily UI #31 - About Card

I was completely gutted with yesterday's news of Gord Downie's terminal brain cancer. It seemed like the obvious choice for this dailyUI. Since this format would be likely used on the iPad, I wanted to focus on the clean design and allow the functionality to be more intuitive and implied through small visual cues. 

Daily UI #30 - Grid Builder

By simplifying this grid builder to contain the editable paramaters on the left, and the download selections on the right, it makes it quite simple for someone to quickly edit and find what they're looking for in the example area above. On hover, each element will show it's particular "computed" width.

Daily UI #028 - Search Results

For the advanced search results UI, I based it off of the iStock search since I found this search to be one of the most helpful and comprehensive. Including any refining parameters along with keywords in the top right allows the user to quickly refine and remove parameters.

Daily UI #027 - Character Selection

I want to begin this by saying, I don't anything about superhero's. I'm not sure if this daily ui really fit the challenge, but I gave it a go! The silhouette style in the character selection section allows the thumbnails to be smaller and not as demanding for attention.

Daily UI #026 - Event Box

I went with a fairly straight forward approach for this one so that it could potentially be updated quickly and easily, while allowing the flexibility of different styles for different artists.

Daily UI #025 - Contact Profile

25% finished!

For today's daily UI, I focused on a clean layout with the main buttons at the bottom for easiest thumb access. The birthday can be toggled to set a reminder, and you can email the contact by clicking the mail icon to the right. Shout out to Wei Liu for his minimal iphone template.

Daily UI #024 - Subscription Modal

I don't know about you, but the following things really irritate me:

  1. The subscription modal popping up as soon as you enter a website. Why the hell would I subscribe to your page when I don't know anything about you yet, and the first thing you do is shove a modal in my face?
  2. Alright, I'll bite, I subscribe to your subscription service, and you send me an email full of junk every single day (or sometimes more than that).

End Rant.

So, since I can't do much about the timing of the message in this particular daily ui, I focused on playing up on the subscription modal's headline. Since most subscription modals are probably ignored now for the most part, I wanted something a little more interesting.

The animation could certainly be a little smoother, but this is just a screen recording of my codepen file here: http://codepen.io/colinspencedesign/pen/NNoeRL

Feel free to fork it and make it your own!

See the Pen Granify Interactive Banner by Colin Spence (@colinspencedesign) on CodePen.

Daily UI #023 - Wallet Expenses

For this wallet widget, the elements all work nicely together in a clean and simple arrangement. The left field displays your various card options, while the right displays the appropriate information. The selected card is emphasized with a thin blue stroke around the card on the right, and the subtitle below "Balance" is updated to the corresponding card. The info button beside the balance would trigger an inline dropdown to display the user's account details (amount left, last payed, etc.). I wanted the filtering system to be as simple and flexible as possible, so the user would be able to input a date, a date range, or just sort by keywords, and the results would return instantly "as-you-type".

Daily UI #021 - Dribbble Invitation Modal

If the user hasn't indicated a search term (name, username, email), the "results" area will fill with recommended users. Of course, those will be replaced when the user chooses to search for someone specific.

Daily UI #020 - Thermostat Widget

I wanted to focus on the balance of function and presentation for this thermostat widget UI, ensuring it is clean and clear. This final thermostat would have different states and features that affect how the UI is displayed and what the controls do, but the main focus on this main screen is to display the current temperature, the range at which the thermostat can be set, and of course, the room in which you're controlling. Since this UI would likely be placed on the wall in the home, it's important that it's clean, beautifully designed, and adaptable to any household. Keeping the clean and minimal style will certainly help to accomplish these goals.

Daily UI #018 - Blog Post

For this blog post dailyUI submission, I wanted to create a blog that told a story. Not through the (arbitrarily chosen) writing, but through the visual elements. In this case, I sampled the most common light tint from the blog photo, and used this as my light color, and combined it with the most commonly used mid tone, and dark tone. Of course, in my photoshop version here, I didn't actually write an algarithm or anything to detect these colors, but it inspired me to do so, and I plan on creating some javascript to do just that (even though this script already likely exists somewhere). Anyways, I am trailing off. I paired a clean and soft sans serif, with an expressive, yet ultra legible serif. I hope you like it!

Daily UI #017 - Special Offer

This is my special offer modal for a Grand Canyon Tour. Using a combination of price emphasis and urgency this modal displays a beautiful sunset of the grand canyon. I think the grand canyon sunset and the timer kind of go hand in hand in creating a sense of scarcity or "almost gone".

Daily UI #016 - Video Player

This is just the preview view mode. When the user clicks on the play button, the film would automatically open to full screen (because why the hell would you want to watch this film on anything but?)