Music player musings

I said I struggled with the last challenge. I have been looking at what I designed and I can definitely see some problems with it.

The major issue I think is that the album/song images are displayed on a carousel type thing – were the user can swipe to move to the next song. That in itself is not a problem, But I have put clickable elements on it such as the search and menu. so if the user try to tap one of these they may accidentally move the carousel. Big usability fail!!

Illustration of a iphone music player app

Music player take two

To solve this I have moved the menu and associated control above the carousel. This was a minor rejig but would make the usability much better.

I changed the colours a bit too, not for usability, just cos I felt like it.

Illustration of music player with new layout

Daily UI 009 Music player

I really struggled with this one and am still not particularly happy with the final result. I think I found it intimidating to come up with something new when the big guys (Samsung, Apple have already produced such successful interfaces for their music players.

Daily UI 008 404 page

What would the interwebs be without cats? Hardly anything at all! So I designed my 404 page around this lovely creature.

I found this cat pic royalty free. Doesn’t he just embody the complete indifference only a cat can project?

404 page mock up

Daily UI 007 Settings

Does anyone else collect recipes that they never make? At least now being digital they don’t take up any room. No more scrappy photocopies stuffed into folders or pages torn from a magazine. Now you can just bookmark a page, save a link, take a screenshot, or even take a photo of that magazine page.

My design for the Settings challenge was a simple subscription settings page for a recipes website.

setting mockup

Daily UI 005 App icon

My parents live in a retirement village and my dad is in a band there called the Rheumatics. :0) One of his fellow guitarists only plays 5 chords and refuses to learn any more so dad has to transpose their music into a key she can play! My dad being the techy sort decided to write his own bit of software to do this. “But wait”, I hear you say. “There are already plenty of apps out there for your phone which do this”. True, but he wanted one on his laptop as the phone screen is too small. Why am I telling you this? because I needed and introduction and it is the inspiration for this days app icon challenge – a music transposition app icon

 icon for a music transposer app
Final app design

Daily UI 004 Calculator

Took the easy way out on this one due to time and (brain fade) and drew up a standard calculator. would quite like to revisit this challenge later and do something else like a mortgage calculator. maybe something with sliders or some other more interesting interface. Still here tis.

calculator mockkup on mobile

The Z pattern

I think somehow in my last UI attempt “The landing page” I managed to implement the Z design pattern without even trying (yay me). The Z pattern is basically a layout that makes use of how people scan screens (in the western cultures) left to right, top to bottom. Important elements are located at the end points and elbows of the Z. A full explanation of the Z pattern can be found on creativebloq.

The logo (very important) is located top left – identifies the site owner. The eye tracks right across the main nav. The end of the main nav is often where the search is located. It then goes down via the main image to the bottom left button to the bottom right. The last button on the bottom right could be a call to action such as ‘Buy now!!’…not sure people actually buy new cars online, having only had second hand myself, so I thought reading some good reviews might be persuasive instead, but you get the idea.

Web page showing z pattern overlay

Daily UI 003 Landing page

This is a little bit more familiar to me as I work with websites, though not in an advertising space. I have been drooling over the latest Mazda CX3 recently after I saw one in the train carpark the other week. Somehow my 2005 Mazda Demio now looks a little sad in comparison. Still as it says in Exodus, ‘ Do not covert thy neighbour’s donkey’ (or CX3 perhaps?). So I wiped aside my drool, made this page and I shall never think of it again!..fortunately they seem quite rare around here, so I don’t have to see them very often. 🙂

mock up of a landing page for a selling a mazda crx car
Product landing page

Tools

  • Adobe Illustrator

Daily UI 002 Credit card checkout

I have bought plenty of things online, but I still can’t remember my credit card number. probably just as well! Also, for the life of me, I could not remember (beyond having to fill in the number and expiry date) what a credit card checkout form has on it. I see these things all the time, but don’t really pay attention to them. Which is actually not a bad thing from a users perspective. If its doing a good job I shouldn’t have to pay too much attention or think about it – I just want to buy that thing I don’t really need.

If it’s bad that’s when we notice it… cos we want to hurl our (insert appropriate device) across the room and scream in frustration.

Now I am learning about UI and UX though I am paying more attention and trying to see what makes a form good or bad. It’s a huge area which I will delve into more later.