import { Image } from ‘astro:assets’; import waybackImg from ’../../assets/work/paw/way-back.jpg’; import magCoverImg from ’../../assets/work/paw/mag-cover.png’; import sitemapImg from ’../../assets/work/paw/sitemap_v1.jpg’; import cpw04Img from ’../../assets/work/paw/cpw-04.jpg’; import cpw05Img from ’../../assets/work/paw/cpw-05.jpg’; import tabletImg from ’../../assets/work/paw/device-mockup-tablet.png’; import listBlocksImg from ’../../assets/work/paw/list-blocks.jpg’; import layoutImg from ’../../assets/work/paw/cpw-11.jpg’; import wireframeImg from ’../../assets/work/paw/wireframe-rwd-article-page.png’;
Process Drives Success
The alumni magazine was looking for a design more inline with its magazine-style editorial approach. Content varied month to month, so they needed assurance that the site would always present a desirable layout regardless of content volume.
A unique aspect of this website: previous content would only be available through the archive. The website would function as a true digital magazine.
Improving the RWD Process
We had struggled to manage the wireframing and design phase in previous responsive design projects. Clients wanted to see mockups at all screen sizes for every page we designed.
I changed how we approached responsive designs as a company. I designed a process to limit the number of static comps by creating reusable HTML components and styles that could be used to layout all pages not covered by full mockups.
This transformed how we built sites and led to more efficient builds overall. The process also allowed for more iteration and time spent on actual design work.
Editorial Vision
We wanted to add more of the magazine’s editorial look and feel to the online experience.
Information Architecture
Sitemap
Content Priority
I created this Content Inventory to show at a block level the hierarchy of information for each page. We created a list of all possible blocks and used that to scaffold out all page types. Types were assigned to blocks of similar functionality to display placements.
UI Patterns
I wanted to allow flexibility in the feature list sections. No matter the number of articles, the presentation would always be desirable.
Layout Design
HTML Prototype
I designed a component template system used to create the prototype. We ended with 41 pages made from approximately 30 components with about 100 variations.
This prototype served as both a design validation tool and a production-ready code foundation that was recycled into the final Drupal build.