Men / Sneakers / Running
New Balance
X91 / Salmon & Grey
$129
Size
Add to cart
Men / Sneakers / Running
New Balance
X91 / Salmon & Grey
$129
Size
Add to cart
Challenge: Create a purchase display for a sneaker
Behind the design: The design was inspired around Virtual Reality headsets.
I liked the idea of being in a shoe store from the comfort of home.
The shoe being displayed at a dynamic angle with a background that made the shoe
pop out a little more. Meanwhile, the text field below included breadcrumb tags for
the user to know where they are in the store, but also would give the option to go
back to that category upon clicking/tapping for easy navigation.
The brand name in bold and on the top left hand side creates visual hierarchy and
highlights the important details from left to right.
Finally, an add to cart button that is easy to read and a color selected with the intent
of creating desirability and urgency. The button is sized the width of the text above
for consistency and this makes it an easier target for the user to click to avoid any
frustration or mishits.
Behind the design: The design was inspired around Virtual Reality headsets. I liked the idea of being in a shoe store from the comfort of home.
The shoe being displayed at a dynamic angle with a background that made the shoe pop out a little more. Meanwhile, the text field below included breadcrumb tags for the user to know where they are in the store, but also would give the option to go back to that category upon clicking/tapping for easy navigation.
The brand name in bold and on the top left hand side creates visual hierarchy and highlights the important details from left to right.
Finally, an add to cart button that is easy to read and a color selected with the intent of creating desirability and urgency. The button is sized the width of the text above
for consistency and this makes it an easier target for the user to click to avoid any frustration or mishits.
Behind the design: The design was inspired around Virtual Reality headsets. I liked the idea of being in a shoe store from the comfort of home.
The shoe being displayed at a dynamic angle with a background that made the shoe pop out a little more. Meanwhile, the text field below included breadcrumb tags for the user to know where they are in the store, but also would give the option to go back to that category upon clicking/tapping for easy navigation.
The brand name in bold and on the top left hand side creates visual hierarchy and highlights the important details from left to right.
Finally, an add to cart button that is easy to read and a color selected with the intent of creating desirability and urgency. The button is sized the width of the text above for consistency and this makes it an easier target for the user to click to avoid any frustration or mishits.
The padding was set to 16 pixels around the information section of the card. 16 Pixels also set between the main content and the button for hierarchy, letting the users take in the information in the order that was intended.
There are 8 pixels between the breadcrumb tags, the brand name and the style and color
of the shoe. This lets the user scan where they are in the store, what brand they’re looking at, and which product they areselecting all at once without missing any information.
The padding was set to 16 pixels around the information section of the card. 16 Pixels also set between the main content and the button for hierarchy, letting the users take in the information in the order that was intended. There are 8 pixels between the breadcrumb tags, the brand name and the style and color of the shoe. This lets the user scan where they are in the store, what brand they’re looking at, and which product they areselecting all at once without missing any information.
The padding was set to 16 pixels around the information section of the card. 16 Pixels also set between the main content and the button for hierarchy, letting the users take in the information in the order that was intended. There are 8 pixels between the breadcrumb tags, the brand name and the style and color of the shoe. This lets the user scan where they are in the store, what brand they’re looking at, and which product they areselecting all at once without missing any information.
johndoe@hotmail.com
••••••••••••
Password
Forgot password?
Log in
Don’t have an account?
Create Account
johndoe@hotmail.com
••••••••••••
Password
Forgot password?
Log in
Don’t have an account?
Create Account
Challenge: Create a log in field
Behind the design: Wanted a (mostly) monochromatic design with the lighter blue background and dark blue interactive options in the foreground. The text fields and buttons were given thicker borders at the bottom and shadows as well to add depth and lift those elements off of the page.
Behind the design: Wanted a (mostly) monochromatic design with the lighter blue background and dark blue interactive options in the foreground. The text fields and buttons were given thicker borders at the bottom and shadows as well to add depth and lift those elements off of the page.
To make sure the design was consistent, the padding was set
to 16 pixels on the sides and 24 pixels for the top and bottom. The email, password, and log in button sections were separ-
ated by 12 pixels to display that they were all seen as part of
the same section. The create account section is separated by
24 pixels to indicate a separate pathway to follow if they have
no created any log in credentials.
To make sure the design was consistent, the padding was set to 16 pixels on the sides and 24 pixels for the top and bottom. The email, password, and log in button sections were separated by 12 pixels to display that they were all seen as part of the same section. The create account section is separated by 24px to indicate a separate path-way to follow if they have no created any log in credentials.
To make sure the design was consistent, the padding was set to 16 pixels on the sides and 24 pixels for the top and bottom. The email, password, and log in button sections were separated by 12 pixels to display that they were all seen as part of the same section. The create account section is separated by 24 pixels to indicate a separate pathway to follow if they have no created any log in credentials.
Challenge: Create an isometric credit card design
Behind the design: The idea was to have three credit cards stacked and floating on top of
each other to create a dynamic display of the three variants. I used a gradient background
for each card to add visual interest and separation while remaining clear and legible. An important detail I learned in this process was using a monospace font in order to make each number the same width for consistency in the card numbers. It makes those important details easy to read.
This design has more aesthetic value than symmetry, so most of the design itself is not based on pixels for consistency like other designs on this list.
Behind the design: The idea was to have three credit cards stacked and floating on top of each other to create
a dynamic display of the three variants. I used a gradient background for each card to add visual interest and separation while remaining clear and legible. An important detail I learned in this process was using a monospace font in order to make each number the same width for consistency in the card numbers. It makes those important details easy to read.
This design has more aesthetic value than symmetry, so most of the design itself is not based on pixels for consistency like other designs on this list.
Peter Parker
Busiest photographer on the web..
You can find me at the Daily Bugle.
peterparker@dailybugle.com
Phone Number
718-996-2123
Website
www.dailybugle.com
••••••••••••
Password
Save
Cancel
Peter Parker
Busiest photographer on the web..
You can find me at the Daily Bugle.
peterparker@dailybugle.com
Phone Number
718-996-2123
Website
www.dailybugle.com
••••••••••••
Password
Save
Cancel
Challenge: Create a field for user details
Behind the design: This was designed with similar dimensions to the log in field on this list,
so the spacing and consistency are the same. The icons in each field are meant to represent the intended purpose of each category for more readability. Each icon should showcase what the section requires without necessarily needing to read the title for the field. This accounts
for different users regardless of their experience with technology or what language they may speak. These icons may actually help users identify and process things faster, and little things like that add up in contributing to the ease of use of any digital product. The “Save” button is highlighted with the intent to lead the users eye quickly to the action desired for completion and show clickability.
Behind the design: This was designed with similar dimensions to the log in field on this list, so the spacing and consistency are the same. The icons in each field are meant to represent the intended purpose of each category for more readability. Each icon should showcase what the section requires without necessarily needing to read the title for the field. This accounts for different users regardless of their experience with technology or what language they may speak. These icons may actually help users identify and process things faster, and little things like that add up in contributing to the ease of use of any digital product. The “Save” button is highlighted with the intent to lead the users eye quickly to the action desired for completion and show clickability.
Challenge: Create an online shopping experience
Behind the design: This is my favorite design I got to do during the challenge. With this
design, in particular, I put my focus into creating an emotional response or feeling when
using this product. I wanted to create the feeling of being outside under clear blue skies
on a farm, putting a user at ease with a calming effect.
There were a few iterations of this where I played with different colors but I went with a sky blue gradient for the background, and a vibrant orange to lift itself off of the page and let
the user know where to click. The cart icon up top gives the user access to their shopping
cart and the red dot over it indicates that they have items in their cart, ready for checkout. Hierarchy is represented by the large title of the shopping section up top, and options to
click on a subcategory below with tags (Orange to highlight what section you’ve selected).
Some challenges I faced with this design was placement of the sun in the background so
that it didn’t affect readability and if it would potentially be distracting. Another challenge
was getting the fruit to all appear the same in every card. With limited resources and having
to pull images from free stock photo websites, not every picture was taken at the same angle, size, etc... Seen above, there are strawberries very close to the title below, but with only one photo I could find that matched the look of the others, this was my only option. If I were to make it smaller, it would be visibly inconsistent. Cropping the image would take part of the bowl and the image would seem off-center. A reasonable solution to this would be to simply use Photoshop to remove them, which is a skill I don’t (yet) have.
Behind the design: This is my favorite design I got to do during the challenge. With this design, in particular, I put my focus into creating an emotional response or feeling when using this product. I wanted to create the feeling of being outside under clear blue skies on a farm, putting a user at ease with a calming effect.
There were a few iterations of this where I played with different colors but I went with a sky blue gradient for the background, and a vibrant orange to lift itself off of the page and let the user know where to click. The cart icon up top gives the user access to their shopping cart and the red dot over it indicates that they have items in their cart, ready for checkout. Hierarchy is represented by the large title of the shopping section up top, and options to click on a subcategory below with tags (Orange to highlight what section you’ve selected).
Some challenges I faced with this design was placement of the sun in the background so that it didn’t affect readability and if it would potentially be distracting. Another challenge was getting the fruit to all appear the same in every card. With limited resources and having to pull images from free stock photo websites, not every picture was taken at the same angle, size, etc... Seen above, there are strawberries very close to the title below, but with only one photo I could find that matched the look of the others, this was my only option. If I were to make it smaller, it would be visibly inconsistent. Cropping the image would take part of the bowl and the image would seem off-center. A reasonable solution to this would be to simply use Photoshop to remove them, which is a skill I don’t (yet) have.
Behind the design: This is my favorite design I got to do during the challenge. With this
design, in particular, I put my focus into creating an emotional response or feeling when
using this product. I wanted to create the feeling of being outside under clear blue skies
on a farm, putting a user at ease with a calming effect.
There were a few iterations of this where I played with different colors but I went with a sky blue gradient for the background, and a vibrant orange to lift itself off of the page and let the user know where to click. The cart icon up top gives the user access to their shopping cart and the red dot over it indicates that they have items in their cart, ready for checkout. Hierarchy is represented by the large title of the shopping section up top, and options to click on a subcategory below with tags (Orange to highlight what section you’ve selected).
Some challenges I faced with this design was placement of the sun in the background so that it didn’t affect readability and if it would potentially be distracting. Another challenge was getting the fruit to all appear the same in every card. With limited resources and having to pull images from free stock photo websites, not every picture was taken at the same angle, size, etc... Seen above, there are strawberries very close to the title below, but with only one photo I could find that matched the look of the others, this was my only option. If I were to make it smaller, it would be visibly inconsistent. Cropping the image would take part of the bowl and the image would seem off-center. A reasonable solution to this would be to simply use Photoshop to remove them, which is a skill I don’t (yet) have.
In summary...
Working with user interfaces is a passion of mine, and a passion that I’m excited to keep exploring as my career progresses. The challenge isn’t to just make something that looks
great, but taking into account things like accessibility standards, brand guidelines, and/or streamlining the process and not overcomplicating the design so that it remains easily
usable and readable for the intended audience - the user.
I’m continuing to learn more about user interfaces regularly citing influences like AirBnB, Spotify, and Apple as the standard but also not to be copied. I’d like to design an app from top
to bottom one day and have the honor of the world using that same app to better their lives.
Working with user interfaces is a passion of mine, and a passion that I’m excited to keep exploring as my career progresses. The challenge isn’t to just make something that looks great, but taking into account things like accessibility standards, brand guidelines, and/or streamlining the process and not overcomplicating the design so that it remains easily usable and readable for the intended audience - the user.
I’m continuing to learn more about user interfaces regularly citing influences like AirBnB, Spotify, and Apple as the standard but also not to be copied. I’d like to design an app from top to bottom one day and have the honor of the world using that same app to better their lives.
Working with user interfaces is a passion of mine, and a passion that I’m excited to keep exploring as my career progresses. The challenge isn’t to just make something that looks great, but taking into account things like accessibility standards, brand guidelines, and/or streamlining the process and not overcomplicating the design so that it remains easily usable and readable for the intended audience - the user.
I’m continuing to learn more about user interfaces regularly citing influences like AirBnB, Spotify, and Apple as the standard but also not to be copied. I’d like to design an app from
top to bottom one day and have the honor of the world using that same app to better their lives.