A Pattern Language For Web Design ProjectsHow I organize and approach my web design projects
A Pattern Language For Web Design ProjectsHow I organize and approach my web design projects
From Jakob Nielsen-Jakob’s Law of Internet User Experience:
Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know. Design for patterns for which users are accustomed.
Sometime back in the earrly 1990s I read a a classic 1977 book by architect Christopher Alexander about archictural design A Pattern Language: Towns, Buildings, Construction and as I began to learn computer programming in the late 90s I began to see a pattern language in use in the computer world. Alexanders book…
“…presents a collection of design principles or “patterns” that can be applied to various aspects of architecture, urban planning, and design.
Each pattern describes a specific problem that commonly arises in design and suggests a solution or guideline for addressing that problem. These patterns are intended to provide a common language and framework for designers, architects, and planners to create more functional, aesthetically pleasing, and human-centered environments. The idea is to encourage a bottom-up approach to design, where individual patterns can be combined and adapted to suit specific contexts, resulting in more coherent and harmonious designs.
The pattern language concept has influenced various fields beyond architecture, such as software design, organizational management, and community planning. It emphasizes a holistic and user-centric approach to design, focusing on the needs and experiences of people who will inhabit or interact with the designed space or system.”
And then sometime around 2002 Douglas K. van Duyne, Dr. James A. Landay, and Jason I. Hong wrote the web design classic The Design of Sites and excerpted from that book:
Patterns communicate insights into design problems, capturing the essence of the problems and their solutions in a compact form. They describe the problem in depth, the rationale for the solution, how to apply the solution, and some of the trade-offs in applying the solution.
Patterns were originally developed by the architect Christopher Alexander and his colleagues, in a 1977 groundbreaking book called A Pattern Language: Towns, Buildings, Construction (Oxford University Press). Patterns, he said, can empower people by providing a living and shared language “for building and planning towns, neighborhoods, houses, gardens, and rooms.” Alexander intended for patterns to be used by everyday people to guide the process of creation, whether designing a house for themselves or working with others designing offices and public spaces. By creating a common language, would-be designers could discuss and take part in the design of the spaces in which they worked, lived, and played. Alexander’s patterns were also a reaction against contemporary architectural design, which he felt did not take enough of human needs, nature, growth, spirituality, and community into consideration.
Alexander’s emphasis was on an entire language for design. He felt that individual, isolated patterns were of marginal value. By connecting related patterns, and by showing how they intertwine and affect one another, he believed he could create an entire pattern language that was greater than the sum of the individual parts.
Web design patterns make up a language that you can use in your daily work. In fact, though you may not know it, you may already be using some form of pattern language to articulate and communicate your designs. The patterns might reflect your own experiences using the Web. You might have picked them up from another site. They could even come from an insight you learned from a successful design you developed in the past.
I noticed that in regard to computer programming myself.
In early 2018 I listened to and read Donald Miller’s Building a StoryBrand: Clarify Your Message So Customers Will Listen and discovered many similarities in the thinking again with the topic of Alexander’s Patter Language book. Both of them have helped shape my webdesign thinking methods and PATTERNS. There are patterns of storytelling, workflow and code that repeat themselve over and over again. Building a StoryBrand:
“…is a book about using the principles of storytelling to clarify your brand’s message and effectively engage your customers. Miller introduces the concept of the “StoryBrand Framework,” which involves positioning your customers as the heroes of your brand’s story and casting your brand as the guide that helps them overcome challenges and achieve their goals. The book provides practical advice and steps to create a clear and compelling brand message that resonates with your audience and drives business success.”
And Miller has provide a framework or model for building websites:
“A StoryBrand website is a type of website designed using the principles of the StoryBrand framework, created by Donald Miller. The framework is designed to help businesses clarify their messaging and engage with their customers in a more compelling and effective way. The goal is to create a website that clearly communicates the value proposition of the business, addresses the needs of the customers, and guides them through a coherent and engaging narrative.”
The StoryBrand Framework:
- Clear and Compelling Messaging: A StoryBrand website starts with a clear and concise message that addresses the pain points or challenges of the target audience. It focuses on how the business can provide solutions to these challenges.
- Hero and Guide: In this framework, the customer is the hero, and the business is the guide that helps the hero (customer) overcome obstacles and achieve their goals. This concept is reflected in the website’s content and design.
- Engaging Storytelling: Storytelling is a central aspect of the StoryBrand approach. The website should present the business’s message and offerings in the form of a narrative that resonates with the audience emotionally. This helps create a deeper connection and engagement.
- Clear Call to Action (CTA): Each page on the website should have a clear and prominent call to action. This guides the user on the next steps to take, whether it’s signing up for a newsletter, making a purchase, or contacting the business.
- Simplified Navigation: The website’s navigation should be intuitive and easy to understand. Users should be able to quickly find the information they are looking for without confusion.
- Visual Design and Branding: The visual design of the website should align with the business’s branding and reflect the story being told. Consistent use of colors, fonts, and imagery helps create a cohesive and memorable experience.
- Customer-Centric Approach: The website should focus on how the business’s products or services can directly benefit the customers. This involves highlighting the transformation that the customer can achieve by engaging with the business.
- Testimonials and Social Proof: Incorporating customer testimonials, success stories, and other forms of social proof can help build trust and credibility with the audience.
- Mobile Responsiveness: Given the prevalence of mobile devices, it’s crucial that the website is responsive and looks and functions well on various screen sizes.
- StoryBrand Framework Elements: The framework includes specific elements like the Problem, Solution, Plan, and Call to Action. These should be incorporated into the website’s content and structure.
- Minimized Jargon: Complex industry jargon should be avoided or explained in simple terms to ensure that the message is easily understood by a wide audience.
- About and Contact Pages: The About page should focus on the business’s mission, values, and how it can help the customers. The Contact page should provide easy ways for customers to get in touch.
A StoryBrand website aims to engage visitors by telling a compelling story that resonates with their needs and desires. By following the framework’s principles, businesses can create a more effective and impactful online presence that leads to better conversions and customer engagement.
This Page Is Under Development
Some Sample Web Design Projects
Where and How Do I Work?
While I work out of my home office in Avon CT and can easily meet with clients in the surrounding Farmington Valley and Hartford county communities such as Simsbury, Canton, Bloomfield, West Hartford, Farmington, Burlington and Bristol I also travel back to Fairfield county CT and Westchester county in New York where I spent my whole life up until 2015. I also work with small businesses from around the United States and Canada and I even have a few clients scattered on other continents too. I use tools like GoToMeeting, Fuze, and Skype for virtual meeting and training sessions and make recordings of those sessions so that the clients I work with can reference them again later too.
While you are looking at my own “personal-resume-type-website” I am the chief cook and bottle washer for ParadigmProjects.com where I work on business process improvement projects for architects, builders remodelers contractors and other members of the home & garden industry based on my lifetime experience there and TheSmallBusinessSystems.co where along with my team of associates provide those same kinds of services to other businesses too.