Design Rationale %F0%9F%96%8C - ppijn/ilojo-bar GitHub Wiki
Table of Contents
For our project, we had to write a debriefing for our client. In this debriefing we discussed several things like the background information of the company and what their aims are, the motive, objectives and delivery for the project. We also briefly discussed our target audience and how we are going to make sure our project is actually made towards our target audience. You can find the Debriefing here: Debriefing Ilojo Bar - Julian en Pepijn.pdf Ilojo-bar-measurements.pdf
For this project, our client wanted to create a virtual monument of the Ilojo Bar in Lagos. She wanted a few things in there:
- Reading the stories about the Ilojo Bar
- Adding your own stories
- Experience the Ilojo Bar.
She wanted it to work smoothly and proposed an idea of herself to us. The idea was pretty straight forward but there were of course a lot of things we have to keep in mind when thinking of a solution. The first, and probably the biggest problem, is that the internet connection in Nigeria isn't the greatest. We already experienced it ourselves since the first meeting with Femke took longer because of the connection. The other problems we have keep in mind when making this project are the devices they use, the browsers they use and how we should visually create this monument. Why do these problems matter? Well, if we were to create an awesome project with extreme functions that work very well in the Netherlands with high technologies, it will probably be the complete opposite in Nigeria. The browsers they use for example are: Chrome (50%), Opera (30%) and Safari (8%). This means we have to test on the multiple browsers and not just on Chrome since that is not the only browser they use. These problems matter and we have to keep them in mind when creating the project since otherwise the experience in Nigeria is going to be awful.
We are going to be testing on multiple browsers, using as little JavaScript as possible for nice functions, try to keep the performance as high as we can possibly get it. If it works slow here, it works very very slow there. We are also going to format our pictures so that they are very small, all so that the loading speed will be faster.
As for the design, we want it to have an old-school yet modern touch to it. It needs to be very self explanatory, since Femke said a lot of people are 'technophobe', people need to be able to see and know where to click without any problems. Now, how do we put this in the design? We will be adding texts and little animations so that it can be very clearly shown where to click since it either moves, or shows you where to click. We do this so that everyone will be able to use our website without having to need any explanations.
Home Page 🏠
For the home page we tried to keep it very simple, having as little JavaScript as possible. We wanted to keep it semantically correct so that it is even accessible by people with bad eyesight
<body class="home-page">
<main>
<section class="ilojo-area">
<img src="img/ilojoenvirpng.png" srcset="img/ilojoenvirpng.webp" alt="ilojo bar street" />
<a href="/bar">
<img src="img/ilojobarfallback.png" srcset="img/ilojobarfallback.webp" alt="2d view of building" />
</a>
</section>
<section class="welcome-sign">
<div class="sign">
<h1><span>WELCOME TO</span><span>ILOJO BAR</span></h1>
<p>EXPERIENCE THE STORIES</p>
<address>Tinubu Square, Lagos</address>
</div>
<img src="img/poles-sign.png" srcset="img/poles-sign.webp" alt="poles" />
</section>
</main>
It is all very simple and compact but it looks exactly like the design and we made sure it gave a nice sphere with all the right emotions fitting this project. Using warm colors and visually pleasing fonts and images.
Bar Page 🍹
For the Bar Page we used ejs to load our data. We decided to go for the bar feel including a menu as the navigation system. We positioned the bar pieces correctly so that it is responsive (for mobile) and that it still looks the way we want. For the Menu we used a display flex to position them in a row and put horizontal scroll on. this way you are allowed to scroll freely between the stories.
<body class="bar-page">
<header>
<a href="/" class="back">
<img src="img/back-button.png" srcset="img/back-button.webp" alt="back arrow" />
</a>
<h1>ILOJO BAR</h1>
</header>
<main>
<ul class="bar-area">
<li>
<img src="img/lamps.png" srcset="img/lamps.webp" alt="Lamps on top of the bar" class="lamps" />
</li>
<li>
<p>Want to hear a story? Choose a story on the menu!</p>
</li>
<li>
<img src="img/barman.png" srcset="img/barman.webp" alt="Barman" class="man" />
</li>
<li>
<img src="img/bar.png" srcset="img/bar.webp" alt="Bar with drinks" class="bar" />
</li>
<li>
<img src="img/stools.png" srcset="img/stools.png" alt="Stools to sit on" class="stools" />
</li>
</ul>
</main>
<footer>
<ol class="menu">
<li>
<legend>Swipe to discover!</legend>
<img src="img/swipe.png" srcset="img/swipe.webp" alt="swipe icon">
</li>
<% stories.forEach(story => { %>
<% let storyTitle = story.title.split(' ').join('_').toLowerCase() %>
<li>
<img src="<%= story.img %>" alt="<%= storyTitle %>">
<a href="/<%= storyTitle %>"><h2><%- story.title %></h2></a>
<a href="/<%= storyTitle %>">Discover</a>
</li>
<% }) %>
</ol>
<img src="img/hands.png" srcset="img/hands.webp" alt="hands that hold the menu" />
</footer>
Story Page 📔
For the Story page we decided to keep it simple. Split the text into paragraphs, add the images and give the title a nice styling. We did order the pictures so that they are separated through the page. We then (with CSS) tilted some of the images and moved them a little so that there is a little variation in the design.
In the image tags it says onerror="this.style.display='none'" because when there are only, for example, 3 pictures in the API, we want to hide the other tags so that they don't interfere with the codes. We added this on all images in the text.
<body class="story-page">
<header>
<a href="/bar" class="back">
<img src="img/back-button.png" srcset="img/back-button.webp" alt="back arrow" />
</a>
<img
src="img/wood-sign.png" srcset="img/wood-sign.webp" alt="wooden ilojo bar sign attached to ropes" class="wood-sign">
<% let storyTitle = singleStory.title.split(' ').join('_').toLowerCase() %>
<h1><%- singleStory.title %></h1>
</header>
<main>
<% singleStory.text.forEach(paragraph => { %>
<p><%- paragraph.text %></p>
<% }) %>
<img src="<%- singleStory.images[0].url %>" onerror="this.style.display='none'" alt="">
<img src="<%- singleStory.images[1].url %>" onerror="this.style.display='none'" alt="">
<img src="<%- singleStory.images[2].url %>" onerror="this.style.display='none'" alt="">
<img src="<%- singleStory.images[3].url %>" onerror="this.style.display='none'" alt="">
<img src="<%- singleStory.images[4].url %>" onerror="this.style.display='none'" alt="">
<img src="<%- singleStory.images[5].url %>" onerror="this.style.display='none'" alt="">
<img src="<%- singleStory.images[6].url %>" onerror="this.style.display='none'" alt="">
</main>