Daily UI Thank you

Mock up done in Adobe Illustrator

Case

I did this daily UI challenge during the time I was developing my website called Ancient Arts. I decided I could make a mock up for a pop up thank you message for users who end up subscribing for the email subscription. Ancient Arts is designed for young adults with a bit of free time on their hands. I developed a persona which was a recently graduated student with a new job who was interested in history and culture. She had some extra time on her hands from being out of college and no family she currently needs to devote time to. Ancient Arts offers a great little hobby for her.

Process

Since this one was based off another website, I was creating I had a developed brand I could use which made the deign process faster and easier. Design choices like typography, images, color scheme was already developed and just needed to be implemented with this idea.

I selected this color scheme because I wanted the product and website to have an old aesthetic to everything. The background is supposed to resemble old parchment paper. Using browns instead of blacks helps with the looks of the website. And using an off white instead of a pure white is better on the eyes for users.

I picked a serif that has a decent amount of contrast to it because the website is promoting origami and origami has that intricate detail the higher contrast serif can resemble.

Advertisements

Daily UI To do list

Mock up done in Adobe Illustrator

Case

For this mock up, I was envisioning a to do list for common errands a typical person does on a daily basis. This application would be helpful to remind the user to do the smaller tasks of the day because they can be the most easily forgotten. This application would be targets for an age range of young adults from 20 – 26 years of age. The application would be gender neutral.

Process

I searched for inspiration with layout and typography of common to do lists. When I was searching for this inspiration it led me to include the date. In my original sketches I was not planning to have the date. However, I believe it is quite useful in this situation.

I decided to use this blue color because I believe it’s a color that can be the most commonly liked between genders. Blue can be seen as a calming color as well. There are days users may have a stressful day with a lot on this list. Hopefully the blue can subconsciously relax the user and checking off their tasks will revive them throughout the day.

One of my big focuses was how it should look when a task is finished. I decided to go with filling in the bubble of the left and leaving a white check mark to show the user has successfully completed that task. Other options that crossed my mind was having the task crossed out or disappear. I did not like the

Daily UI Loading

Mock up done in Adobe Illustrator

Case

I developed this loading screen during the first ideations of a web project I was creating. All I knew about the website at this moment was I wanted it about origami. During this phase I did not develop a certain target audience. I was mentally debating between having the audience be for kids, or for young adults. I was thinking kids because typically that is who is first associated with origami activities. However personally I wanted the website shine light on the history of origami and how interesting it was. Kids however wouldn’t really care about this.

Process

During this phase of deciding, for my UI challenge I wanted to experiment with the idea if this website was going to be targeted towards kids. This is a mock up idea for a loading screen. I did some research on creative loading screens and often seen other artists use something that moves as the loading bar. The first origami piece I thought of with movement was an origami boat. The loading bar would be representing the water the boat is sailing across to get to the other side.

This was the reason I went with a blue color scheme, to represent the water and clear sky environment this imaginary boat sailing across. I thought It was a really cute idea for a origami paged meant for children.

The only aspect I think may be conflicting with this deign is the typography choice. I am not sure why I decided to use a script typeface for the words. I believe it does look nice. However, that is really hard for children to read. Maybe a san serif would be a better choice in this case.

Daily UI Redeem Coupon

Mock up done in Adobe Illustrator

Case

This redeem coupon was meant to be used for a store who supports both in-person shoppers and on-line shoppers. My goal was to make sure how to receive this coupon was very clear and it was clear what the coupon was for. This coupon would be received digitally however, this could be through their website or through email for the shoppers who do not use their online shopping site but may be signed up for coupons still through email.

Process

For the typography in this case, I wanted something that was bold but easy to read for the user. The typeface needed to have a variety of stroke contrast because I wanted to use only one typeface and create hierarchy through the weights of the type.

In this one, I wish I spent more time on chucking content and the white space. Looking back at this, I am not sure why there is so much white space between the deal being offered and the way to receive the discount. I believe the layout as a whole could use a better layout system.

Daily UI Coming Soon

Mock up done in Adboe Illustrator

Case

This coming soon page would be for a library or book store. It would be revealing the new books that are on their way for customers to aspect and be exciting for. The target audience would be ranging from young adults to older adults who love to read in their free time.

Process

I wanted to use a hero image to let the user know right off the bat without reading what his page  is about. There almost no content on here and still gets the message across. This mock up shows only 3 new books, however this list could be as long or short as the business needed.

I used mainly a serif typeface because I personality associate reading paper books with serifs because it’s the typeface I often see a lot in classic books.

What I believe needs more work is the footer and the book icons. The footer stands out way too much and I believe needs a color on brand more and for it to be less eye catching. Also, the icons for the books are not needed. This is taking away from the aesthetics I wanted to for.

Daily UI – Favorites

Mock up in Adobe Illustrator

Case

This would be a favorite section on something like a gaming application / community. This section could be something the user can create and have public for other users to see. Users can connect with once another based off of similar interests. The empty boxes would be the cover image of the game the user has selected as their favorite, and the title would be the title of the video game.

Process

When designing this I did not want to use the classic heart to indicate it is their favorite, I wanted something different and could stand out. I ended up going with an idea of the crown. Because this is for active video game players, I thought a crown could fit a lot of users. Crowns are used often in games from an iconic symbol to a way to represent first place.

For the heading I picked a slab typeface because it feels strong and sturdy. Having something be in your lists of favorites indicates you have strong emotions and feelings towards the game

Daily UI – Pricing

Mock up in Adobe Illustrator

Case

This pricing had 3 options. A basic, standard, and premium membership. The Free version comes with limited options. The standard option had more options. Then the premium had no limitation for its users.

Process

I designed the pricing in a way to make the users most attracted to the premium membership option. Designed in a way they felt it was worth spending a little extra. It is the reason it looks different from the others also why it was placed in the middle. The other two options would look less appealing and pushed to the side to make users feel they are not meeting their needs as well. These are techniques other sites use to influence their users.