Petra
Website Design
Project Overview
Petra is a personal project created in 2019 as a way to train my HTML and CSS skills. I chose to develop an informative website about one of my favorite travel destinations: Petra. I built the website as a place where people interested in visiting the archeological site could learn about it, while also discovering a bit more about Jordan in general.
My Contributions
My focus was to develop the entire website without the help of libraries or frameworks.
Firstly, I designed a few low-fidelity wireframes, in order to decide the underlying structure of the website. I then translated these sketches into high-fidelity mockups in Figma, and followed the UI to develop single pages.
Website Architecture and Design
Petra
Apr 2019 – May 2019
In order to decide the best website structure, I started my work with (digital) pen and paper: I listed the sections I was interested in developing and the relations between them on a sheet, creating a quick information architecture reference document.
Even with projects where architecture isn’t that complex, like this one, I think it’s always a good idea to organize data before actually start designing. It’s about ensuring that key information is quickly accessible to users.
From that, I designed the main structure of the website, organizing information and navigation. I wanted to keep things simple, so I ended up with an homepage and three main sections (an informative section about Petra and Jordan in general, a “fun facts” section and an image gallery).
The visual style
Petra
Apr 2019 – May 2019
Petra is one of the seven Modern World’s Wonders and a truly unique place in the planet. For this reason, I decided to give space to images and photos, in order to engage visitors in the rich and ancient city’s panorama.
I also chose two typefaces that could help to set the mood:
Trade Winds
Only used on the landing page as a graphical element, it has an exotic and adventurous vibe.
Barlow Condensed
A low-contrast Sans Serif used in titles, that adapts perfectly to the tall and narrow landscape created by canyons and buildings carved in stone.
In order to make the experience even more immersive, every page is defined by a different shade that connects with the natural and rocky landscape which surrounds the archaeological site.
The background of each section borrows the main shade of the cover image. This creates a continuum in scrolling the page, almost like getting to a deeper level of discovery.
Small details, like the iconography that works as a separator between sections, help to settle the theme for the Arab world.
Things I learned
Petra
Apr 2019 – May 2019
This project was my first attempt in building a complete website using HTML and CSS.
I had to face interesting design challenges, such as creating a tab menu inside a webpage, or a carousel of images which scrolled with accuracy, or even section dividers using a mix of images and CSS styling.
I also explored horizontal as well as vertical layouts to bring more interest on certain sections.
But most of all, this project helped me understand the basics of translating a design from a graphic template to a web language:
HTML
Understanding how to manage code limitations and how the underlying structure of a web page is built.
CSS
Experimenting with customizing element’s shapes, colors and transitions using classes and selectors.
Want to work together?
If you like what you see and want to work together, drop me a line!
