The goal for this project is to learn about the services offered by Electric LadyLand Silver, discover the projects done by previous students and book a class or contact the site owner.
- Find information about Electric LadyLand Silver and their services.
- Check availabilities for classes through an embedded Google Calendar.
- Book a class with Electric LadyLand Silver through a multiple choice registration form.
- Images gallery of pre-existing student projects.
- Contact via email to the site owner.
- Why smithery is a creative activity that anyone should do.
All user stories have to be read aloud as a Baseline Test from Blade Runner
- The user wants a visually pleasing and informative website to be informed and tempted by the activity offered.
- The user wants to know about the company and their ethics.
- The user wants to learn about the options offered by the company.
- The user wants to be able to see reviews of previous customers to check if the website is not a scam.
- The user wants to be able to locate physically and consult the company social media.
- The user wants to be able to contact the company if his/her/their questions wasn't already answered by the FAQs.
- The user wants to be able to see images of previous projects made by the company.
- The user wants to be able to book the class of his/her/their choice and check all available options in real time before booking the class.
- The user wants to know his/her/their email and registration form were successfully sent.
- The user wants to be able to consult the website from all his/her/their devices.
All site owner goals have to be read aloud as a Baseline Test from Blade Runner
- The site owner wants to present his company and ethics in an honest and professional way.
- The site owner wants to present the options offered in a clear and understandable way for the customer.
- The site owner wants to show that he/she/they care about good quality control and customer opinions.
- The site owner wants to be easily contacted and located physically and on social media.
- The site owner wants to display what himself/herself/themselves and his/her/their previous students have created as liability.
- The site owner wants to be open and trustworthy about his/her/their availabilities.
- The site owner wants the registration system to be simple and straightforward for the customer and himself/herself/themselves.
- The site owner wants to answer to the registration himself/herself/themselves to add a human touchto the experience.
- The site owner wants his website to be supported by all browsers and devices.
- Navigate the website using the top navigation bar.
- Be provided with information about the ethics of the company, the instructor and the services offered.
- Visually pleasing and coherent content display on all pages.
- Display a functional contact form and registration form.
- Show availabilities through calendar.
Expectations
- Content is visually pleasing and instructive.
- Navigation takes the user to different pages of the website.
- Call to action buttons for contacting the site owner and booking classes.
- FAQs page to avoid too much text on landing page.
- Pop-up to signal that the contact and registration form have been sent
When crafting this website, I looked at other jewelry schools such as L'Ecole Van Cleef Arpels and The Silversmith Guild of Canterbury to consult the relevant sections to be in use, then added my personal touches. I also applied what I had learnt during the Udemy FullStack Developer Bootcamp as well as the Whisky drop challenge with Code Institute.
I was concerned about the amount of text in the website, so I checked what were popular Google Fonts pairing in 2020, and after a bit of fidgeting I chose to pick Arvo for the headings and Cabin for other elements.
All icons used on the website are provided by FontAwesome and are there mostly (at the exception of the About section) to highlight the buttons functonality and the FAQs text.
Electric Ladyland Silver already had a very strong visual identity inspired by South Western America and Native American culture. Most of the colors used on the website are from The American Southwest Color Palette.
-
For the index page
-
H1: #fffff white with a #140d07 shadow
-
Colored section: #140d07 background #f5f8e4 text
-
Light Section: #f5f8e4 background #140d07 text
-
Images and pricing cards shadow: #719f9f
-
Buttons: #719f9f with #ed8b22 hover effect
-
For all other pages:
-
Background: #f5f8e4
-
Text: #140d07
-
Buttons: #719f9f with #ed8b22 hover effects
For wireframing I used JustInMind rather than Balsamiq as I wanted to include pictures and text to show it to the company owner. Making this wireframe really helped me understand the complexity behind the Google calendar and the registration form and how to make it coherent. It also allowed my mentor to point out a few UX mistakes that I changed after my meeting with him.
View my wireframes here.
You'll notice that my wireframe is different than the website. After my preliminary meeting with my mentor, I decided under his supervision to let go of the following things for a better UX:
- The Header title became white with a lighter shadow and an opacity layer on the hero image rather than a semi-transparent turquoise jumbotron.
- The Book a class button on the Hero image went down to the "Gallery" button in the About Section.
- The navigation bar changes depending on which pagethe user is on.
- The about section link in the navigation bar was removed.
- The review section is now placed after the pricing card section.
- The Any Question section became a Call to Action section with a contact button leading to a contact page with a form.
- The contact details are moved in the footer.
- Responsiveness on all screen sizes.
- Contact form with modal button in contact page.
- Embedded Google Calendar and registration form with modal button.
- Registration form in booking page.
- Pricing cards with picture.
- Images Gallery with thumbnails and zoom-in pictures.
- Online Shop.
- Google reviews.
- More (and better?) pricing cards.
Tools & Libraries
- I tested the responsiveness of the website by using the Google Chrome DeveloperTool and the website Am I Responsive.
- I also tested my website on different browsers and real devices : Iphone 6s, Iphone X, Ipad Pro 12", Macbook air and Samsung Galaxy S20.
- I used CodePly to pre-test parts of my HTML and CSS code before adding it to my workspace which was great but sometimes resulted in forgetting to copy/paste some css or classes.
- I tested my CSS file and my HTML files using CSS Validator and HTML Validator, which highlighted my mistakes in copy/pasting from CodePly.
- My CSS file displayed no error but I had to fix a few problems concerning my syntax in my HTML files. All pages passed the HTML and CSS validator final test.
Responsiveness
- Implementation
I used the Bootstrap grid system as well as some custom CSS media queries to ensure that the website didn't break on all screen sizes.
Design
- Implementation
The design of the site was inspired by South western culture but kept minimal for maximal information content and accessibility.
Contact form
- Implementation
I used the contact form that was introduced to us during the mini project challenge because I liked how it sit in the middle of the page and is very straightforward. I wanted to add an "add images" button but realized that I needed to know some JS. I customized it a bit by adding margins, a checkbox and a modal button. As skills grows, JavaScript will be introduced to ensure that the form must be validated before modal appears. For now the contact form doesn't work as it is not using a PHP. All input elements work and are responsive.
Google Calendar
- Implementation
Embedding a Google Calendar is pretty straightforward and customable within the Google site and I initially did some inline styling in the iframe so the calendar would take 100% width/height of the column on all device... and HTML Validator didn't like that so I moved it to CSS, which all validators liked. Good Job me.
Registration Forms
- Implementation
Bootstrap has extensive documentation about forms so I extracted the code from the Bootstrap documentation and build my own fitting input areas and modal buttons. I fitted the form on lg and md screen next to the calendar and for sm screens I fitted it under the calendar and added some padding between the sections in a corresponding media query. As skills grows, JavaScript will be introduced to ensure that the form must be validated before modal appears. For now the registration form doesn't work as it is not using a PHP,
Image Gallery
- Implementation
My mentor suggested after seeing my wireframe during our preliminary meeting that I should use the Fancybox library. After researching it, I resized my images with Gimp to create the thumbnails and used this Bootstrap gallery template for the responsivness and added the Fancybox "data-fancybox" and alt text.**
Modal buttons
-
Implementation
-
I used the Bootstrap documentation to implement a modal on button click in the contact form and the registration form and customized it with according text and button styling.
I still have nightmares about bootstrap cards. The horror, oh the horror. It doesn't show on my commits because I wanted to commit only when I was satisfied with it.
But that's not all, so here we go:
During development
- Cards responsivness:
- Initial card image top didn't fit on lg screen so I went for a bigger image.
- Then the card was taking too much width on lg and sm screen (strangely it was ok on md screen) no matter what grid system I would use. So I started again from zero.
- Extracted the code from the Bootstrap library and added the .card-img-top class to my image and it worked.
- I almost cried of happiness.
- Then I added a list in the card-body and everything broke down in lenght because it was too much text.
- So I decided to go for a small paragraph of text and it looked a 100% times better. To me the cards are still a bit long and this is something I will work more on in the future.
Overflow
- After deploying my website and submitting it for peer-review on Slack another student picked on my website having a bit of overflow on mobile.
- I downloaded Unicorn Revealer (Chrome extenstion), grabbed a web designer friend and discovered it was the bootstrap row class in the hero-container of my Title section in index.html.
- I removed it and it now works beautifully.
Electric LadyLand Silver was developed on GitPod, using GitHub to host the repository and deployed on GitHub Pages. GitHub made the deployment extremely painless:
- Connected to Github
- Selected the repository AudreyLL88/Electric_LadyLand_Silver
- Clicked on "settings" in the navigation bar
- In the GitHub Pages I selected Master Branch and /root in the dropdown menu and clicked Save
- I waited 2 minutes.
- And voila! The website is now live on https://audreyll88.github.io/Electric_LadyLand_Silver/
Cloning ? No problem:
- In my repository AudreyLL88/MS1, click on the "Code" green button, copy in clipboard the HTTPS link, open your browser and look through my files.
- The link : https://github.com/AudreyLL88/Electric_LadyLand_Silver.git
Text Credits:
- Reviews by Mimmi (last name unknown) and Jacqueline Burdett
- Text content by myself and the sweet and exceptional Matildha Cedborger
Images Credits
- Hero image, gallery images and about section: Matildha Cedborger
- Pricing card image top: Levon Burdett
- Reviews images: Jacqueline Burdett and myself
- Logo in navigation bar: Sofia Lindquist
Many thanks to:
- My mentor Ignatius Ukwuoma for his patience and kindness
- Byllsa for her very inspiring ReadME
- Matildha Cedborger for her passion, her ideas and her talent
- Code Institute Slack community for the technical and emotional support
- Ivar Dahlberg, technical artist at Embark but also my poor husband who heard me vent and cooked me food while I was staring at my screen.
- Adrian Griffin, web designer extraordinaire who was my second pair of eyes when I coudn't see straight.
- Mesaicos Stockholm LandHockey team for cutting me some slack for not being very alert (and I am the goalkeeper...)
Site for educational purposes only! (for now)