I decided to create a website for a fictitious street culture hub for creatives. Vibe Tribe is a hub for creatives to get together and collaborate as a collective to produce something wonderful as this is the essence of street culture. The name Vibe Tribe was chosen for this project as "vibe" is used to define the atmosphere of a space. In urban slang "vibe" is often used to describe something that is chilled, peaceful or someone who is great to be around. Whilst the word "Tribe" is most commonly used to refer to a social division of people within society linked by blood ties. However, it can also be used to refer to people who share cultural and/or social links. The latter is the definition being used in this case. As all users of this hub will identify as creatives and will influence and/or be influenced by street culture in some way.
The inspiration for this imaginary hub was the pandemic. There was as surge of creativity and togetherness which allowed people from various fields come together to solve problems, to challenge injustice & create amazing things in a way that has never happened before. It would be a shame to lose that as things slowly return to normal. Vibe Tribe is a means of maintaining that and encouraging people to come together and flourish, focusing on their common goals and interests as opposed to their differences. It also serves as a way to educate people about the contribution that street culture and its sub cultures have made to larger society.
• The visitor would want the purpose of the site to be clear and information should be easy to find.
• The visitor would want the site to be easy to navigate on all devices.
• The visitor would want the social media buttons to be easily accessible.
• The visitor would be looking to find out more about street culture and be able to explore their interests more.
• The visitor would be looking to find out more information about the hub
• The visitor would would to feel like their niche is being recognised
• The visitor would want to sign up to get exclusive content and updates
• The visitor would want to know what activities are scheduled for a specific day
• The visitor would want to be able to navigate their way to specific content easily.
The main goal of this website is to provide a space for creatives to learn more about street culture, So I wanted to pick a colour scheme that linked to that. Purple and Gold are the colours for Lakers, a popular basketball team in the NBA and a lot of their apparel is popular within street culture.
Purple is also said to symbolise creativity and transformation. This is the energy that I want the users to channel and associate with the hub. Gold is associated with luxury and wisdom. The site serves to educate those looking to learn more about street culture but also highlight the culture which has been developed by creatives and its transition from urban to luxury spaces.
Below is the colour palette that I created, based on the message I wanted my colours to convey. I then used cava's colour palette generator to make sure that the colours I had chosen worked with the site content. Where more contrast was needed between colours I have used white font or adjusted opacity.
(Media/colour-palette.png)
The link colours were chosen based on contrast, as the main goal was to make these as accessible as possible for the users. After testing I changed the defult link colour to a dark red (#570000). Once clicked it will turn to dark blue (#1C1EA9) and be a very light blue (#05E9DD) on hover. I used WebAIM to chose colours with high contrast ratio. These colours are shown below
#570000
#1C1EA9
#05e9dd
The font used for the headers, footers and buttons is a latin display typeface called 'Rowdies'. I have chosen this font as it is bold and creative, inline with the sites theme.
The font used for the body text is a 'Work Sans', a typeface family based loosely on early Grotesques. It has simple features making it optimised for screen resolutions and easy for the user to read.
I wanted the media used on my site to be a reflection of the creativity and interests of the users. I was unable to create my own content so I used royalty free images and videos.
• My videos were from Pexels.
• I used pictures from Pexels and unsplash.
I used figma to create my mockups and have included the links to the mobile and desktop mockups. There are a few differences in my mockup and the end product, so I have included screenshots specific to those changes and the links to my mobile and desktop mockups are below:point_down:
Initially I wanted to have a Hamburger side Menu as shown in the screenshots below. Later on I decided to use a navbar as this would be easy to navigate and would not draw attention away from the landing page video.
I also changed the timeline to flip cards as I felt that this was more interactive and creative. 👇
To keep things as uniformed as possible I also changed the mobile menu to the nav bar and instead of flipcards I used hyperlinked pictures as a way to get more information on each niche. To view the mock ups please use the links. 👇
• The header is the same across all pages and view port sizes, it contains the navigation bar with the active page being highlighted with a purple background and gold font so that it is easier for the user to navigate. On hover the page buttons turn purple and the font is gold as well. On smaller viewports the navigation bar displays vertically instead of horizontally.
• The logo is visible on every page irrespective of viewport size.
• All media used has a description in case the link breaks.
• So those links are obvious to all users, I have changed the default active link and on hover link colours as the default colours did not create enough contrast with the site colours.
• All pages are responsive up until 320px
• The footer is the same across all pages and viewports to keep it uniformed. This makes it easier to navigate the site as the user knows what to expect. The social media icons are in the footer so that they are present on every page. I decided to make the footer black so that it was obvious to the reader and then made it transparent so that it did not detract from the nav bar.
• I used a video background for the landing page on larger viewports that are muted and on autoloop. I did this as I felt it gave the user a feel for what the site is about. The chosen video captivates the Creative expression of street culture. For smaller viewports I have used an image which also provides the same message.
• To display the information I used flip cards on larger viewports. I felt this was a creative way for the user to engage with the site.
• I used clickable images on smaller viewports that take you to the information relevant to each image.
• I styled the table header to purple and on hover the rows turn gold. This was so that there was consistent creative flare across the site. I wanted the user to feel as though every detail of their experience was important.
• I have created a signup form with validation so that the user is prompted if there is any error in completing the form.
• I then linked the form to the code institute form dump so that the all user actions throughout the website generates a response.
• Add a review section, to make it easier to collect and implement user feedback.
• Allow users to share their own stories on how they have contributed to streetwears evolution and/or have been impacted by it.
• Use other programming languages to make the site more interactive and allow me to keep the same features across all viewports. I.e flipcards on smaller viewports is not possible with pure CSS.
• Some images were not suitable for smaller viewports, so are not displayed. I would like to create/find similar images that are suitable for smaller screens, so that there is more consistency in the design across all view port sizes.
-
The visitor would want the purpose of the site to be clear and information should be easy to find.
• The tagline of the logo is "for creatives" indicating to the visitor that this site is intended for creatives.
• The landing page video also adds to the creative street culture vibe.
• The navarbar is easily accessible in the header and gives the visitor the option to click the about us page where they can find more detailed information.
-
The visitor would want the site to be easy to navigate on all devices.
• All page links are directly accessible in the navigation bar. The navigation bar is present in the header of every page keeping consistency throughout the site so it is easy for the visitor to intuitively browse through the website.
• All pages are responsive until 320px.
-
The visitor would want the social media buttons to be easily accessible.
• The social media icons are present in the footer on every page.
• The links take you to the correct page
• The icons are clearly visible in the footer
-
The visitor would be looking to find out more about street culture and be able to explore their interests more.
• The flip cards (larger screens) and clickable images (smaller screens) give the user the freedom to only explore the topics they are interested in.
• if the reader wishes to find out more they can click the link that takes them to a page with further reading and links specific to the content discussed.
-
The visitor would be looking to find out more information about the hub
• There is a button in the navbar specific to the hubs details, this is available on every page.
-
The visitor would want to feel like their niche is being recognised
• The hub gives all creatives the chances to celebrate their niche with a space each day to do their own thing or the option to participate in a different activity each day.
• The flip cards also document the contributions each niche has made.
-
The visitor would want to sign up to get exclusive content and updates.
• There is a sign up form on the exclusives which will allow the user to get exclusive updates and content.
-
The visitor would want to know what activities are scheduled for a specific day.
• There is a table on the come to the hub page that documents this.
-
The visitor would want to be able to navigate their way to specific content easily.
• The nav bar has a button that takes you to all the main pages.
• The read more hyperlinks take you to the pages with more information.
• There is hyperlinked text throughout the website that will take you to the relevant pages.
• Social media icons are on the bottom of every page.
In order to ensure there was no syntax errors in my code I used a validator service.The results are shown below 👇
HTML5 - There were no errors found
Main Pages:
• Landing page - View W3C Markup validator results
• About us - View W3C Markup validator results
• Come to the Hub - View W3C Markup validator results
• Streetwear's evolution - View W3C Markup validator results
• Exclusives - View W3C Markup validator results
Information Pages:
• Basketball View results
• Hip-Hop - View W3C Markup validator results
• Street art - View W3C Markup validator results
• Skating - View W3C Markup validator results
• Haute Couture - View W3C Markup validator results
• Japanese Streetwear - View W3C Markup validator results
CSS3 - There were no errors found
• Landing page - View W3C CSS validator results
• About us - View W3C CSS validator results • Come to the Hub - View W3C CSS validator results
• Streetwear's evolution - View W3C CSS validator results
• Exclusives - View W3C CSS validator results
• All known errors have been fixed
• The auto close tags on VS Code caused some bugs, I was able to fix this by turning off auto close tags.
• Close tags were also generated for inputs that had no close tags, this caused errors during validation that have now been fixed.
To ensure the functionality of my site I conducting testing on the following features prior to user testing:
Navbar:
• When the link is active or hovered on the navbar button is highlighted purple with gold font this was tested on all pages and on desktop and mobile. The active link always corresponds with the page.
• All the links in the Navbar are working and have also been thoroughly tested.
• The navar appears horizontally on screen sizes larger than 740px. On smaller screens the navbar displays horizontally. This is working as expected.
• The navbar remains at the top of the page on all screen sizes
• The navbar icons are visible on all pages and screen sizes.
Media:
• All other images used throughout the website show as expected. There are no broken links and all media is of good quality.
Links:
External:
• All external links are working as expected.They take you to the correct external pages and the default link colours have been changed to ensure contrast. The links open in a new tab for the users convenience.
Internal:
• All internal links are working as expected.They take you to the relevant pages and the default colours of these links have been changed.
• The links to the pages listed in the nav bar open in the same tab allowing seamless navigation through the site.
• The links to the internal pages that provide extra information open in new tabs for the user convenience as these pages have no navigation bar and can only be accessed through the links in the streetwears evolution page.
Flip-cards:
• All flip cards flip on hover. However, because the project only uses CSS3 and HTML5 I was unable to make the flip cards responsive on mobile. For smaller screens there are clickable images instead. This is explained to the user in the text above the flipcards/images.
•All hyperlinked text on the flipcards open the corresponding page in a new tab. All flip cards have been tested and work as expected on screens above 1100px.
•All hyperlinked images open the corresponding page in a new tab. All images have been tested and work as expected on screens 1100px and below.
Video:
Landing page:
• The landing page video is auto looped and muted on larger screens, there are no issues.
• The video on the exclusives page has clickable controls , which are visible on hover and work when pressed. However, the video has no attached audio.
Exclusives page:
• The video is only visible on larger screens.
Footer:
• The footer remains at the bottom and is visible on all pages and all devices.
• I have added padding to the footer so the text and social media icons are never at the edge of the footer making it easy for the user to see.
• The social media icons are visible on every page and when clicked open the relevant link in a new tap for the users convenience, this has been tested on all pages and a range of devices.
| Browser | Safari | Opera | Microsoft Edge | Chrome | Firefox | Internet Explorer |
|---|---|---|---|---|---|---|
| Mobile | ✅ | ✅ | ✅ | ✅ | ✅ | Not tested |
| Tablet | ✅ | ✅ | ✅ | ✅ | ✅ | Not tested |
| Desktop | ✅ | ✅ | ✅ | ✅ | ✅ | Not tested |
• OS compatibility was tested on iOS 14.8, Android 11, ipadOS 15, Windows 10 and MacOS BigSur.
• The devices used include but are not exclusive to Macbook Pro, iphone XR, HTC 11, iphone 11Pro and iPad air. To ensure the website was thoroughly tested I used Chrome Dev Tools to test on a range of viewports from 320px up to 2560px.
• I shared the website with family and friends of varying ages and computing skills to test the ease of navigation on a variety of devices. There were no issues with navigation.
• I also used testers to check that all buttons were working and there were no broken links. A few broken links were found but the issues have been corrected. After corrections were made I asked for them to be tested again and everything was working as expected.
To ensure performance was tested extensively I used two tools:
I used lighthouse testingto test the performance of my website, the results are shown below.:point_down:
•Landing page
•About us page
•Streetwear's Evolution page
•Come to the hub page
•Exclusives page
• Basketball
• Hip-Hop
• Street art
• Skating
• Haute Couture
• Japanese Streetwear
Overall the webpage lighthouse testing was successful, passing every category scoring at least 90% in each category.
I used webpagetest to test my performance on a range of devices, the results below show the site performance on a google pixel XL emulator. 👇
All of my results came back as: 
• Landing page view result
• About us page view result
• Streetwear's Evolution page view result
• Come to the hub page view result
• Exclusives page view result
Information pages
• Basketball view result • Hip-Hop view result • Skating view result • Street-art view result • Haute Couture view result • Japanese Streetwear view result
The project failed security and cache static content, but these are beyond the remits of this project so wont be included. Overall the website scored A for performance, but I will look to improve my security score and static cache content in the future.
Tailor brands - I used Tailor brands to create my logo
Font Awesome - I used Fontawesome to add social media icons and the icons in the nav bar.
Google Fonts - The fonts used are google fonts
Gitpod - Gitpod is powered by VS Code, storing my code in the cloud. I can then commit that code to my Github repository as Gitpod and Github are connected.
Optimizilla - I used Optimizilla to compress my images as smaller files would reduce the download size making it more accessible for all users.
Free convert - I used free convert to compress my videos as smaller files would reduce the download size making it more accessible for all users.
Canva - I used canva to create my colour palette. I also used Canva to remove the background colour of my logo and the Spiral image on the about us page.
Figma - I used figma to design my mockups.
Git - I used Git to track the changes to my code. Git was also used for version control.
Github - Github was used to host my project files. I then used Gitpages to deploy the website.
Vs Code - VS Code powers gitpod and was used to build the website.
Slack - I used slack to get feedback on my project
WebAIM - I used WebAIM to help improve the contrast ratio of my links
Webpagetest - I used Webpagetest to test the performance of the websiteon a range of devices.
lighthouse testing - I used lighthouse testing to test the performance of the website.
Amiresponsive? - I used this site to create the image used at the start of my README.
Publishing
I used GitHub Pages to publish this webiste. In order for the site to be deployed correctly, ensure your landing page is named index.html.
I used the following steps to deploy this site:
-
Log in to Github and locate the Github Repository
-
Click the "settings" button.
-
Scroll down until you see "GitHub Pages".
-
In the source dropdown select "master branch".
-
Once the page refreshes the link to your publish page will be displayed under GitHub pages.
-
The link colour will change to green, it can take a few moments for the site to be published.
Making a Local Clone
-
Go to the Vibe Tribe repository
-
Click the "Clone or Download" button under the repository name.
-
A button will appear called Clone with HTTPS.
-
Copy this clone URL for the Vibe Tribe repository
-
Open Git Bash in your local IDE
-
Change the current working directory to the location where you want the clone directory to be made
-
Type
git clone, then paste the URL you copied earlier (from step 4) This should look likegit clone https://github.co./YOUR-USERNAME/YOUR-REPOSITORY -
Press enter. Your local clone will be created. If you have any issues or want to read more click here.
• All code was written by Brieanna McDonald (the author).
• I used tutorials on w3schools to help create my nav bar and flip cards
• Code Institute sample README
• Code Institute Template README
• Emoji Cheat Sheet to add emojis in my README.
• Markdown badges to add badges in my README.
• Thank you to my mentor for answering my questions and always giving me useful feedback and insights.