Building A Client Website From Scratch – Building A Brand, Episode 8

New Section

The introduction to Blind, a brand strategy design consultancy based in Santa Monica, California, and an overview of the rebranding process for a company.

Building a Brand Logo

• Blind collaborated with Hamilton Family Brewery to design a new logo that was simpler and more versatile than the previous one.

• Despite initial satisfaction with some logo designs, Josh pushed for more symbolism and meaning in the logo, leading to a breakthrough by Ben and Matthew.

Website Development Process

• Ben and Mathew focus on creating the Hamilton Family Brewery website as the digital platform for brewery information.

• The website development process starts with discovery to understand user goals before moving into site mapping, wireframing, visual design, and development phases.

User Profiles & Site Mapping

• Understanding user profiles like Jessica (the soccer mom) and Kurt (the beer snob) helps tailor content on the website to meet their specific needs.

• Practical information is essential for Jessica while Kurt requires detailed beer information with beauty shots on individual beer pages.

Homepage Design & Navigation

• The homepage features video headers and clear calls-to-action like booking tours to engage users immediately.

Meeting Overview

In this meeting, the team discusses the layout and design of a website for a brewery, focusing on elements like video introduction, booking tours, beer pages, and visual design refinements.

Initial Website Layout Design

• The team aims to create a user-friendly website aligned with the brewery's vision.

• Proposal includes starting with a video introduction followed by easy tour booking options.

• Beer page layout to feature various beer types for different customer preferences.

Website Development Discussion

• Consideration of future website management - in-house or outsourced.

• Emphasis on simplicity for easy future updates and control by the brewery owners.

Visual Design Refinement

The team reviews initial design drafts focusing on color schemes, textures, and overall visual appeal of the website.

Initial Design Feedback

• Reviewing homepage design featuring blue filters and background videos.

• Discussion on scrollable beer display versus carousel format for better user experience.

Visual Elements Evaluation

• Concern raised over excessive use of textures impacting site coherence.

• Proposal to establish clear rules for texture usage to maintain visual consistency.

Design Elements Appreciation

Highlighting specific design elements appreciated in the draft designs presented during the meeting.

Noteworthy Design Aspects

• Positive feedback on age verification element's simplicity and effectiveness.

Design Elements and Visual Presentation

The speaker discusses the design elements and visual presentation of a website, focusing on aspects like layering, contrast, color pops, hover effects, and card flipping.

Beers on Tap Design

• The design features subtle changes with layered visuals that create depth.

• Emphasis is placed on the use of contrast between light and dark to enhance the visual appeal.

Color Pops and Hover Effects

• Different pops of colors are highlighted in the background design.

• Experimentation with various hover effects for buttons is mentioned, adding interactivity to the user experience.

Card Flipping Feature

• Each beer is represented as an individual card that flips over when hovered upon.

• The new version of this feature is described as more refined and visually appealing compared to previous iterations.

Development Challenges and Solutions

The team faces challenges in website development related to maintenance issues with WordPress. They explore using Webflow as a visual builder for websites to streamline the development process.

WordPress Maintenance Concerns

• Maintenance challenges with WordPress are discussed due to the need for continuous updates and technical knowledge.

• Hiring external developers has been a common practice due to lack of in-house expertise.

Introduction to Webflow

• The speaker attends a conference where he learns about Webflow, a visual website builder.

• Initial skepticism towards such tools shifts after personal experimentation with building a website using Webflow.

Website Presentation and Training

The team prepares to present the finalized website design to clients while addressing concerns about training interns without coding experience on implementing changes.

Website Presentation Preparation

• Excitement builds as the team prepares to present the completed website design to clients in Hamilton.

• Anticipation surrounds showcasing new features and conducting training sessions for client usage.

Intern Training Challenge

• An intern without coding experience is tasked with building parts of the site using Webflow.

Building a Brand: Website Creation and Packaging Design

In this section, the team hands over the website to Josh and Kristen for editing. They are impressed by how easy it is to update the website. The process was surprisingly smooth, and they are confident in managing it themselves.

Handing Over Website Editing

• The team slides the laptop over to Josh and Kristen, encouraging them to edit the website easily.

• Josh finds updating the website simple and impressive, leading to a smooth handoff experience.

Surprising Ease of Website Management

• Building an easily updatable website was initially a concern, but seeing Josh manage it effortlessly was surprising.

• Updating the website took only 20 minutes, showcasing a different and efficient process from traditional methods.

Confidence in Self-Managing Website

• The team delivered a beautiful and functional website within budget, ensuring Josh and Kristen can handle updates confidently.

• Next steps involve redesigning Hamilton's packaging for retail expansion while maintaining brand identity.

Looking Ahead

• Future packaging design will focus on storytelling for retail customers as Hamilton's expands into new markets.

Conclusion