code-institute-submissions / jimbobding-blinker-website Goto Github PK

Blinker Bar - Bar Website

This website is designed to be shown to potential employers of my services as a web designer mainly aimed at but not exclusively, venue owners and operators in the hospitality sector. All the subject matter is supposed to be interchangeable as the bar that I have designed for is fictitious. It is to show the different ways I can promote certain aspects of their business, in an informative yet fun way.

Demo

A live demo can be found here

UX

The aim is to make a website that allows the user to easily navigate around the site whilst looking sleek and not over congested. I want the information to be clear and concise allowing it to be informative yet pleasing to the eye. I wanted the colour scheme to be vibrant as its purpose is to make the user feel happy and that they are having a good time thus matching the aspirations of the venue.

I wanted to make the site easy to navigate so that the user would be able to find there away around the site and to the particular section the wanted easily. For example, if someone was interested in seeing our drinks menu they could go directly to the landing page and choose to look at the drinks rather than going through the music page etc.

I wanted to showcase that the site could be navigated through easily through the page being used as well as it being easy to switch to other pages. For example, it is easy to navigate to the wine section of the drinks page but just as easy to then skip to the music section, using the fixed top navigation bar as well as the in-page card navigation helped with this.

The top and bottom fixed navigation and footer bars are great for containing links but also I felt they framed the page nicely leading to a nicer user experience.

Wireframes

-landing-page -nav-cards -menu-nav-cards -hamburger-menu -drinks-menu

Features

The navigation bar will collapse into a hamburger menu for mobile devices. I will be using the bootstrap card feature to make an in-page navigation menu.

Features to implement

This website is made to be built upon. The music page is still quite basic and has room for more features. Features to implement are.

Index page

• A picture gallery displaying images of the venue
• An interactive map displaying the location of the venue

Drinks page

• A specials menu that would change daily
• A picture gallery of drinks that the venue sells (this can be used in conjunction with brands for promotional use)

Music page

• Sound bites and links to live mixes by the DJ's
• Interactive photo gallery from music nights at the venue

Technologies

• Html
• CSS
• Bootstrap (4)

Media

All the photos were donated by Loop Roof bar in Melbourne Australia, Cocktails Beers Ramen and Buns in Manchester England and from Regal Disco also In Manchester England.

All pictures, menus and copy are interchangeable and should serve as a demonstration for the client on what a site may look like.

testing I tested the website on multiple browsers and platforms, including a desktop, Ipad and a mobile device. This was to test compatibility and responsiveness. I have added screenshots from said devices. I did find that some of the landing pictures did not work well in mobile mode however when I tried to remove them I found that it affected my mobile view hamburger menu links. This is an issue I am still working to resolve.

I tested the navigation elements across all platforms to ensure that the site could be navigated on all formats. I found that I did have to take out some of the less relevant information and/or pictures as they did were not user-friendly on smaller devices. Some of the information on the Regal Disco segment did not look good and got in the way of navigating the rest of the page, so I wrapped it in a media query so it would not be visible on smaller devices.

I found that on smaller screens the card navigation felt to clunky so it is only used for the desktop versions but as it is still usable it can be a viable

-[mobile]/device-tests/devices/mobile/card-nav-mob.png) -ipad -desktop

The contact form on the good time's page is meant to show the use of a booking form and is not automated.

The social media links are also not automated but there to show how they could be used.

Deployment

This website is hosted directaly onto github and is updated through the master branch everytime I add, commit and then push the files through.

You can run this locally by cloning the repository and pasting into your own terminal. This is a tutorial I used (https://help.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository)

Credits

The playing card navigation bar was inspired by and uses some code credited to - Chris Coyler CSS tricks .com https://www.youtube.com/watch?v=NXtz59SJYfM

The DJ card was inspired and uses some code credited to - Julio Codes https://www.youtube.com/watch?v=GWE9ay9H7uU

The hamburger menu was inspired by and uses code credit to -Darkcode https://www.youtube.com/watch?v=cQ6YQ8K5MRw

General inspiration for my site was taken from eau-de-vie and bad-luck-bar