E.mote: Code First Girls Project
Once we had finished the development stage of our website, we needed to then present this to our peers and instructors on the course. Unfortunately, I wasn't able to attend this session as I had been scheduled a work shift during this time frame. Our other teammate Li, was currently living in Malaysia and struggled with the time difference throughout the course. As the clocks went forward an hour, this meant that she had even less time to help develop the website and attending the presentation would have been at an unsociable hour in the morning.
As only one person needed to present as a minimum requirement we nominated our teammate Funmi. She was not only a strong speaker but had participated in group presentations previously for other courses. Therefore I knew her speaking experience would be beneficial to the team and was the best option considering our circumstances.
I aided Funmi with some information about developing the website the evening before the presentations, to make sure that we had covered every aspect of our process from design to development.
I have included Funmi's presentation script/notes for reference:
Hi, I’m Funmi and I’m presenting on the behalf of Team Fashion to show you our site e.mote.
The idea (start on emote homepage)
We came up with the idea of creating an online webzine which would offer fashion advice and tips based on styles which are popular with people around our age. We found this idea helped with the requirement of consistency as each style page could share the same layout, the key distinction to each page being the descriptions and chosen photos.
We came up with the name emote, deriving from the Norwegian word Mote which means fashion. We added the e. as we wanted to communicate that our site helps people find expression through their clothing. Likewise, the title is a double entendre because e can also stand for electronic, meaning our site can be read an as electronic wardrobe.
Design process (show the Figma board during this bit)
- Zoom call where we discussed initial ideas.
- We then figured out who was best suited to each style whilst searching through Unsplash and Pexels to make sure there would be enough pictures to make a page.
- Likewise, we used this time to delegate tasks based on our time constraints, commitments and strengths.
- We used Trello, so we could tick off each of our tasks and keep track of the project.
- Figma was used for brainstorming ideas and created a mood board. Whilst we were initially meant to create a prototype of the site, but due to time constraints, we ended up creating a basic wireframe for the home page and style page on a piece of paper.
- We were inspired from e-commerce sites as these are the most popular fashion ones, where we found a common motif is a white background with a bold logo and subtle bright colours implemented to make the site visually stimulating.
- We used colour scheme websites to help inspire our initial design
https://mycolor.space/?hex=%23EECAC2&sub=1 https://www.schemecolor.com/not-a-bag-lady.php
- Researched google fonts to help find a nice/readable font
Development (show sandbox)
Show Home Page
- The home page had thumbnails for each of the styles we created pages for
- We liked my footer from the portfolio site we worked on so we lifted it for this site.
- Likewise, While developing we out the headers and footers in the JS file so we could quickly implement changes without repasting. However, as we wanted the navigation bar to allow for the link underline to apply on the active page. However, we kept the footer on the JS page because it would be the same on each page.
Show About Us page
- We created a short description explaining what our project was. We naturally found that by asking people to tell us what they think about the site - this was the most natural way to implement the contact form.
- We lifted the contact form from our portfolio sites
Show Y2K page
- We created 2 bootstrap carousel for each style page. This first one shows full person outfit pictures. Whilst the second one would show accessories. Next to each carousel was a description of the fashion style and any key accessories.
- When we were finalising the site over the weekend we found issues with maximum storage space on sandbox (50mb).
- We really had to filter out pictures and delete pictures from past sandboxes. Luckily for my course site, I used embedded images rather than uploaded ones, so we were able to import via my side as I had excess memory. So we utilised a google drive where I uploaded on my team members behalf.
- Likewise, as we wanted each image to be the same size in the carousel so we resized them on the program Sketch.
- We wanted to utilise more pictures, so we thought that a Pinterest board could bypass the requirement of royalty-free images. So we researched how to embed Pinterest boards on the site which involved adding scripts to the bottom of each page.
- Finally, we linked to brands and stores as well as Instagram accounts which represented each style. We tested every link to make sure it goes to the correct site or page.
Run through Alternative and Classy Pages
Go back to the home page and move to mobile size
- We wanted to make our navigation bar mobile responsive, so we used the Bootstrap one. As you could see earlier, between each navigation link we had a pink dot for decorative purposes. However, when we initially implemented the responsive bar we noticed that the pink dot would fall under each nav link in the column form which looked ugly and unappealing. It also made the navbar unnecessarily long.
- So we altered the code so that we did not make the dots a nav item so that it was not present when the bar collapses into its hamburger form
- Likewise, we utilised media queries which meant that when the screen size was condensed the font size of the pink dot would become 0 as well as reducing the padding between each navigation link to make the site for user friendly.
