Portfolio
Pottery Barn Teen
Home Decor Retail
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.
Tracy Reese Landing Page
- 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
Monique Lhuillier Landing Page
- 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.
Design Services
- 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 - About the Collection Landing Page
- 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