LDWW
Responsive Website Design
What’s a Rich Text element?
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
2022
Building a dynamic interactive story to showcase an agency's work
The Assignment
Full-service creative agency LDWW hired Good Work to replace their dated site with a sleeker, more stylized version that could showcase their capabilities through an engaging work presentation. Over the previous two years, LDWW’s team, high-profile client roster, and portfolio had more than doubled in size. The new website needed to reflect this expansion with a more engaging narrative to depict the team’s nimble, no-bullshit personality and creative talents to prospective clients and new hires.
The Solution
The goal of this website iteration was to present the agency’s offerings in an interesting way rather than serve as a full portfolio. This liberated us to focus on designing the homepage as an animated narrative. The idea was that as the user scrolls down the page, more of the story would be unveiled with each section. Big ideas could shine through between glimpses of work showcasing the agency's proficiency across media and mediums.
We produced a bold design that exudes confidence but doesn’t distract from the high caliber of work. Visitors to the website—whether potential clients, company decision-makers, or job applicants—should be impressed and intrigued to learn more. The team’s vision for the website was always focused on bold typography and a tight palette of black and white. While staying true to that aesthetic, we delivered an expressive user experience through clever animations and surprising interaction effects.
The Process
Wireframes
After discovery, I developed wireframes based on the client's content handover. Despite the highly custom look of this site, each block is flexible and editable on the backend through Craft CMS. Wireframes provide clients with a solid understanding of the bones of their site and allow me to strategize a block system that I can build out with development in mind.
Block Design
The outlined boxes in the wireframes above eventually form the blocks shown here, within my "block guide" that I hand off to developers. Each block is developed individually, so I include designs at various screen sizes along with extensive notes about interactive states and necessary variations to styles.
We produced a bold design that exudes confidence but doesn’t distract from the high caliber of work. Big ideas can shine through between impressive glimpses of media.
Art Direction
Kristy Morgan
Ron Villegas
Project Management
Ariel Kidwell
Development
Good Work
