MV-HUB is a place where users can find anything they need to use Mv-8800 Production Studio. Knowledge about how to use an instrument is the same or even more valuable than device or instrument itself therefore from perspective of user this kind of content is essential for either new and expirienced users. Despite it is quite old device the community is growing and getting new members and knowledge essential to start in one place is what they are looking for.
- The site was deployed to GitHub pages. The steps to deploy are as follows:
- In the GitHub repository, navigate to the Settings tab
- From the source section drop-down menu, select the Master Branch
- Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.
The live link can be found here: 🌍Live Website
Fully responsive design allows users to access MV-HUB from any device: desktop, tablet or mobile phone.
Website contain 2 global elements that are common for all pages:
- Navbar
- Footer
Hero image is changing on each of subpages and size is only 60% on main page when other pages hero image is 25%.
Four subpages are:
-
Specifications
-
Video
-
Gallery
-
Contact
- Featured on all pages, the full responsive navigation bar includes links to the Home page, Specifications, Video, Gallery and Contact page and is identical in each page to allow for easy navigation.
- This section will allow the user to easily navigate from page to page across all devices without having to revert back to the previous page via the ‘back’ button.
- Navbar is strongly connected to page music content. In desktop size navigation links represents mixer volume sliders
and color of highlighted links is
#51d720and it is tribute to the color of original MV-8000 screen that was changed later on to new rgb one. - Below you can find navbar in 3 versions for each size of screen: desktop, laptop and mobile.
- The footer section includes links to the relevant social media sites for MV-HUB. The links will open to a new tab to allow easy navigation for the user.
- Footer contain 4 blocks: logo, copyrights, author informations and social links.
- The footer is valuable to the user as it encourages them to keep connected via social media and make contact informations easy to find.
- Below you can find footer in 3 versions for each size of screen: desktop, laptop and mobile.
Elements for individual pages:
-
Landing page image
-
The landing includes a MV8800 Production Studio photograph with text overlay inspiring to use this page to join community. It is motto for the website.
-
This section takes only 70% of the screen revealing further content inviting user to scrool down. Parralax effect on scroll makes nice feeling following sections like floating up makes user to scroll with pleasure.
-
Gallery
-
The gallery will provide the user with overview images to see what the machine look like and closer look at different sections of interface.
-
This section is valuable to the user as they will be able to easily identify different sections of the device and also get familiar with general visual presentation of the device.
-
Images can be enlarged to see smaller details of interface.
-
Below you can find gallery in 2 versions for each size of screen: desktop, laptop and mobile.
-
Contact form
-
This page will allow the user to get in touch with MV-HUB.
-
MV-HUB mission is to help users with knowledge and also with any individal problems, questions, opinions or ideas from the community.
-
The user will be able to specify what type of contact they request so it will be easier to filter it and get more specified answers.
-
The user will be asked to submit their full name and email address to get informations in return.
-
Below you can find contact form in 3 versions for each size of screen: desktop, laptop and mobile.
- At the moment gallery replaced planned download section and it will be very important part of the MV-HUB. It will be implemented in the future when specific resources will be available.
- Forum is another planned feature to the website it is the best solution to get community together and members to communicate and share knowledge with each other.
- With increasing amount of content page will need system for filtering and easy finding desired materials. It will be easier achieved by adding searching engine than navigating in interface. So it is definatelly feature that will appear with website development.
- It was not essential at the begining because site is rather addressed for smaller devices popular in music studios but eventually will be upgraded to 4K when more content will be added
-
HTML:
-
code was structured with every element apearing in code in the same order as on the page:
-
first ther is some kind of template that is common to all pages with sticky navbar on the top and footer on the bottom there is also mobile navbar that is not visible unless screen width is decreased and media querries changing its display status.
-
Comments are dividing main sections and were extended to screen width to make easier navigation within code.
-
Below you can find image of collapsed main section showing rough structure of html code:
-
CSS:
-
CSS is structured with the same system as HTML with common elements being styled on the top part but one more common element Media Querries can be found on very bottom below sub pages styling.
-
Comments for specific sections were extended to window width to provide easier navigation.
-
Also style areas like Common Elements, Subpages Elements and Media Querries are more 'bold' to make them easier to identify.
-
Below you can find animated overview of navigation in CSS code:
- ASSETS STRUCTURE
- Files are segregated by area they are used in: general images, gallery, favicon and readme.
- Below you can find snapshot of file structure:
- Creating MV-HUB started with basic sketch of idea based on resources that in my opinion was essential for users: video tutorials, specifications, downloads of configuration files and gallery.
- Also channel for communication was essential part for this project to exist as it is focused on quite small community that need to building supporting environment within.
- Pictures used in this project were taken used Nikon N90 by myself.
- Color pallette was generated in COOLORS and was based on colors used on real device interface to make it strongly connected to it. Below you can find animation showing process of creating color pallette:
- Below you can find Sketches from early design of User Interface and Wireframe.
- W3C
- No errors were returned when passing through the official W3C HTML VALIDATOR
- JIGSAW
- No errors were found when passing through the official (Jigsaw) validator
- Lighthouse
- All pages grade near 100 points and no errors found in tests in Lighthouse
- Galery page tested 78 points because of graphics size but I decided to leave them to provide best image quality in gallery
- Results:
- GTMetrics
- GTMetrix tests graded A for all pages
- Results:
- Tested in Chrome Dev Tools for sizes 320px - 2560px (small mobile to large laptops) with satysfing results
- Example:
- Youtube embeding
- PROBLEM: While testing in W3C Markup validation service error about iframes code generated in http://youtubeembedcode.com/en/ for embeding youtube videos appeared, stating some atributes like: width height and type should not be used with this elements in HTML markup.
- SOLUTION: Removing atributes from html file and including them in CSS file.
- Code added:
.flex-container iframe {
width: 500px;
height: 50vh;
border: 0;
margin: 0;
}- Graphics size
- PROBLEM: GTMetrix reports results show images size is slowing down the page loading time.
- Solution: Used https://tinypng.com/ to compress images and reduce its size fixing the issue.
- Section without headers warnings
- PROBLEM: Hero image containing only graphic content was added as section and W3C Validator displayed error about no headers beeing added in this section.
-SOLUTION: Replacing section with div solved the problem.
- Images size in Gallery page
-
The only unfixed bug that I am aware of is image size for gallery page but I left them uncompressed to provide high quality images for gallery so users can enjoy small details and get familiar with different sections of MV8800 interface.
- Biggest support to my work on this website was Code Institute where I learned how to use HTML and CSS.
- Also content from Stack Overflow and W3schools was great support.
- Description of device for the HOME page and Specifications used on SPECS page comes from official Roland website.
- Embeded videos on VIDEO page comes from youtube The Midi Maniac channel.
- Instructions on how to implement CSS gallery on the Gallery page was taken from Pure CSS Lightbox & Image Reflection Effect from PureCSS channel on YouTube.
- Instructions on how to implement animated sliders on the navbar links was taken from CSS Custom Checkbox UI Design | Html CSS from Online Tutorials channel on YouTube.
- Instructions on how to implement parallax effect on the hero images was taken from Pure CSS Parallax Scrolling | No JavaScript | HTML & CSS from Codegrid channel on YouTube.
- Code used for glassmorph effect on footer was generated in Hype4 Academy Glassmorphizm Generator.
- Embeded video links on the VIDEO page and HOME page was generated in YouTube embed code generator.
- Idea for header for my readme file was taken from github user Choojs readme.
- Badges used in Header of Readme file were created in Shields Quality metadata badges for open source projects.
- Baner and all gif files used in readme were created in Vista Create
- All screen recordings were done by Vimeo Record free screen recorder.
- Video files convertion was done in 123Apps online video converter.
- Colour palette was extracted from image and generated on Coolors the super fast color palettes generator.
- All photos used on the HOME and GALLERY page were taken by LucasP1vko(Myself) usind Nikon D90 camera.
- The images editing was done in Adobe Photoshop Express.
- The images compression was done in TinyPng
- Fonts used in creating this website comes fromGoogle Fonts.
- Wordclouds used to create hero images on each page was generated in Free onlin wordclouds generator
- Synonyms for word clouds comes from Thesaurus synonyms and anthonyms library.
- Icons used in README file comes from Unicode Emoji Charts
- The artwork used on top of style.css file was generated in ASCII art generator.
- Button used in contact form on CONTACT page was generated in CSS Button Generator.
- The icons in the footer and navbar were taken from Font Awesome