Final Project
Webflow
Part 1
Planning
- Creative Brief: (15 pts)
- Find 5 sources of inspiration. (5 pts)
- Structure your content and create a sitemap
- Based on your sitemap, Create wireframes for your pages for Desktop and mobile. (10 pts)
All this should be submitted on a Word document.
Part 2
Marketing
- Add Google Analytics on your webflow site. Follow instructions on attached PDF. (20pts)
- SEO AdWords (20 pts)
- List keywords and location for your campaign (10 pts)
Part 3
Website
- At least 6 grid sections (20 pts)
- Minimum 3 Pages (Must include navigation between pages and have distinct layouts) (30 pts)
- Create and use two reusable components(20 pts)
- Responsive layout for Desktop and Mobile (25 pts)
- Interactive Component: Incorporate the Lightbox, Slider, Background Video or Tabs component in your site (10 pts)
- Design and Creativity (15 pts)
Creative Brief
A creative brief for a website is a document that outlines the vision, objectives, and key elements for a website project.
It's the first step in the website planning process. It serves as a guide for designers, developers, and everybody involved in the website's creation.
The brief ensures everyone is on the same page regarding the website's goals, audience, design, content, functionality, and overall project scope.
- What is this project?
- Who is it for?
- Why are we doing it?
- What needs to be done? By whom? By when?
Defining You Website Goals
- Why do you want a website?
- Who is your Public, who will visit your website?
- What do you want people to do in your website?
- How are you going to accomplish this?
- What are you offering your users?
- What should you emphasize?
The Call to Action
- Download
- Contact
- Like, Share
- Learn More
- Watch a video
- Subscribe
- Buy
Be clear on what you want people to do. Use Action words.
A call to action should encourage action, should be short, clear, and to the point.
Call to Action Examples:
E-Commerce: Add to Cart, Shop Now, Free Trial, 50% on your First Order.
Lead Generation: Sign up for our Newsletter, Download of Free Book, Register for a Webinar, Get Started, Subscribe for Updates.
Information : Learn more about..., Read Our Blog, Watch the Video about...., Follow us on Social Media, See our Case Studies.
Feedback and Interaction: Take our Survey, Comment Below, Share your Experience, Contact Us.
Non Profits: Donate, Volunteer, Support Our Cause, Join the Movement, Pledge your Support.
Technology: Download, Upgrade Now, Start Free Trial, Schedule a Demo, See New Features.
The 10 most important things to include in a creative brief.
- Background Summary: Who is the client? What is the product or service? Are there existing research, reports and other documents that help you understand the situation?.
- Overview: What is the project? What are we designing and why? Why do we need this project? What’s the opportunity?
- Drivers: What is our goal for this project? What are we trying to achieve? What is the purpose of our work? What are our top three objectives?
- Audience: Who are we talking to? What do they think of us? Why should they care? (Consider age, gender, location, income level, lifestyle, etc.)
- Competitors: Who is the competition? What are they telling the audience that we should be telling them? What separates us from them? Which ones are doing well or poorly and why?
- Brand Identity and Tone: How should we be communicating? What adjectives describe the feeling or approach?
- Content Requirements: What are we saying with this piece exactly? Are the words already developed or do we need to develop them? What do we want audiences to take away?
- Design Requirements and Visuals: Are we developing new images or picking up existing ones? If we are creating them, who/what/where are we photographing or illustrating? And why?
- Functional Requirements: Any specific technical requirements: E-Commerce, Search, Forms.
- Marheting Strategy: Focus keywords, Integration with social media, email marketing.
- Details: Any mandatory information that must be included? Preconceived ideas? Limitations and restrictions? Timeline, schedule, budget
- Legal and Compliance: Privacy policy, terms of use, Accessibility compliance.
- People: Who are we reporting to? Who exactly is approving this work? Who needs to be informed of our progress? By what means?
Creative Brief Links
Things to always keep in mind:
- Website Objectives
- Target Audience
- Competitors
- Call to Action
Why is the Creative Brief Important?
- It provides clear guidelines and goals, helping keep the project on track.
- Helps in efficient allocation of resources and time management.
- Ensures consistency in the website's design, content, and functionality.
- It helps to avoid misunderstandings and miscommunication between the client and the designer.
Brand Voice and Tone
People make snap judgments all the time, and usually, those judgments are based on appearance. Brand Voice and Tone are two key elements of a brand's identity that help to establish and communicate the brand's personality, values, and message.
What is Brand Voice?
- It is the way your product, brand or service is viewed by your audience.
- It's like a personality.
- It reflects the company values, mission and culture.
Why is it important?
- It makes your brand unique.
- It makes your clients identify with the brand.
- It creates loyalty.
Tone
- It referes to the way the brand communicates with the public.
- It helps to establish a connection with the audience, and can influence how the brand is perceived.
- It needs to be consistent, but it needs to adapt to different platforms. (you can be more informal on social media, than on the website).
- It helps build trust and credibility.
Apple
Brand Voice
- Innovative and Visionary: Focuses on pushing boundaries and shaping the future.
- Simple and Clear: Communicates with straightforward, minimalist language.
- Empowering and Inclusive: Encourages creativity and individuality in users.
- Sophisticated and Inspiring: Reflects a blend of elegance and ambition.
Tone
- Clean and Minimalist: Maintains precision and simplicity in messaging.
- Confident and Assertive: Speaks with authority without being overwhelming.
- Inspirational and Aspirational: Encourages users to "Think Different."
- Human-Centered and Warm: Connects through a focus on people and their experiences.
Adidas
Brand Voice
- Bold and Energetic: Inspires action and high performance.
- Empowering and Motivational: Encourages individuals to push boundaries.
- Inclusive and Inspiring: Connects with diverse audiences across sports and lifestyle
- Innovative and Visionary: Showcases cutting-edge design and forward-thinking values.
Tone
- Confident and Dynamic: Speaks with strength and passion.
- Authentic and Relatable: Balances professionalism with human connection.
- Modern and Aspirational: Appeals to a progressive, future-focused mindset.
- Sporty and Trendy: Reflects a stylish yet athletic lifestyle.
Harley Davidson
Brand Voice
- Bold and Independent: Celebrates freedom, self-expression, and individuality.
- Rugged and Fearless: Embodies strength and a no-nonsense attitude.
- Authentic and Timeless: Honors the brand's heritage and legacy.
- Heritage-Driven and Passionate: Honors its iconic legacy while staying relevant.
Tone
- Confident and Gritty: Delivers a bold message.
- Empowering and Rebellious: Encourages breaking free from conformity.
- Loyal and Community-Focused: Strengthens connections with passionate riders.
- Timeless and Aspirational: Balances a historic legacy with enduring appeal.
ALO Yoga
Brand Voice
- Holistic and Mindful: Centers around wellness and mindfulness.
- Empowering and Uplifting: Promotes self-care and confidence.
- Fashion-Forward and Aspirational: Combines luxury with functionality in messaging.
- Community-Oriented: Creates a sense of belonging for wellness enthusiasts.
Tone
- Calm and Soothing: Reflects tranquility and balance.
- Encouraging and Warm: Supports personal growth and positivity.
- Sophisticated and Minimalist: Highlights simplicity with elegance.
- Trendy and Inviting: Appeals to both yoga practitioners and lifestyle seekers.
Frida Baby
Brand Voice
- Candid and Hones: Addresses the real, unfiltered side of parenting without sugarcoating.
- Empathetic and Supportive: Speaks directly to parents' struggles with care and understanding.
- Humorous and Relatable: Injects wit and humor into tough parenting topics to ease the stress.
- Practical and Straightforward: Focuses on clear, no-nonsense communication for solutions that work.
Tone
- Playful and Witty: Uses humor to create a lighthearted, approachable vibe.
- Casual and Conversational: Feels like advice from a trusted friend.
- Empowering and Reassuring: Encourages parents to feel confident in handling challenges.
- Refreshing and Bold: Breaks taboos with a confident, modern approach to parenting.
Duolingo
Brand Voice
- Playful and Humorous: Makes learning fun with quirky and engaging language.
- Encouraging and Supportive: Motivates users to keep progressing in their language journey.
- Approachable and Relatable: Connects with learners of all levels and ages.
- Creative and Adaptive: Leverages storytelling and innovation to maintain interest.
Tone
- Casual and Fun: Creates a friendly, non-intimidating atmosphere for learning.
- Cheerful and Positive: Reinforces a sense of achievement and enjoyment.
- Quirky and Memorable: Stands out with a distinctive, sometimes cheeky, tone.
- Motivational and Persistent: Inspires users to stay consistent without judgment.
Color Selection
Color is one of the most powerful design elements on a website.
On average, product assessment takes only 90 seconds and between 60% and 90% of this judgment is made on the color alone!
The Color Palette
- A color palette is a combination of colors used in a design.
- A color palette can be just one color in many shades, called (monochromatic)
- You can use upt to 8 colors that complement each other.
- Pick a core color and work around it.
- You can also use an image to get a color palette.
Font Selection.
Font selection is very important in your website. It helps set the tone of your site.
Font Pairings
- Use no more than 3 font families in your project. 2 is better.
- You can use one family if you combine available weights and widths.
- Use contrast.
- Guide to font pairing basics.
- Google Font Pairing suggestions.
- Font Pairing best and worst practices.
It's Coffee Time (brief example)
Why did you pick the project you did?
- I love coffee and for the past 10 years I have been collecting a lot of information about it. With all the knowledge I have accumulated, I want to create a destination for coffee lovers to find information, inspiration, and community around their shared love of coffee. I want ot create a community that caters specifically to coffee and become a comprehensive resource for all things coffee-related.
What's it about?
- It's Coffee Time is a website dedicated to coffee culture, education, and inspiration. The website will feature articles, reviews, recipes, and other resources related to coffee, as well as a community forum where coffee lovers can connect and share their passion for coffee.
Who is your audience?
- Our primary audience is coffee lovers of all ages and backgrounds who are passionate about learning, exploring, and experimenting with coffee. We want to appeal to both casual coffee drinkers and more serious coffee enthusiasts who are looking for a deeper understanding of coffee and its culture.
What do you think should be your Brand Voice and Tone?
- Our Brand Voice and Tone should be passionate, informative, and approachable. We want to inspire and educate our audience about coffee, while also creating a sense of community and inclusivity. Our tone should be friendly and conversational, while also conveying a sense of expertise and authority.
What do you want to accomplish with this website?
- We want to create a comprehensive resource for coffee lovers to learn, explore, and connect around their shared passion for coffee. We want to establish It's Coffee Time as a leading destination for coffee culture, education, and inspiration, and to create a strong and engaged community of coffee lovers who feel connected to the brand and to each other. With time, we want to partner with Coffe brands to offer exclusive products and coffe related merchandise.
The Sitemap
What is a Keyword?
Website keywords are words or phrases that describe the content of a website or a web page. They are the terms that people enter into search engines when they are looking for information, products, or services.
Keywords are important for SEO (Search Engine Optimization).
They can directly influence the amount and quality of traffic that your site receives from search engines.
Good
- Title Tag: Fresh Organic Bread | Sunny's Organic Bakery
- Meta Description: Savor the taste of fresh, organic bread baked daily at Sunny's Organic Bakery. Located in downtown Springfield, we offer a variety of whole grain, gluten-free, and artisanal breads.
Note the use of Organic Bread - Content: At Sunny's Organic Bakery, our passion for artisanal baking shines through in every loaf of organic bread. From classic whole grain to innovative gluten-free options, our bakery in Springfield caters to all tastes
Poor
- Title Tag: Bakery, Bread, Organic, Whole Grain, Gluten-Free, Baked Goods
This title is a string of keywords with no context or brand name, which can be confusing and unappealing to users. - Deta Description: Best bakery, organic bread, gluten-free bread, whole grain, bread, bakery, organic. Visit Sunny's Bakery!
The description is repetitive and doesn't read naturally. This is what is called Keyword stuffing. - Content: Our bakery offers organic bread because we are the best organic bread bakery. If you like organic bread, visit our organic bread bakery
This content overuses the keyword "organic bread" to the point of redundancy, reducing readability and user engagement.
PX and REM
PX
- Pixel is a unit of measurement used to define the size of an element on a web page.
- It is a fixed unit of measurement.
- It is relative to the screen resolution.
REM
- REM stands for "root em".
- It is a relative unit of measurement.
- It is relative to the root element (html).
- It is a good unit to use for font sizes.
The standard font for most browsers is 16px. 1rem would equal 16px.