Designed by Engineer
We live in a strange world full of stereotypes. Such as :
Software developers don’t have any “visual taste”
What a crazy assumption. There are tons of developers who designed their own apps and succeeded to make it really attractive. I never did UI before, didn’t attend any design courses or something. Almost a year ago I saw this Daily UI challenge (really cool idea, it was so viral at that time) I thought it would be interesting to try myself even if I didn’t have any experience. What I really have: years of building mobile applications, common sense and Sketch app.
Briefly about Daily UI if you don’t heard about it: you have 100 days and every day except weekends you receive design task via email. You should visualise this task and share it with the world to get feedback and become better designer. That’s the idea.
I’ve decided to split every design on next criteria:
- Purpose — task user needs to accomplish.
- Personal Rating — how good it actually looks, in my opinion.
- Comments — some thoughts about design.
Day 001 : Sign Up
Purpose : login and register via email. Ability to switch between those states if user needs to. Validate user data and show result of this validation. Forgot password.
Personal rating : 😐
Comments : It was first shot and I have to admit it’s not what I expected to create. Really strange UI. I chosen potential product concept (chinese food delivery app) and tried to make something with it. Main problems with this design : wrong colours, text fields from Android, logo and a lot of unnecessary empty space.
Day 002 : Credit Card Checkout
Purpose : Show credit card data to the user.
Personal rating : 😐
Comments : Gradient looks weird. I didn’t know how to do them right. MasterCard icon and credit card chip looks goofy. Whole layout is broken.
Day 003 : Landing Page
Purpose : ability to watch video of the product. Product screenshot. Call to action — “Get started”
Personal rating : 🎉 (love this shot)
Comments : This is a good one. Right colours, right fonts, right layout and nice product concept. But still - main action “Get started” hidden somewhere on the page, it doesn’t look so “main”.
Day 004 : Calculator
Purpose : simple calculator without any extra actions. Show result in a different numerical systems.
Personal rating : 👍
Comments : Decided to stick to chosen colour palette from previous shot and use same product concept. First try in native macOS app UI.
Day 005 : App Icon
Purpose : nice icon.
Personal rating : 👍
Comments : regular “code” logo in rounded rectangle. Nothing special here.
Day 006 : User Profile
Purpose : show user photo. Show user name and nickname. Show notifications and statuses of the user. Show dynamic messages from server side (like upgrade pricing plan). Ability to edit profile.
Personal rating : 🤔
Comments : Tried to make something brave and unusual with Navigation Bar as a circle. A lot of strange empty space here. Missing settings/profile editing.
Day 007 : Settings
Purpose : setup general app behaviour. Edit user profile. Edit other server side data. Ability to control notification volume
Personal rating : 🔍
Comments : what a small text size… On real device you have to use magnifying glass to see something. Icons are weakness here for sure. Logical block separators looks like it borrowed from Android Holo design back in ~2012. Custom tab bar would look better if it’d be a default one with custom icons.
Day 008 : 404 page
Purpose : based on user choice redirect him on different page (Red — buy the product, Blue — page with funny gifs, for example)
Personal rating : 👍
Comments : I chosen “Rise of machines” theme for the product concept so I refers to Matrix sometimes. Tried to created something clever with 404 page and Matrix theme. Those pills — one of the first illustrations, which I made with help from this tutorial. Also found new blue and read colours.
Day 010 : Social Share
Purpose : call to action to share something to the social networks.
Personal rating : 😐
Comments : Took iOS 7 screen from http://www.sketchappsources.com. Tried to make popup with sharing button but at the end this shot looks really weird. Makes me sad.
Day 011 : Flash Message
Purpose : notify user about anything in the web application. Highlight title of the message. Put messages on top of everything on the screen but do not change user focus. Ability to interact with messages with links inside them.
Personal rating : 🤔
Comments : wrong top-left text padding and really small text size for popup message on the web page. Size of the message box has unusually big width.
Day 012 : E-Commerce Shop (Single Item)
Purpose : Read product description. See product price. Ability to customise the product. Ability to choose quantity. See products’ author/creator. See rating and comments. Ability to buy product.
Personal rating : 👍
Comments : Decided to make mac OS application for this task. With same “Terminal” logo and colour style. Looks nice but hard to use it daily, in my opinion.
Day 013 : Direct Messaging
Purpose : send/read messages. See message history. Delete message. Attach image to the message. Interact with links. Ability to see whether assistant is online or offline now.
Personal rating : 🤔
Comments : Tried to do something with chatbots before it became a mainstream. There is no ability to see date & time of the message. Image attachment looks weird for some reason.
Day 014 : Countdown Timer
Purpose : How much time left. Ability to subscribe to newsletter.
Personal rating : 👍
Comments : Combined countdown timer with subscription form at the bottom. It supposed to be on the landing page from Day 003.
Day 015 : On/Off Switch
Purpose : Show whether switch on or off.
Personal rating : 👌
Comments : Took default switchers from iOS and changed colours a bit.
Day 016 : Pop-Up / Overlay
Purpose : ability to close popup. Accent on the action (“Update” button).
Personal rating : 👍
Comments : This one was definitely better than popup in Day 010.
Day 017 : Email Receipt
Purpose : show and highlight total price. Show receipt date and time. Show payer’s name. Ability to pay right from mail. Show details of current payment.
Personal rating : 👍
Comments : First try in mail UI. Used same product concept here as well. For some reason I’ve added receipt date two times in the mail. Tried to highlight “Make Payment” button with different background colour. Also highlighted payment amount with bold typeface and now I see it was a mistake.
Day 018 : Analytics Chart
Purpose : ability to choose time period (day/month/year). Show exact data value in chosen time. Show current date on the chart. Highlight currently selected graph.
Personal rating : 🤔
Comments : Screwed up with gradient at the bottom of red line. Whole chart looks serious and unrealistic to me. Text size is pretty small.
Day 019 : Leaderboard
Purpose : show top two in the rating. Show current user’s rating and position. Show how much above of current user and how much below.
Personal rating : 👌
Comments : decided to use rounded avatars with small border. Line as a separator was a hard decision. Still not sure about it.
Day 020 : Location Tracker
Purpose : show current user’s location. Ability to search. Ability to zoom in/out map.
Personal rating : 😐
Comments : Map looks weird. Drawing a map was harder than I expected. The only thing that looks nice here — small search bar at the top-right corner.
By the way, it’s Independence Square in Kyiv. I’d say very simplified version.
Day 021 : Home Monitoring Dashboard
Purpose : show current time and date. Show notifications. Show house with all smart devices on the map. Make interaction efficient as for on-wall device.
Personal rating : 🤔
Comments : Tried to make something realistic to put on the wall for instance.
Day 022 : Search
Purpose : search new users. Show suggestions “who to follow”. Ability to follow/unfollow from search screen. Show online/offline status of the user. Clear search. Search request autocomplete, suggest next character in search field. Real-time search.
Personal rating : 👍
Comments : Fixed user icon from Day 007 “User Profile”, now it looks better.
Day 023 : Onboarding
Purpose : discover main app abilities. Ability to skip onboarding process. Slide left-right. Show progress, how much user have to see before proceed to login.
Personal rating : 👍
Comments : Decided stick to the outline icons for this product concept. Login is very simple, it wasn’t main purpose of this shot. Again text is very small for real device.
Day 024 : Boarding Pass
Purpose : Show two different version of the same content (left and right part of the ticket). QR code. Departs from/Arrives to. Airlines’ company logo. Flight/Gate/Seat.
Personal rating : 👍
Comments : Now I see, I should probably make black QR code grey instead.
Day 025 : TV App
Purpose : Movie description, rating, timing, tags(genres). Actors with photos. Role for each actor. Similar movies.
Personal rating : 👍
Comments : TV app — what a strange format. Tried to make elements big enough so user can interact with them. Instead of regular colour background I put blurred shot from the movie here. Missed actor’s role.
Day 026 : Subscription
Purpose : email field to subscribe. Subscribe button. Description of the content you’ll get.
Personal rating : 🤔
Comments : Plane icon was really hard to draw. Synchronise all those vector lines and put grey background inside. At the end I think it looks nice. 1/0 in the background is a bit confusing though. Mail icon has very strait corners.
Day 027 : Dropdown
Purpose : select item from dropdown list or hide dropdown.
Personal rating : 👍
Comments : Took more practice on the iconography in this shot. Dropdown hiding is missing here.
Day 028 : Contact Us
Purpose : text fields for mails’ subject and content on the site.
Personal rating : 😐
Comments : First steps in illustrations. Moon looks completely strange (I’d say it’s “overflat”), text fields and button — are pretty standard. But whole layout feels broken.
Day 030 : Pricing
Purpose : Show difference between pricing plans. Show the most useful pricing plan. Ability to start pricing plan now.
Personal rating : 😐
Comments : Weird yellow border around “medium” pricing plan. Also it’s hard to distinguish different pricing plans from each other by features list.
Day 031 : File Upload
Purpose : drag and drop or choose file to upload. Show upload progress. Close upload at any time. Show file details (created date, size, name, version). Show success/error. Try again if error occurs.
Personal rating : 👌
Comments : Didn’t know how to do an animation, so I’ve made sequence of images for different states. Popup triangle is very narrow.
Day 032 : Crowdfunding Campaign
Purpose : time to end. Current money amount. “Back this project” button. How many people backed the project. Description. Video. Creator.
Personal rating : 👌
Comments : The only nice thing here — little icon left to Robotics label.
Day 033 : Customize Product
Purpose : choose colours of the product. Choose materials. Hardcover. Product description. Author. Product name.
Personal rating : 👌
Comments : author is missing here. Hardcover switcher is misplaced. Potato from Day 12 looks better.
Day 034 : Car Interface
Purpose : Big UI controls to use in the car. Show current time. Show current album art. Music controls.
Personal rating : 👍
Comments : passed 6 complete iterations till I found this concept. Top view car illustration was a hard one to draw.
Day 035 : Blog Post
Purpose : Author of the post. Code highlighting. Title. Cover image.
Personal rating : 💩
Day 036 : Special Offer
Purpose : attractive illustration. Show discount amount. Show company logo.
Personal rating : 👍
Comments : That was my apogee of illustration. Those robots was the best illustration I’ve made so far. (It supposed to be an promo image in Facebook feed).
Day 037 : Weather
Purpose : today’s temperature. Show current location. Weather provider. Illustration of the weather.
Personal rating : 👍
Comments : took some concepts from Authentic Weather (love this app. It’s so simple and useful). So I ended up with “Hot-Or-Not” weather app. Icons is weak still, especially cloud icon.
Day 038 : Calendar
Purpose : current date. Tasks list for today. Important dates. Relationship between tasks.
Personal rating : 👍
Comments : it’s dramatically simple calendar app for macOS. Tasks represented a bit weird. How to change calendar view to Day/Month/Year? How to change month? A lot of stuff missed.
Day 039 : Testimonials
Purpose : show photo. Show position and the company.
Personal rating : 👌
Day 040 : Recipe
Purpose : show ingredients list. Show and select portion size. Show steps how to cook current recipe.
Personal rating : 👍
Comments : This burger illustration is on the level of the robots from Day 36. I still didn’t know how to do an animation but this burger is supposed to fly above the surface a bit. Also it’s handy to choose portions size (it’s really confuses me in most cooking apps that I can’t choose portion).
Day 041 : Workout Tracker
Purpose : add new sets. Start/stop timer. Show time for exercise. Move to the next exercise. Show exercise statistics.
Personal rating : 👍
Comments : Took Pebble illustration from http://sketchappsources.com/ I would love to build this app actually. It would be useful to keep track of the exercises just with your watch. Still without animation.
Day 042 : ToDo List
Purpose : Add new task. Mark task as complete. Delete task. Reorder tasks. Hide/Show completed tasks. Add people to the list. Show global notifications.
Personal rating : 👍
Comments : took some concepts from Google Keep. “Waves” in navigation bar is a controversial solution.
Day 044 : Favourites
Purpose : search for the code snippet. Tag code snippet. Favourite code snippet.
Personal rating : 🤔
Comments : everything looks a bit bold. Probable that’s because the font for code snippets and too grey background.
Day 045 : Info Card
Purpose : different card for different permission level. Ability to distinguish people with different importance.
Personal rating : 🤔
Comments : it was a WWDC for the day I made this shot so I decided to stick with something realistic. Took Apple logo from http://sketchappsources.com/ since it was extremely hard to do it right by myself :)
Day 046 : Invoice
Purpose : show issue date. Order number. Show total price. Show prices of all items. “issued by” and “issued to” with addresses and other information.
Personal rating : 👍
Comments : Tried to highlight total price here (almost in every invoice mails total price hidden in the bottom for some reason).
Day 047 : Activity Feed
Purpose : date separator. Update feed. Show new activities.
Personal rating : 👌
Comments : Now separators looks more like iOS separators. Used “skeleton” pattern. Red counter icon in the navigation bar looks weird. Also “today” section is under “yesterday”… what a strange decision, I’d really swap them now.
Day 048 : Coming Soon
Purpose : subscribe to newsletter.
Personal rating : 👍
Comments : tried to do something unusual with those tasks in the top right corner. Here is idea : when the user really complete all tasks (subscribe, share&follow twitter) he gets 10% discount for future product, for instance. Also here is my first try in background patters, unsuccessful try.
Day 049 : Notification
Purpose : show new notifications. Show notification time.
Personal rating : 👌
Comments : Again separators from Android Holo Design. Refresh icon is too big for navigation bar. Also whole layout is pretty overloaded.
Day 050 : Job Listing
Purpose : available jobs. Available locations. Ability to search.
Personal rating : 👌
Comments : Stick to product concept from previous shot. Tried to emphasise office locations first. List of locations could be better, especially for wide screens.
Day 051 : Press Page
Purpose : Ability to download HD press resources. Read brief product description.
Personal rating : 👍
Comments : It was nice combination of red colour and blue “download” button. Star icon is really redundant here.
Day 052 : Daily UI Logo
Purpose : D as a logo.
Personal rating : 👍
Comments : I really should remove second background paper from general logo.
Day 053 : Header Navigation
Purpose : ability to enter text. Save/Dismiss task. Assign task. Set tags.
Personal rating : 🎉
Comments : My first ever animation made with Principles. I’d love to use TODO app with interaction like this, really handy. Also I should consider possibility to create new tags, and search peoples that are not in the list. (but it could be overcomplicating, so I stick to current version). It’s not exactly “Header Navigation”, but whatever, looks nice to me.
Day 054 : Confirm Reservation
Purpose : reservation location, time & date and number of people.
Personal rating : 😐
Comments : lack of imagination here. Icons and calendar view are weird and layout is broken. Bottom navigation looks good though.
Day 055 : Icons Set
Purpose : different icons for TODO application.
Personal rating : 👍
Comments : I’ve made a big progress with icons since Day 27. Still a lot of room for improvements. Eye icon could be better for example.
Day 056 : Breadcrumbs
Purpose : hierarchical navigation to single item.
Personal rating : 👌
Comments : Made two version of the same UI element. Top version is more real and bottom one is the way I’d like to see this kind of navigation. Still both of them looks awkward.
Day 057 : Video Player
Purpose : Show current time of the video. Show full video duration. Ability to play/pause. Control video sound volume. Switch to full-screen mode.
Personal rating : 👌
Comments : I took very controversial approach and put video timing at the top and actual timeline at the bottom instead of putting it to the centre of the strip. Also small current time popup is redundant here (I already showed current time in general timing section). Volume icon is terrible.
Day 058 : Shopping Cart
Purpose : show price of the item. Show rating and photo.
Personal rating : 😐
Comments : Idea was nice, but implementation is weird. Especially orange “rating” strip. I have to admit list layout is hard to me for some reason.
Day 059 : Background Pattern
Purpose : different icons as a background pattern
Personal rating : 👍
Comments : This background pattern is way better than pattern from Day 48. Chosen correct colours and right icon set.
Day 060 : Color Picker
Purpose : choose different colours. Copy-Paste HEX and RGB value. Mix colours to get new one.
Personal rating : 👍
Comments : a lot of colour pickers out there so I decided to make this one not a colour picker but a colour mixer. It’s probably won’t be useful for real usage. But as a concept looks absolutely fine.
Conclusions
Well it’s not 100 UIs, but still it was fantastic experience anyway. I spent ~1.5 hours in average on every shot and I clearly see my progress over time in layout composition and basic icons drawing.
Here are the tools & resources I’ve used for this experiment:
- Sketch app
- Principle — to do an animation.
- Lingo — to keep all atomic elements and colours consistent in one place.
- SketchAppSources — ready-to-use templates (like Pebble frame)
- Craft — fill design with real data.
- Coolors — explore new colours.
- Noun Project — icons inspiration.
- Uplabs — general inspiration.
What I learnt from this experiment:
- You have to understand your product.
- It’s not about “nice pictures” it’s about how user can accomplish their goals.
- Small details really matters. (kerning, typeface, line height, opacity etc.)
- Build design with an atomic elements so you can reuse something later in other designs or extend existing one.
- Design become better as a function of a time you spent on it (+ inspiration coefficient which I can’t really explain)
- Learning by doing is the best way to learn something.
Software developers do have “visual taste”
UPD:
Wow! I got a couple of really detailed comments with a description of flaws in the designs above. That’s great that people are willing to spend their personal time to show that. I’m really thankful to them 🙂
The designs above were made back in 2015 and I shared them in 2016. Since then I’ve learned a lot. So I’d really love to hear the feedback on my latest design of Reduce App. It’s a simple tool to compress Sketch files. (below are design of the app itself and landing page). Thank you ahead!
