Forest green
#193C34
Brand foundation, text, and primary actions
It connects the mountain motif with a mature school identity. Dark surfaces and text on cream give the interface a clear hierarchy.
← Back to portfolio
BrandingUX/UIWeb designDevelopmentHighlander2026
Highlander - from brand identity to a deployed language school website
Logo, identity, and an English school website built around “Your language. Your summit.” From forest green and typography to an interactive course finder and a published site.
- Brand direction and tone of voice
- Logo, colour palette, and typography
- Information architecture and UX/UI
- Responsive web design
- Website and interaction implementation
- Preview deployment
Project at a glance
Highlander is an English school brand project with an offer for children, teenagers, and adults, intended for Kraków and online. The scope covers branding, UX/UI, web design, implementation, and deployment. The published preview combines six pages, a course finder, and forms that prepare message text for copying or downloading.
Context & problem
Highlander starts with a simple idea: everyone has a personal language summit. For a child, it might be a first conversation; for a teenager, more confidence; for an adult, ease at work or while travelling. The brand and website needed to make room for these different motivations.
The scope covered the full path from branding to deployment: symbol and wordmark, colours, typography, tone of voice, information architecture, interface design, and implementation. The site presents an English school intended for Kraków and online learning.
The home page introduces the brand and courses; Offer, About, Careers, Contact, and Privacy pages organise the supporting information. Course tabs, a learning path finder, and short English conversations add practical interactions to the narrative.
The result is a published preview. Forms prepare message text for copying or downloading. Once a real email address is configured, they can open the visitor’s email app; the visitor sends the message themselves. Unsplash photographs serve as illustrations.
Constraints
- One identity for children, teenagers, and adults
- Polish-language content covering in-person and online learning
- The finder gives a preliminary recommendation, without assessing proficiency, prices, or availability
- Opening enrolment requires confirmed school details and a complete inquiry handling process
Strategic principles
- 01
Personal goals, one brand
The summit motif connects different reasons for learning. Calm visuals and direct language allow the brand to speak to parents, teenagers, and adults alike.
- 02
Choice in small steps
First the learner, then the learning mode and goal. Each course-finder question has a clear purpose, and the answers carry into the contact form.
- 03
English to use
Short scenes from travel, a café, and work show the practical purpose of learning. A translation revealed on demand lets visitors approach the conversation at their own pace.
Creative direction
“Your language. Your summit.” translates the Highlander name into the learner’s personal ambition. The mountain motif gives the identity a direction, while warm surfaces, soft italics, and a conversational voice keep the school approachable.
Brand character
- Friendly
- Calm
- Ambitious
- Personal
Tone of voice
Short sentences address visitors directly. Invitations to find a course and spend less time worrying about mistakes connect aspiration with a small, understandable action.
What we deliberately avoided
- Rigid school-like visuals
- An overly childlike identity for the whole offer
- Pressure to enrol immediately
Logo story
An outlined mountain mark connects the Highlander name with the personal-summit tagline. A DM Sans wordmark and the simple descriptor “English language school” immediately establish what the brand offers.
Mountain outline
Two peaks evoke different goals and stages of progress while keeping a simple, recognisable silhouette.
A calm wordmark
DM Sans gives the name a contemporary, approachable character. The descriptor explains the offer without complicating the symbol.
The vector outline stays crisp in the header and footer. The full lockup combines symbol, name, and descriptor; a simplified mark serves as the site icon.
Colour system
Forest green and cream establish a calm foundation. Lime lifts selected elements, while burgundy introduces a warmer counterpoint.
Cream
#F8F7F2
Main background
The warm shade gives photography and large headings room to breathe while keeping the site visually soft.
Lime
#D9ED92
Accents and highlighted surfaces
It adds energy to the restrained palette. Paired with dark text, it brings attention to selected messages.
Burgundy
#943E45
Secondary accent
It broadens the green system with a warmer colour while retaining the restrained overall character.
Typography
DM Sans carries most of the communication. Fraunces italics highlight key words and give headings a more personal voice.
DM Sans
400 · 500 · 600 · 700
Wordmark, headings, body text, and interface
Twój język. Twój szczyt.
One readable family connects the brand name with course cards, navigation, and forms. Different weights organise the information.
Fraunces
500
Italic headings and accents
More talking.
Organic shapes soften the regular sans-serif structure. Italics distinguish individual phrases while the rest of the page keeps a clear rhythm.
User flow
The journey moves from the brand idea through the offer and preliminary course selection to preparing an inquiry. Each stage adds context for the next step.
- 01
Find your direction
The hero introduces the brand promise and invites visitors to explore courses or open the finder.
- 02
Explore the offer and approach
Tabs organise learner groups. Sample conversations with translations place English in concrete situations.
- 03
Answer three questions
The learner, in-person or online mode, and learning goal produce a preliminary rule-based recommendation.
- 04
Prepare a message
The selected preferences carry into the contact form. In the preview, the prepared message can be copied or downloaded.
UX/UI decisions
- Problem
- A broad offer requires visitors to identify a course that fits their situation.
- Decision
- Audience-based tabs and a separate three-question course finder.
- Rationale
- Visitors who know their direction can browse the offer, while undecided visitors get a simple structure for choosing.
- Impact
- Two exploration paths lead to the same course information.
- Problem
- A broad claim about practical English says little about the learner’s experience.
- Decision
- Interactive travel, café, and workplace scenes with translations available on demand.
- Rationale
- A short exchange gives a tangible example of a situation where learning can help.
- Impact
- Visitors can change the context themselves and reveal the meaning of the conversation.
- Problem
- Moving from course selection to contact can lose the answers already given.
- Decision
- Pass the learner, mode, and goal through link parameters and prefill the form.
- Rationale
- The context of the choice should stay with the visitor through message preparation.
- Impact
- The form retains preferences without requiring the visitor to repeat course selection.
Key interface sections
The mobile layout preserves the brand’s typographic character and access to primary actions.
The offer on mobile: learner-group selection and course content in one column.
From design to delivery
The implementation combines a multi-page website with small interactive components. Fonts and images are served locally with the site.
- Next.js + React + TypeScriptApp Router handles six routes. Shared components keep the header, footer, sections, and forms consistent.
- CSS + brand tokensShared colours, local DM Sans and Fraunces fonts, and responsive layouts carry the identity across screen sizes.
- Course finder and form stateTyped rules connect the learner, mode, and goal to a recommendation. URL parameters carry the selections into contact.
- Accessible interactionsA native dialog, keyboard controls, visible focus, a skip link, and reduced-motion preferences support site navigation and interaction.
- Preview deploymentThe public site presents the brand, offer, and interactions. Forms operate locally; integration of a full enrolment process remains a later stage.
What we delivered
- 01Brand direction and the “Your language. Your summit.” tagline
- 02Mountain mark, wordmark, four colours, and a typeface pairing
- 03Information architecture and responsive design for six pages
- 04Course tabs and a finder that preserves preferences
- 05Interactive English conversation examples with translations
- 06Forms that prepare a course inquiry or teacher application
- 07Implementation and a published website preview
The key decision
Taking the project from branding to deployment connected the brand promise with concrete website behaviour. The personal summit appears in the mark, typography, and questions about learning goals. The key decision was to maintain that coherence through to the form, carrying the visitor’s preferences with it. The next stage requires confirmation of school details, offer terms, and the enrolment process.
Live site
Highlander
Next projectNO LIMITS - from first contact to coached training
Łukasz Sroka’s website and coaching app. One brand, two dashboards: daily planning and session logging for the trainer, with plans and progress at hand for the client.
LET'S TALK
Let's talk about your project
Need a brand and website developed as one coherent whole? Let’s talk about your project.