This Week in Design Team Production, the team and I met once again to check up on our progress with the website and print collateral for OnTap Barbershop. I was busy with the site, as I was given full control of the site’s assets. I have managed to create a rough version of the site which was presented to the team. It was based on the style tile we chose. The critique on the site mainly regarded placement of social media and widgets, the overall navigation design, and the “hero” landing video. Social media icons were to be placed in the footer, but will now be included within an “Events” section on the website. An Instagram widget will also be included in the footer.
The navigation on the site was rather complex (in terms of execution, code was easy). The original design called for a simple white text navigation with a black to transparent gradient acting as a “bar”. It worked quite will on desktop, but it did not transition nicely onto the mobile site (responsive). A solution that was recommended by an instructor was to instead have a grey/dark grey background color bar instead of the gradient.
The “hero” video is rather tricky as this feature is still quite new in website design. Our site will use a custom video, shot on location, and will endlessly loop (still undecided) above the fold. The challenge was that on mobile devices, HTML5 videos do not play automatically, as a result, the space appears black or blank. The solution involves setting a background picture and hiding/removing the video in smaller viewports (breakpoints).
Overall, the site is on track to be completed by week 8. I’ve already cleaned up the code this week, as a result of the video issues on mobile. My other team members, Jamie and Nathan are responsible for print collateral and a marketing campaign. The following week I’m looking forward to seeing the progress they’ve made on the stationary kit, billboards, and door mailers.