Skip to main content

Portfolio

Portfolio

Pottery Barn Teen

Home Decor Retail
The Pottery Barn Teen logo

Things to Know About the UI Approach at Pottery Barn Teen:

  • The markup I wrote for the pages below are within a div with an ID of "content."
  • Most pages on pbteen.com have separate desktop and mobile files rather than a single responsive/adaptive page for both phones and computers.
  • Instead of changing the page layout for different viewport widths, most desktop pages scale the images, margin, padding, and font sizes between 990px and 1440px viewport widths. Once your browser is below 990 width, the scaling stops. Same if your browser is wider than 1440. Except for Design Services, you can see this in action by visiting any page below, changing your browser width, and observing the computed values for font sizes.
  • Mobile pages also use this scaling approach, but the scaling is not limited to a range of viewport widths.
  • The intent of this scaling approach is to maintain the single design of a page.
The Hope for Flowers by Tracy Reese logo

Tracy Reese Landing Page

Mobile | Desktop
  • New landing page
  • All hand coded except for the outer structure of the product scroller. I did provide the markup and styles for each product item.
  • Features BEM naming conventions
The Monique Lhuillier and Pottery Barn Teen logos

Monique Lhuillier Landing Page

Mobile | Desktop
  • Existing landing page
  • I updated much of the CSS and HTML to match the page's design refresh.
  • I reused some of the existing classes and naming conventions to save on time. When I had opportunities to create my own class, I used both BEM and atomic naming conventions.
The Pottery Barn Teen Design Services logo

Design Services

Mobile | Desktop
  • Existing landing page
  • I updated much of the CSS and HTML to match the page's design refresh.
  • I reused many of the existing classes and naming conventions to save on time.
HARRY Potter logo

Harry Potter - About the Collection Landing Page

Desktop
  • I updated the graphics and much of the markup and styles to match the page's redesign
  • All hand coded except for the slideshows and fading photos which use components built by another team