Alpha Tango: Caelor Rebrand
De opdrachtgever, Alpha Tango, wilt een homepage voor het bedrijf Caelor waar zij een nieuwe visuele identiteit voor hebben gemaakt.
Mobiele versie bekijken?
Scan deze QR code op je mobiel!
PS: zet ook eens de donkere modus aan.
De live versie is hier te bekijken:
https://lisagjh.github.io/the-startup/
Inhoud
Ontwerp: probleem & oplossing
Alpha Tango is a creative studio, specialized in strategy, branding, design, and development. Our work is always at the intersection of design and technology.
Alpha Tango heeft een nieuwe visuele identiteit gecreeerd voor Caelor. Nu moet hun website opnieuw ontworpen worden met deze nieuwe huisstijl.
Caelor maakt gebruiksvriendelijke tools voor Confluence en Jira. De bezoekers van hun website zijn mensen uit het bedrijfsleven, die weten waar ze naar op zoek zijn. Hier moet de website dus ook op aan sluiten.
Kenmerken
Tools
- VScode
- Procreate (digitale schets)
Technieken
- HTML
- CSS
- custom properties voor padding, margin, kleur, fonts
- JavaScript
- de tabs bij de carousel en de carousel zelf zijn gemaakt met JS.
Proces
Lees meer hierover in de wiki!
Analyse
Na de briefing heb ik de huidige homepage van Caelor bekeken, en de styleguide geanalyseerd. Aan het eind van week 1, na de meeting, ben ik gaan zoeken naar websites van vergelijkbare bedrijven en concurrenten, en fotos ter inspiratie, en dit alles in een whiteboard gezet.
Ontwerpen
Ik heb eerst een schets gemaakt voor mobiele schermen, en hier een breakdown van gemaakt. De schets heb ik daarna beter uitgewerkt met kleur in Procreate.
Bouwen
Ik had al vrij snel een begin met de mobile first techniek, en heb ik mijn ontwerp gerealiseerd in code.
Integreren
De website staat live op github
Testen
Er is een usertest gedaan, een lighthouse test, en er is een HTMl validator gebruikt.
Checklist
Projectboard
https://github.com/users/lisagjh/projects/3/views/1
To Do
Er zijn nog een aantal dingen te doen.
- [x] focus state buttons
- [ ] html semantiek
Optioneel:
- [ ] animaties toevoegen
- [ ] scroll-snap in de carousel, zodat de items gecentreerd in het scherm staab
Licentie
This project is licensed under the terms of the MIT license.