React Redesign

Apr.22.2018 | 5m Read | ^UX

Apr.22.2018 redesign of

Home: Home redesign

The main nav ('mac iphone ipad', etc) now sports svg icons. It's 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 was chosen VS tweaking per page. To liven up the static content I made the background transparent so it would have more variety based on the underlying page. This challenges the readability so a variety of font and div shadows were 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's assembled kind of like the inverse of material theory to maintain some flatness (while retaining clarity).

Note again the footer was 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's optimized for light colors. It's possible to tweak it, however I passed since it was currently too costly mana wise. Another possible solution is that browsers in the not-to-distant future are upgraded to support 16-bit and/or 32-bit color. This is entirely possible since browsers already handle gradients different and some are smoother or have better color interpolation.

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's 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's 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 was replaced with fonts/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 (ie, 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 was overlayed with a white gradient. It was a bit too crisp and jarring so it was necessary to knock it back with some 'haze' into more of a bg style image. Headphones were chosen for the support icon. It works well, but I don't know if Apple would okay it since it may not be an officially approved product. A lot of the UI was 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's ready to be hooked up via google or an elastic search lib. Transparency was added and the hard separation between the magnify glass and the field was 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 (ie, 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's just a media query @ width on the main nav to restyle it.

I'm not a fan of the current black bg apple does with it's mobile nav, it's eye-straining high contrast and 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's 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 (ie, like the original black mobile nav) I'd like to retain some standardized transparency.

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

       : NEWS