Lesson 5.1 Analyzing screen-based content

Ask two friends or family members to pick a nice-looking website at random. Study the website and answer these questions:

  • What type of website are we looking at?
  • Which industry is this website in?
  • What is its purpose?
  • Which different types of content are used?
  • How is the content presented?

Pay attention to how the website looks visually and try to identify if there are any common design trends you might pick up on. Ask yourself if these design trends are common to a certain industry or type of brand? It’s also likely that certain designed trends are common to specific target audiences. 

The web page they discovered is dedicated to the soft drink Fanta. It features a vibrant color scheme, with orange being its prominent symbol. The page caters to a youthful audience, capturing their imagination and inviting them to embark on exciting and fantastical journeys.

During their web browsing, my husband and son came across various websites, including one dedicated to Fanta, a brand under the Coca-Cola umbrella. However, it seems that the Fanta website they visited is no longer available. The webpage had an engaging and refreshing design with vibrant orange colors, utilizing imagery of oranges to evoke a summery and sweet atmosphere. The website appeared to target a younger audience, aiming to provide a fun and enjoyable experience.

This web page is dedicated explicitly to Fanta and is a section within the Coca-Cola website. It provides complete information about Fanta’s history and its origins in Germany during the 1940s. However, in Italy, Fanta saw more widespread production, leading to its expansion across Europe. Eventually, in 1955, Fanta made its way to the United States. The page showcases advertisements from that era, as well as the design of the Fanta bottle, which remained unchanged until the 1980s.

They also explored Zara’s website, known for its fast-fashion offerings. Zara’s webpage featured a minimalist design, showcasing captivating photographs of models wearing the latest fashion trends. The content focused exclusively on clothing for both children and adults. The website conveyed a clean-cut, minimalistic brand personality, exuding chicness and sophistication. The textual and graphic elements worked harmoniously to create a cohesive image that consistently communicated the desired message.

In contrast to Fanta, the Zara website had a more serious tone, appealing to both men and women interested in Thai-inspired clothing. Additionally, it aimed to cater to customers who wanted their children to have access to fashionable attire.

Task 5.2
Facelift the image

You’ve been tasked to update the Click and Collect section of the Joe’s and Bros website.

Use a prototype software of your choice to mock up one idea. You only need to do the first page of the menu (choose a location and click on ‘Start Ordering’ to open the first menu page you need to work on).

Based on the website examples we have seen today, make a list of which other changes you would make to the Joe’s and Bros website?

If I were to design a new website for Joes Bros, I would focus on several key aspects to enhance its appeal and usability. Here are some changes I would consider implementing: Layout and Design: I would create a clean, modern layout with a visually appealing design reflecting the brand’s image. This would involve selecting a suitable color scheme and fonts that align with the brand identity and create a cohesive look.

Navigation and Menu: I would revamp the navigation structure to ensure it is intuitive and user-friendly. This would involve creating a straightforward, organized menu with well-defined categories and subcategories. Users should be able to easily find what they are looking for, reducing confusion and improving the overall user experience. Functional Links: It’s essential to ensure that all links on the website are helpful and lead to the intended destinations. Broken or non-functional links can frustrate users and hinder their browsing and purchasing ability. Regular checks and maintenance should be conducted to keep the links updated and working correctly. Content and Design Integration: The content should be carefully aligned with the website’s overall design. This includes font styles, formatting, and spacing to ensure a harmonious blend between the content and the design elements. Consistency in design and content presentation helps create a professional and polished look.

Task 5.3
Judge and box their personalities

Part 1

Brand archetypes are a concept in marketing and branding that categorize brands into distinct personality types based on universal patterns of human behavior and symbolism. They help define a brand’s identity, positioning, and communication strategy. Here are some common brand archetypes:

Create your own table with details about the archetypes we discussed today:

Part 2

If you were creating a brand for your own portfolio, to represent your personality, which archetype would you choose? How would this archetype be presented with the:

  • Overall visual style (use three descriptive words) 
  • Fonts (choose two fonts) 
  • Color (create a color palette) 
  • Layout (use three descriptive words to define this) 
  • Photography style (use three descriptive words to define this) 

If I were creating a brand for my own portfolio to reflect my personality, I would select the Creator/Artist archetype. The brand would embody creativity, originality, and innovation. To visually represent this archetype, I would choose a modern and artistic design style.

The typography of the brand would utilize fonts such as Roboto and Monserrat. Monserrat offers a sleek and contemporary look, while Roboto adds a touch of artistic flair. These fonts would be used strategically across various brand elements.

roboto
Monserrat

The layout , such as website, portfolio, or promotional materials, would be tidy, creative, and modern. The design would showcase a visually appealing composition that captures attention while maintaining a sense of order and professionalism. When it comes to photography, the style would be close-up, colorful, and focused.


This is an example of the color palette that I would like to use; it may change over time, but these are the colors I would work with.

The images would emphasize details, textures, and vibrant colors, reflecting the creative essence of the brand. Clarity and sharpness would be prioritized to ensure the visuals are engaging and visually striking.

Overall, the brand would communicate a sense of artistic expression, innovation, and originality through its visual elements, layout, and photography style.

Reference

The Ultimate Guide To Brand Archetypes (Definition + Examples) (ebaqdesign.com)

Task 5.4
Create a brand archetype

You have been asked to design the brand and website for an eco-friendly zero-waste soap brand called: eKo. Think about which brand archetype you would choose and choose one or more website design trends that would work well for their website. Then, bring your ideas together by creating a mood board first. 

Proceed to create a high-fidelity prototype of the landing page, using Adobe XD or Figma. 

Brand Archetype:

For the eKo brand, I would  consider the archetype of “The Caregiver.”  I think that this archetype aligns well with the eco-friendly and zero-waste values of the brand. It represents compassion, nurturing, and support, which resonate with the concept of caring for the environment and promoting sustainable practices.

Website Design Trends:

To create an engaging and visually appealing website for eKo, I consider incorporating the following design trends:

Nature-inspired Elements: I want to  use imagery, illustrations, and textures that evoke nature, such as leaves, flowers, or eco-friendly materials like bamboo. I think that this will reinforce the brand’s connection to the environment. I think Sustainable Color Palette such as earthy greens, soothing blues, and natural browns. These colors evoke a sense of environmental harmony and align with the brand’s values. I want to use a color palette that reflects the eco-friendly ethos. For this task I want to work with a clean and Minimalistic Design and in other words a design that  embraces a clean and clutter-free layout to convey the brand’s commitment to simplicity and zero waste. maybe ample white space, clear typography, and intuitive navigation to create a seamless user experience. I want to use  fonts that are clean, modern.