Xian Chen
web designer and developer

Ashen Blue

Date Modified: January 28th 2017
Focus: Ashen Blue is a delightfully minimalistic responsive web design for web portfolios. The main focus of this design is on the content being presented and the way it is fluidly and cleanly represented across multiple breakpoints. It is easy to navigate-- featuring left side navigations on dektop and hamburger dropdown on mobile, and it is lightweight-- the web experience, with the exception of Lightbox, is coded from scratch.

View it Live!   |   View Source

Wistful

Date Created: March 23rd 2015
Focus: This pratice design is a throwback to the 90s and early 2000s when layout designs were centered around imagery created in Photoshop. The challenge is to create a responsive layout design that has a quirky and fun feel similar to what blogs and personal sites look like back then.
Improvements: I removed the "wistful" copy from mobile. If this were branding, ideally it should be there.

View it Live!   |   View Source

Patterns

Date Created: Feburary 6th 2015
Focus: A pratice one page, responsive site. Minimal javascript to show/hide content and for header navigation links to scroll to user to the correct content.
Improvements: Images are too big. Ideally have three image to swap in out (for the two backgrounds loading on the page): one low quality delivered at 2x for retina, one regular desktop size image, and a mobile size image.

View it Live!   |   View Source

Squiggles

Date Created: December 2015
Focus: Responsive design practice. The aim is create a lightweight minimal website that looks good across all breakpoints.
Improvements: The homepage was designed to have minimal content but this makes it look very short on the iPad breakpoint. Possible solution is to switch to the mobile design at iPad or make some adjustments for that breakpoint

View it Live!   |   View Source

Aphedia

Date Created: February 2012
Focus: This is a table style, graphical layout design created in early 2012. It plays with textures and patterns to give the design an interesting look. The overall design is small-- 600px wide to be exact-- so although it is not designed to be responsive, with only a few lines of CSS, it can be made to look typically fine on most modern devies.

View it Live!   |   View Source