New Design for Newegg
- Class: Digital Imagery in Web Design
- Scope: UI Design
- Technologies: Photoshop
- Year: 2014
This week for Photoshop, we were to (re)design an app for a retail company. I chose a company I’ve been looking at a lot the last few weeks, Newegg. Also, I just bought a great Black Friday deal from them. Again, this is for a class and I’m not affiliated with the company.
For this design, I made a mockup of the required elements, and then started designing in Photoshop. I worked a lot on creating grids, a task that was substantially easier with GridGuide a plugin for PS that I was introduced to through this project. Grideguide made grid creation and erasing easy and quick. Definitely a product I’ll be using from here on out.
I used 10 and 20px margins and padding for most of the design elements, and tried to stick with touch targets of over 40 px. So even though the icons for the cart, menu, settings and search are 20×20, I set them 20px apart so that touch targets of 40×40 could fit. I also used paragraph styles to make it easier to adjust fonts for the different parts of the UI. (I wish I could find Object styles for PS… but I don’t think they have them.) After the grids were laid out, I designed the menu and first four products. Then I moved the product displays to the left. 20px from the menu. I then added copies of the first two products to the right of the first four, showing that they slid off screen when the menu was clicked. That is a feature of the Newegg tablet app that I liked and wanted to emphasize in this rendering.
After I tweaked the main layout, I added squares for where I wanted the icons to go. I then turned the squares into smart objects . This way I could edit them in a separate doc, and easily update them.
Next I opened the ipad image being held by a woman. I masked out the screen and the background, which were both solid white. I then placed my layout as a linked image, and added a background that I felt was interesting but not too interesting. Next I blurred the background and also blurred the screen just a little to make them feel a little more native to the original image. At this point I realised I was missing add to cart buttons, so I went back and added them to the original file. I was not looking forward to redoing my work of placing the original file. But when I went back to the iPad file, I found that it was updated already since I had originally imported it as a linked file. Thank goodness for good practice saving a few minutes.
From the best practices mentioned in class, I did the following:
- Made sure there was even spacing between like items
- ‘turned off’ color management
- used grids (a lot of grids)
- maintained alignments between different elements
- Used and named layers
- I used HSB for the secondary blue
- checked the design for colorblindess accessibility (using the two types under view->proof setups)
- Maintained touch point targets of 40×40 pts recommended by Apple, and actually made the menus 60px high based on Smashing magazine’s recommendation
Here’s the design (click for a full size image):