Welcome to my portfolio Welcome to my portfolio

Long-Neck Legacy Website Prototype

The Long-Neck Legacy project involved creating a comprehensive brand identity for a giraffe conservation organization that is family-friendly, humorous, educational, engaging, persuasive, and informative. The brand is built around an existing logo design, with the name Long-Neck Legacy chosen for its memorability and evocative quality, capturing the organization's tone. The brand characteristics include being family-friendly to appeal to all age groups, especially children and families; humorous to make the brand approachable and memorable; educational to provide informative content about giraffes and their conservation; engaging through interactive methods that attract and retain audience interest; and persuasive to encourage action and support for conservation efforts. The website mirrors the brand’s visual identity by utilizing the existing logo design as its central element and incorporating warm, inviting colors that evoke the savannah environment. The Montserrat font family is used throughout the site for its modern, easy-to-read qualities that complement the overall brand aesthetic. The site features three main pages: the homepage, information about giraffes, and a page dedicated to conservation efforts. It presents informative and persuasive content that educates the public about giraffes and their conservation needs. The website is designed to be user-friendly, educational, and engaging, with interactive features like "Facts of the Day" to encourage further exploration through clickable elements. The website’s design was prototyped to ensure it looks and functions well across five screen sizes: desktop computers, laptops, tablets in portrait and landscape modes, and mobile phones.

Image of a mockup of the Long-Neck Legacy website on a desktop, laptop, tablet, and mobile phone screen size, optimized for each

Long-Neck Legacy responsive website mockup, 2024

Long Neck Legacy — Brand Style Guide, 2024

WEBSITE PAGES
WEBSITE PAGES — iMAC
Image of the home/index page of the Long-Neck Legacy website optimized for an iMac screen, with a hero image featuring overlay text of their mission statement, the organization’s goals, giraffe facts of the day, and a contact form

Long-Neck Legacy — Index (iMac), 2024, 2560x4252 pixels

Image of the Information page of the Long-Neck Legacy website optimized for an iMac screen, with informational sections about giraffes, including their height, wildlife adaptations, how/what they eat, and how they reproduce

Long-Neck Legacy — Information (iMac), 2024, 2560x4472 pixels

Image of the home/index page of the Long-Neck Legacy website optimized for a MacBook screen, with a hero image featuring overlay text of their mission statement, the organization’s goals, giraffe facts of the day, and a contact form

Long-Neck Legacy —Conservation (iMac), 2024, 2560x3548 pixels

View iMac Prototype
website pages — macbook
Image of the home/index page of the Long-Neck Legacy website optimized for a MacBook screen, with a hero image featuring overlay text of their mission statement, the organization’s goals, giraffe facts of the day, and a contact form

Long-Neck Legacy — Index (MacBook), 2024, 1440x3676 pixels

Image of the Information page of the Long-Neck Legacy website optimized for a MacBook screen, with informational sections about giraffes, including their height, wildlife adaptations, how/what they eat, and how they reproduce

Long-Neck Legacy — Information (MacBook), 2024, 1440x4968 pixels

Image of the Conservation page of the Long-Neck Legacy website optimized for a MacBook screen, with sections about the organization’s conservation team, giraffe endangerment, and Long-Neck Legacy’s conservation success stories

Long-Neck Legacy — Conservation (MacBook), 2024, 1440x4136 pixels

View MacBook Prototype
WEBSITE PAGES — IPAD PRO (HORIZONTAL)
Image of the home/index page of the Long-Neck Legacy website optimized for a landscape orientation iPad Pro screen, with a hero image featuring overlay text of their mission statement, the organization’s goals, giraffe facts of the day, and a contact form

Long-Neck Legacy — Index (iPad Pro Landscape), 2024, 1366x3964 pixels

Image of the Information page of the Long-Neck Legacy website optimized for a landscape orientation iPad Pro screen, with informational sections about giraffes, including their height, wildlife adaptations, how/what they eat, and how they reproduce

Long-Neck Legacy — Information (iPad Pro Landscape), 2024, 1366x5484 pixels

Image of the Conservation page of the Long-Neck Legacy website optimized for a landscape orientation iPad Pro screen, with sections about the organization’s conservation team, giraffe endangerment, and Long-Neck Legacy’s conservation success stories

Long-Neck Legacy — Conservation (iPad Pro Landscape), 2024, 1366x4568 pixels

View Landscape iPad Pro Prototype
WEBSITE PAGES — IPAD PRO (VERTICAL)
Image of the home/index page of the Long-Neck Legacy website optimized for a portrait orientation iPad Pro screen, with a hero image featuring overlay text of their mission statement, the organization’s goals, giraffe facts of the day, and a contact form

Long-Neck Legacy — Index (iPad Pro Portrait), 2024, 1024x4460 pixels

Image of the Information page of the Long-Neck Legacy website optimized for a portrait orientation iPad Pro screen, with informational sections about giraffes, including their height, wildlife adaptations, how/what they eat, and how they reproduce

 Long-Neck Legacy — Information (iPad Pro Portrait), 2024, 1024x5818 pixels

Image of the Conservation page of the Long-Neck Legacy website optimized for a portrait orientation iPad Pro screen, with sections about the organization’s conservation team, giraffe endangerment, and Long-Neck Legacy’s conservation success stories

Long-Neck Legacy — Conservation (iPad Pro Portrait), 2024, 1024x4414 pixels

View Portrait iPad Pro Prototype
WEBSITE PAGES — IPHONE
Image of the home/index page of the Long-Neck Legacy website optimized for an iPhone screen, with a hero image featuring overlay text of their mission statement, the organization’s goals, giraffe facts of the day, and a contact form

Long-Neck Legacy — Index (iPhone), 2024, 393x6368 pixels

Image of the Information page of the Long-Neck Legacy website optimized for an iPhone screen, with informational sections about giraffes, including their height, wildlife adaptations, how/what they eat, and how they reproduce

Long-Neck Legacy — Information (iPhone), 2024, 393x10580 pixels

Image of the Conservation page of the Long-Neck Legacy website optimized for an iPhone screen, with sections about the organization’s conservation team, giraffe endangerment, and Long-Neck Legacy’s conservation success stories

Long-Neck Legacy — Conservation (iPhone), 2024, 393x7976 pixels

View iPhone Prototype
PROCESS PART 1: INITIAL LOGO CREATION (2023)
age 1 of the initial logo creation sketches

Initial Logo Creation Sketches — Page 1, 2023 ​​​​​​​

Page 2 of the initial logo creation sketches

Initial Logo Creation Sketches — Page 2, 2023 ​​​​​​​

Color version of the initial logo

Initial Logo — Color, 2023 ​​​​​​​

Black-and-White version of the initial logo

Initial Logo — Black-and-White, 2023 ​​​​​​​

PROCESS PART 2: BRAND CREATION (2024)
GIRAFFE CONSERVATION BRAND DESIGN OBJECTIVE
Create a comprehensive brand identity for a giraffe conservation organization that is family-friendly, humorous, educational, engaging, persuasive, and informative. The brand will be built around an existing logo design and include a memorable and evocative name that captures the essence of the organization's mission. The aim is to raise awareness and support for giraffe conservation efforts.
NAME CONCEPTS
Tall Tales Conservation
Gentle Giraffe Alliance
Giraffe Gratitude Project
Spotted Giants Initiative
Gentle Giants Conservancy
Necking It for Nature Foundation
Long-Neck Legacy
Tall Tales Conservation
Head Turners 
Spotted Solutions
moodboard
Brand identity moodboard for Long-Neck Legacy

Long-Neck Legacy brand moodboard, 2024

LOGO REVISION
Different typeface variations of the Long-Neck Legacy logo

Long-Neck Legacy logotype typeface revisions, 2024

Different color variations of the Long-Neck Legacy logo

Long-Neck Legacy logotype color revisions, 2024

Color version of the Long-Neck Legacy logo

Long-Neck Legacy Logo — Color, 2024

Black-and-White version of the Long-Neck Legacy logo

Long-Neck Legacy Logo — Black-and-White, 2024

Color version of the Long-Neck Legacy logotype

Long-Neck Legacy Logotype — Color, 2024

Black-and-White version of the Long-Neck Legacy logotype

Long-Neck Legacy Logotype — Black-and-White, 2024

PROCESS PART 3: WEBSITE CREATION (2024)
BASE WEBSITE LOW-FIDELITY WIREFRAMES
Image of the low-fidelity wireframe of the home/index page of the base Long-Neck Legacy website

Long Neck Legacy — Index low-fidelity wireframe, 2024

Image of the low-fidelity wireframe of the Information page of the base Long-Neck Legacy website

Long Neck Legacy — Information low-fidelity wireframe, 2024

Image of the low-fidelity wireframe of the Information page of the base Long-Neck Legacy website

Long Neck Legacy — Conservation low-fidelity wireframe, 2024

BASE WEBSITE DETAILED WIREFRAMES
Image of the detailed wireframe of the home/index page of the base Long-Neck Legacy website

Long Neck Legacy — Index detailed wireframe, 2024

Image of the detailed wireframe of the Information page of the base Long-Neck Legacy website

Long Neck Legacy — Information detailed wireframe, 2024

Image of the detailed wireframe of the Conservation page of the base Long-Neck Legacy website

Long Neck Legacy — Conservation detailed wireframe, 2024

↑Back to Top