React Redesign

Apr.22.2018 | 5m Read | ^UX

Apr.22.2018 redesign of

Home: Home redesign

The main nav ('mac, iphone, ipad', and x idevice) now sports svg icons. It is a custom headroom component with a large, soft shadow (dark blue) optimized for light grayish backgrounds. Being a fan of depth, I decided to go with a '3D'/embossed look for the down CSS style.

Footer: UX/UI Footer redesign

This has all of the necessary starting links and info. Not all of the routes are working, but the relative ones to the main nav are. Here a templated style is chosen VS tweaking per page. To liven up the static content I made the background transparent so it can have more variety based on the underlying page. This challenges the readability so a variety of font and div shadows are used to maintain visibility per page/color theme.

The main off links are light blue and flat styled, but the host of necessary links required more colors for separation. In this case I went with a slight and hard shadow. The text has a heavy blurred shadow and indents for the sub links. It is assembled kind of like the inverse of material theory to maintain some flatness (while retaining clarity).

Note again the footer is currently set to 'Support' here because this is a static templated footer.

Mac: UX/UI Mac redesign

Here we get the first taste of the scrolling sub nav. The dark colors make the nav shadow's gradient a bit jarring since it is optimized for light colors. It is possible to tweak this shadow, not currently worth the time. Browsers in the not-to-distant future may be upgraded to support 16-bit or even 32-bit color. This is entirely possible since browsers already handle gradients different and some are smoother or have better color interpolation (like Chrome).

iPad: UX/UI iPad redesign

That big gradient is back to looking smooth again here thanks to the light background. Also take note of the golden pop-up tabs or 'bookmarks' on the sub nav. These are just styled divs to maintain load speed. They replaced the tiny orange words 'New' from This 'New' design choice never really made sense to me. A gold theme is a metallic accent in the mind, so you can pretty much add it to everything and maintain a solid consistency.

iPhone: UX/UI iPhone redesign

Changed the original tag-line from the rehashed 'Say Hello to The Future' to 'Own the Future'. This works since we're progressing towards the user purchasing the product from the original pitch -- and more importantly -- it is less wordy. This helps visually balance the text more with the added type from links.

Here we can also see how well the multiple golden tabs work vs multiple 'New'. Simply having 'New' over and over in orange drains the 'Newishness'. A sleek tab with some pop appears more organized and clean, especially when placed gainst other text from the main and sub navs.

Watch: UX/UI Watch redesign

This is the first page where I replaced the main logo png with fonts and reused the apple icon. 'SERIES 3' is also replaced with text. Font rendering is slightly off per browser platform, but it is not bad. A better choice may be to replace the logo with an additional svg if such precision over load speed is needed.

TV: UX/UI TV redesign

The Apple 4k TV logo is replaced with fonts and icons. Once again it is slightly off, but even closer than the 'SERIES 3' section of the Apple Watch page. I removed the original city scape banner image below the sub nav because it breaks the templated style of the other pages and makes everything less spacious. One option I'd like to consider is recycling the city scape image by having it funnel down into the 4k box (like by editing in Photoshop or possible Javascript animation/video using simple 3D transforms). Your eyes should be lead downward to more content and selling the product 'in action' vs just decorating the page in an unusual manner.

Music: Music UX/UI redesign

Not a fan of the black. This page breaks the style guide worse than Apple TV. I included the original animating video with the fallback png on fail. What really irritates me too is how much the video/png is outside the initial frame on a standard 1080p screen on site load. Would prefer a similar treatment as the other pages, but left this black background in because it blends with the existing video. Plus cinema themes are generally black (screen matting and dark theatres) so this style somewhat works under the umbrella of entertainment media.

Support: Support UX/UI redesign

The original Apple Store background image here is overlayed with a white gradient. It is a bit too crisp and jarring so the logo needed to be knocked it back with some 'haze' into more of a bg style image. Headphones are chosen for the support icon. It works well, but I don't know if Apple shall approve it since it may not be an officially approved product. A lot of the UI is cleaned up, mainly by placing icons into the sub nav and adding a '(+) More' for loading more elements.

The search field doesn't process input, but it looks posh. It is ready to be hooked up via google or an elastic search lib. Transparency is added and the hard separation between the magnify glass and the field is removed. Centering and scaling is slightly different than the original, but we get a much better view of the Apple Store, even with scaling at 1080p.

I brought the footer up, which I think could be really useful for support (like functioning as a mini sitemap). And we also get a good demo of the footer transparency in action. It doesn't quite fit in a 1080p frame, but I'm pretty happy with the results as they are at this point.

Mobile: mobile redesign

This is the current MVP state of the 'Mobile' desktop site. It is just a media query at width on the main nav to restyle it.

I'm not a fan of the current black bg apple does with its mobile nav, it has eye-straining high contrast and is boring. Transparent grays and browns are much more classy and luxury brand centric I think. The original animation is also a bit over-fancy and awkward for me to too -- in particular it lags to get the menu and type in place and ready for use. Nothing really says 'Apple' to me about it and feels kinda tacked-on. I think at one point maybe the search in OS X looked like this and maybe that is where it comes from.

Right now my version of the mobile interface is usable, but it really needs some better sizing/spacing for 'fat fingers' (aka the test case minimum size for mobile UI). The main nav bg could be tweaked to be less transparent (or more opaque). But even if usability or style requires mobile menu to fill the screen (like like the original black mobile nav) I'd like to retain some standardized transparency.

Like this post? Read more from the ^UX topic.

       : NEWS