12 Days of Daily UI

Things I've learnt so far.

Daily UI has been a great journey so far, and I've learnt a lot in the process of making these UI's everyday putting in action all the things I've learnt from my courses and outside class and learning new elements in various tools.

I've covered the first Daily UI in my previous post you can find it here, in this post I'll be talking about the rationale behind the few things I've done in the past 2 weeks.

Day 2: Credit Card Checkout Page

I wasn't too much into the process in the early stage, so I just wanted to create something that looks good, or as my Professor says "everyone loves the beautiful design", I wanted to make the process as simple as possible so I designed a UI that resembled a actual Credit Card itself, so the mapping would be super easy as a process. One of the readings that week I had talked about "mapping" and how people prefer mapping real objects to digital world, which saves them time and creates a more intuitive interface.

Day 3: Landing Page

The Landing page, is a very incomplete design I've made because it all had to be done while going to college, work and assignments piling up because of the New York Trek, I just threw a flashy image and added basic navigation and elements from the existing University of Michigan website. I could have added a lot of things like social media links, search buttons, etc. but I wasn't sure if too many elements were needed to make a landing page more complete.

The last two days! #dailyui #002 and #003 pic.twitter.com/MATGNq1YNc

— Sidharath Chhatani (@sidharathc) October 16, 2015

Day 4: Calculator

One of the pieces I iterated over a lot, initially I didn't want to go and make the same UI as the default "Calculator App" for iPhone, so I went super innovative and made a piece where the functions were not the regular ones. For instance, the math functions on the top of the screen. When I tried previewing the UI on a iPhone, I soon realized that it would be usable because every time I had to do a plus sign I had to go on the top of the screen and using the calculator with one had wouldn't be possible, this lead me to going back to the more casual design but I added "memory" buttons which I loved in the old Casio calculators my dad had, the only problem was I never knew what I had saved in them, so I added a little UI to show their current values.

The things I didn't include in my calculator was the ability to backtrack and see what was being done before that.

Making a Calculator, and trying to use Mockup PSD's #dailyui #004 pic.twitter.com/JKeY2usJdA

— Sidharath Chhatani (@sidharathc) October 16, 2015

Day 5: Logo

This was the most laziest thing I've every done! The inspiration for this came from the "Skype" logo where if you see closely there are three circle that have been combined to create the effect. It was just something I had to put out, so I created a brand "Blocks" and made it a blocky logo, now that I think about it a Simple "B" would have sufficed to make the logo look neat.

#DailyUI #005 #Logo #DesignUI I will be lazy cause it was a busy day and traveling in New York is tiring! pic.twitter.com/khOCmkRxCW

— Sidharath Chhatani (@sidharathc) October 20, 2015

Day 6: User Profile

The aim, again was to create a page that has few elements, which never turns out to be because a profile page has all this data to organize and display neatly. One thing I realized making this UI was that understanding what has to be displayed is more important than how it has to be displayed, too much information and it is a clutter, too less information and the page serves no purpose. Striking the balance was the biggest obstacle when making the UI.

Finally finished the User Profile! #DailyUI #006 Shit small work will be done everyday! pic.twitter.com/rkcBMCDcTX

— Sidharath Chhatani (@sidharathc) October 21, 2015

Day 7: Settings Page

I wasn't completely satisfied with the User Profile page, so I decided that I would make a settings page, that feels more personalized to a user and them address their settings in a very easy to handle manner. The UI had similar problems of how many settings to display, so I went with the easy way out and divided the settings in various tabs and concentrated on a single one. The pattern that I see forming is that of how important the content is when creating a design, without knowing that designing can become a tough job.

Sorry Internet for being a little late on the #dailyUI #007 will make sure I get back to my sprint again! #thankyou pic.twitter.com/LjuE8u6xyi

— Sidharath Chhatani (@sidharathc) October 23, 2015

Day 8: 404 Page

Most fun I've had a while was because of the image I found, this echoed with what my feelings for a 404 page were i.e. being lost and after going through multiple sources of inspiration and understanding of creating a 404 page is the error message you give with the page, 90% of the times it was suggested that the page be thematic to your design and the text in the message should portray that. And the page should allow the user to go out from their or be directed to a place which is more familiar, which is why the search button and the navigation are very important in this context.

404 Screen #DailyUI #008 pic.twitter.com/4gmXRp1bXe

— Sidharath Chhatani (@sidharathc) October 27, 2015

Day 9: Music Player

The problem of elements has been the general theme in my UI's, giving the user basic functionality is a necessity but how far can we extend this is the question. My player closely resembles that of a Spotify player mostly because I'm influenced a lot more by its design than that of others. Initially I started with adding a volume control UI element, which I soon realized was pointless because people tend to use the side volume buttons more often than a UI for controlling sound. I reused it instead and then made then track progress bar instead.

I know I am doing two in a day, but well I had to take care of those pending ones! #009 @Daily_UI #dailyui pic.twitter.com/mezATqW6HK

— Sidharath Chhatani (@sidharathc) October 27, 2015

Day 10: Sharing UI

I was really excited about using 3D Touch somewhere in my UI's which is what lead to this biased 3DTouch interface. It was a great exercise in learning how Principle app works and how we can create a bounce effect and such using the application. The other thing I learnt was the power of taking screenshots and then using those UI elements in your designs, this allowed me to speed up the UI process and make sure I can more time conceptualizing the idea than making it.

From @sketchapp to @principleapp to @Photoshop, this @Daily_UI was fun. #UI #UX #dailyui #day10 #3DTouch #interface pic.twitter.com/bNBZghTb8F

— Sidharath Chhatani (@sidharathc) October 27, 2015

Day 11: Flash Messages (Errors/Success)

This was where most of the learnings came in, the messages that were to be made didn't necessarily had to be very scary (in case of alert messages) or very obvious (in case of success messages), understanding that there is a human using on the other hand and the he doesn't want a success messages that says "Done" or "Completed" it became necessary for me to create a interface where showing appreciation and a more friendly message was far more important than just throwing out garbage text in a fancy way. This echoes with a concept taught in our class regarding "Questions", "Opinions" & "Criteria's", which says that every feature that we design must have a rationale behind it for it helps create a narrative and allows to explain the stakeholders better.

Some basic flash messages! #dailyUI #day011 #ui #ux #interface #iOS9 pic.twitter.com/b8uc1uxpQ2

— Sidharath Chhatani (@sidharathc) October 29, 2015

Day 12: E-commerce (Single product page)

This day, I've very much sold on the idea that people will follow social norms more than they would thing, mainly because of the "Solomon Asch" experiment which allowed him to prove that this indeed is a effect that can be emulated. I wanted to add that in my design and so I decided to add a additional line at the end, indicating that "3 of the 4 people who bought the item, rated it 5 stars" influencing the users by telling them what the similar others who came to this item did after buying.

I will not sleep till I make a UI #DailyUI #Day012 @daeverydaystore how pretty does this look? #ui #ux #interface pic.twitter.com/n0da40l4GC

— Sidharath Chhatani (@sidharathc) October 30, 2015

Day 13: Direct Message

For this one, I noted down a list of things I would have to do and what I had to convey using the direct message UI. 1. People involved. (Need Names) √ 2. Messages are sent by whom √ 3. What time did they say that? √ 4. Did he check it ? √ 5. Does he want to say something. √ 6. Can he describe his emotions. √ I wanted to make sure that every message was sent had some emotion behind it, cause even in normal life we have these set of emotions that we can understand when looking at a persons face or his body language, but without that it becomes hard to understand the other person. Another thing was that I wanted to make the past conversations some place, by showing how the moment has passed away and hence whenever a person reads a message the colors/emotion from that message is sapped away and that is a moment in the past.

I was trying to emulate the "Inside Out" color scheme and basic emotions and how the memories that were removed had their color lost.

Before I sleep, here is one of the pending UI #DailyUI #Day013 #DirectMessaging #Ui #UX #Emotions #Interface pic.twitter.com/iyvIf91Ymw

— Sidharath Chhatani (@sidharathc) November 1, 2015

The journey for Daily UI has been a great one, teaching me a concept day-in and day-out, I hope I rest of the 86 days bring something better out of me!