Project: Playing with UI bits

UI Challenge designs

Small bits of design to focus on how different web elements can be styled

These are UI sketches for a challenge. The paint-by-number kit store bits are my favorite.

chart to view sales status by day of week
Sales analytics screen showing days of the days of the week in each quarter. This screen allows the seller to see data for all Mondays in Q2, for example. Clicking on the Monday column dot in the Q2 row shows a popup of all Mondays in that quarter with totals for how many of each item sold.
email invoice described in caption
Email receipt. Shows the store name, what was purchased, total, payment method, when to expect shipment, how to contact with questions, and photos with links to the item ordered and similar items in the store.
pop up window of added item, with a photo and title of the item added, and buttons to choose what to do next.
Popup/overlay. The visitor has added an item to their shopping cart, and the popup shows them the added item, gives them an opportunity to go to the cart or keep shopping, or choose another item they might be interested in.
countdown
Countdown screen. The hands of the clock would move, the numbers change of course, and the little picture would wiggle a little after pressing the "ready to win" button. There is a little counter to see how many submissions there are.
Chatbox. The chat icon would be sticky on the right side of the screen, and this screen pops up when clicked. The name of the person you are talking to is in a box and your message is in a colored box
store item
Store, single item. Items in the same category can be scrolled horizontally (along the top) and info about the particular items shows up when the item is in the center.
Store, another view.
Golf leaderboard with 1-5 rank, country flag, photo, =/-, number of events, points, and wins columns.
Redesigned a google leaderboard for FedExCup golf standings. Added a photo of the player, link to the next tournament, and cleaned up spacing to improved legibility.
flash error message
Flash Message. This is an error message, showing the required email box needs to filled in
social share
Social Share.
music player
Music Player. A different user in my fake app. Their profile offers some songs viewers can play. The album cover is inside the circle, and the purple shows the status for the length of the song. The volume bar gets a little wider as the volume goes up.
error page
404 error screen. The app logo is in the upper right corner and offers a search box.
settings screen
Settings. The user can change their profile information, make the profile private, and access the screen to change their user theme (this one is floral colors)
profile screen with the elements listed
User Profile. Shows a user profile with photo, name, location, recent social media posts, and images they've posted to social media sites
This is a redesign of the laugh.ly app icon
The app icon smile is easy to see at small sizes, so the meaning is reinforced.
mortgage calculator image
Mortgage Calculator. The numbers can be typed in the box, or the sliders can drag to adjust the numbers. Either method changes the monthly payment amount on the fly.
Slider adjustments
Price: drag up for higher price, down for lower.
Down payment: up for higher, down lower; % adjusts automatically in box.
Loan: higher for different fixed options; lower for adjustable rates.
Interest rate: starts with the daily rate
screen shot
Different size landing page
landing page with image of wedding table setting in background.
Landing page. Entire landing page for a fictional company.
Credit card area. I revamped an existing one instead of starting from scratch.
simple sign up screen
Basic sign up form screen sized for an app.