PARK HOLIDAYS - Responsive Site
Recent work designing systems for CMS driven site. Flat designs from photoshop, tested in UXPin, created as styles in CSS to be incorporated into a bespoke CMS platform. Originally planned with a WYSIWYG drag & drop page builder so all elements designed as modular template blocks.
Creative & UI/UX Direction from Martine Gardener
Homepage
Photoshop desktop and mobile view tests. Hero images designed to work portrait or landscape, buttons accommodate stacking 2 lines high. Working out visual language for links: new page vs function.
Interface Blocks
Tiling 3 to desktop, 1 to mobile, each block is an object with properties that can be generated or edited through the CMS . A consistent visual language was created to work across different lengths of content, all screen sizes and touchscreen devices; the colour palette functional first.
Ad Blocks
Editable CMS blocks with 3 layers to create touts that look as polished as flat images, but completely flexible in layout for whatever size or shape needed for responsiveness: CSS grad background, tiling .png background pattern, HTML text & .png assets.
Graphics and Icons
Style created to support technical and financial information. Facilities icons (bottom row) optimised for visual legibility at very small size. All icons saved out as .svg, uploaded into an icomoon font to be used any size, any context, while always hi-res.
PROTOTYPE - Responsive Calendar
UXPin prototype. With seasons cutting into each other, prices changing weekday to weekend, I wanted to design a legible & responsive layout in a calendar with clickable day blocks. On Mobile, the months stack into tabs to shorten the webpage to a reasonable length.
RESPONSIVE EMAIL DESIGN
HTML template to hold variety of content types and lengths. All blocks responsive & HTML generated, no need for text-baked images. Consistent, rich experience on all email clients & devices.
BOOKING PROCESS WIREFRAMES - Mobile View Test
Sketching out booking states in UXPin for mobile view to accommodate minimum finger hotspots.