- Introduction
- UX
- Features
- Design
- Issues and Bugs
- Technology Used
- Testing
- Deployment
- Credits
- Acknowledgements
This is a website set in a fantasy world, where exists the alebrije, an animal found in the world of death, that is a spiritual guide. Is a website of a company that can match you with an alebrije from the other world and sends it to your house or a specific location.
On this website, you are going to get information about the alebrije, the company, and what you have to do to get your spiritual guide.
This website was made for the first of five Milestone projects required to complete the Diploma in Software development (eCommerce Applications) program at The Code Institute.
The main requirements of this project are to use all the technologies learned so far, HTML5 and CSS3. Data is presented to help users achieve their goals, e.g. learning about a product/service in which they are interested. The presentation of this data advances the site owner's goals, e.g. helps them market a product/service.
- In this case, the goal of the user is to know more about alebrijes and get one by completing a form.
- The goal of the company is to get the user to complete the form so they can give as many alebrijes as users that fill out the form. Give more information to the previous user about alebrije, the company, and contact details in case the user needs help.
The ideal user for this website is:
- New user
- Current user
- Student-Curious outsider
This website is for people that would like to receive an alebrije.
- As a new user I would like to access the main page and all the sections or links that brings me to the specific piece of information I am looking for.
- As a new user I would like to know what this company offers.
- As a new user I would like to see detailed information about alebrijes and the steps to get it.
This website is for people who want to contact us for any problems or any information regarding their alebrije.
- As a current user I would like to access any contact information and social media easily.
- As a current user I would like to see more information about the story of the company out of curiosity.
- As a current user I would like to check the info about the Alebrijes.
This website is for people who would like to know more about the alebrije, about our company, or is just seeking information about alebrijes.
- As a Student/Curious outsider I would like to see any information about the alebrijes and the company.
- As a Student/Curious outsider I would like to see all the main information on the homepage and have easy links to access more detailed information.
To create a comprehensive website based on the user and company goals. It is set in a fantasy world, where this company can provide a product from the underworld.
It has a background story on the about us page on how and who created this company in this fictional world. It explains the steps to get the product and as well in detail the difference between the different kinds of products you could get.
Used to determine business goals and user needs.
Business goals:
- Get the user to fill out the form to match with the alebrije.
- Give information about the product (Alebrije).
- Give information about the step that the user has to do to get the product.
- Give information about the company.
- Give the user contact details.
User needs were determined based on different target audiences:
-
Roles:
- Current users
- New users
- Student/Curious outsider
-
Demographic:
- Minimum 18 years old
- From all over the world
-
Psychographic:
- Lifestyles:
- Interested in Animals
- Spiritual
- Personality/Attitudes:
- Problematic
- Alone
- Lost
- Need of a spiritual guide
- Lifestyles:
With the information above, the strategy plan gave the following result.
Strategy Plane - Viability/Feasibility Table
The scope plane, based on the goals established on the strategy plane, identified the following two categories.
- Content Requirements:
- The user will be looking for:
- Information on the alebrije
- Detailed information on the 4 kinds of alebrije
- Steps to follow to get the alebrije
- Just on the 2nd of November
- Make an altar to connect with the other world
- Prepare 2 dishes
- The user will be looking for:
- Functionality Requirements:
- The user will be able to:
- Be able to easily navigate the site to find the information they require.
- Be able to fill out the form to match their unique alebrije.
- The user will be able to:
The structure was then created with a site map for easy and intuitive navigation. From left to right from the most basic information :
- The homepage
- What is an alebrije
- The steps you need to follow to get one
- The form to get one
- About us page and the information about the company, founder, contact details
Structure Plane - Site-Map
Wireframes were made to organize and make the skeleton of the website. The wireframes were created using a desktop version of Balsamiq.
Skeleton Plane - Balsamiq-Wireframes
- Header = The header is composed of the name of the company and a logo( that is a mix between a horse and a bird like an alebrije) to give identity to the company throughout all the pages.
- Navigation links = Navigation links are at the top of every page, to help the user to go to a different or specific page, and for easy navigation.
- Buttons and links = They are used to go to a specific section within the same page or to a specific section on a different page to facilitate the user to find the section that he is interested in easily.
- Images and videos = They are used to give the user visive stimulation. Or another option is to follow the steps or the information without reading through everything. I used embedded youtube videos to explain a few more steps to follow.
- Embed map = Used an iframe from google Maps for the location of the pick-up point for the alebrije.
- Social media = Used social media icon on a non-static footer to give the possibility for the user to follow us on Instagram, Facebook, Youtube, and the GitHub developer account, with related content about alebrijes and purchase of alebrijes in real life. - Icons = The icons were chosen from the free Fontawesome website representing the different social media.
- Contact info = Used to give the user the possibility to contact for any information or alebrijes related problems.
- Congratulation page = To let know the user that the form was submitted correctly and to thank the user.
- 404 page = To let know the user that there was an error. Give the user a very small background story that they are in the wrong place, and a button to go to the homepage.
- 500 page = Same as the 404 error page.
- All pages header is at the top of the page, is static, and is composed by:
- Logo (Made with canva)
- Name of company (Searched based on alebrije in Businessnamegenerator)
- Navigation links to other pages (At the top of the page)
- The first three pages are composed of a text-image section. The image occupies 2/3 of the width of the page, and a text section occupies 1/3 of the page. The image and text change from right to left from one section to another to give movement to the page.
- The first 4 pages have a button represented by an arrow that points to the right at the bottom of the page, just before the footer that brings the user to the next page without having to scroll up and find the navigation links to go to the next page.
- A four-column section with the main title, is needed to go to a different page or another section on the same page. It can be with images to get the user's attention or just with a brief explanation of the specific section.
- All footer pages are composed by:
- Icons that link to social media
- Non-static line with a height of 55px and 100% width with background color: #ff914d and opacity of 0.9.
Each page of the website is responsive and easy to navigate. Below you will find detailed information on the structure and content of the page.
- Home Page
-
The content of this page is images and text. In summary, links go to different pages, to bring the user to fill out the form in the form. page or to know more about the company, it has a few reviews from the previous company to get straight away the trust of the user.
The homepage is divided in 8 different sections:- This section is the header.
- This section is the text-image section. The text section has a small text part on the right of the page and a button to bring him directly to the form page which is the main goal of the website.
- This section is a four-column section with the main title to explain the different steps to complete to get your alebrije and a link to the specific section on a different page.
- This section is the same as the second section but with the text on the left of the page.
- This section is a central section with just text and info, occupying 80% of the page.
- This section is the same as the second section but the button brings you to the about us page.
- This section is like the third section but with reviews from customers that already tried our product. Plus a button to go to the next page without going again to the top of the page.
- This section is the footer.
- Alebrije Page
-
The content of this page is images and text. To give information to the user about what is an alebrije and the difference between the 4 types of alebrijes.
The Alebrije page is divided in 10 different sections:- This section is the header.
- This section is a text-image section with the image on the right and the text and the left. It introduces the user to the alebrije.
- This section is a central section with just text and info about the alebrije and the different types of alebrijes.
- This section is a four-column section with the different kinds of alebrijes and the link for the specific section on the same page.
- This section is a text-image section but is 2/3 text on the right, with a border to divide the 2 parts, and 1/3 image on the left, representing 1 of 4 kinds of alebrijes, their pro, and cons.
- This section is like the one above just inverting the text side on the right and the image on the left.
- This section is like the fifth section.
- This section is like the sixth section.
- This section is the footer and just above the button to go to the next page.
- Steps Page
-
The content of this page is images, text, and videos embedded from youtube. To give information to the user about the steps that he will have to do in order to get the alebrije.
The user will have to complete different steps:- Wait for the 2nd of November because just on that day the bridge from the underworld opens.
- Make an altar to make the connection with the other world with a few different elements on it.
- Prepare 2 dishes: "Pan de Muerto" and the favorite dish of the user.
This is the biggest page and the one with more information.
The Steps page is divided in 7 different sections and 8 sub-sections:- This section is the header.
- This section is the text-image section. The text section has a small text part on the right part of the page and a button to bring him directly to the steps section just below.
- This section is a 4-column section where you have the main title and different steps to complete. With also has a link to go to the specific section on the same page and different page.
- This is a 3-column section divided into 2 pictures on the right and left of a central text. That explains the first step to complete.
- This is a section with an intro and text that explain the introduction of the second step to complete, followed by a video that explains the step if you do not want to read the instructions below.
-
Those are sub-sections of the second step:
- This sub-section is made up of a sub-title and a text and explains the first step to follow.
- This section is like the first one but with an image as well that is surrounded by text and explains the next step.
- This section is like the one above.
- This section is like the one above.
- This section is like the first section, just with text and without the image.
- This section is again made of a title, text, a sub-title a text and a video like the first section of the second step. It explains the third step to follow.
- The first section is a list of ingredients and a picture inside a fieldset
- This section is like the one above but instead of ingredients with instructions for the base, and without the image.
- This is like the first sub-section of ingredients, but with more instructions.
- This section is the footer and just above the button to go to the next page.
- Form Page
-
The content of this page is images, text, external links, and a formto complete. To get the information from the user so that he can match with the Alebrije. It has as well 2 different external links if the user wants more information about the alebrije football team and astrological elements.
The About-Us page is divided in 5 different sections:- This section is the header.
- This section is a form with text input, radio, a checkbox, and a button that accept terms and condition, one that submits the form and another to reset the form.
- This section is a form with terms and conditions.
- This section is an aside section that is between the 2 forms under 600px or on the right side of the first form for a screen larger than 600px.
- This section is the footer.
- About-Us Page
-
Tthe content of this page is images, text, and an embedded map from google Maps. To give information to the user about the company, the founder and the location.
The About-Us page is divided in 5 different sections:- This section is the header.
- This section is just an image occupying 100% width of the screen, representing the company in the other world.
- This section is just a text and a small image (of the founder )surrounded by text, that describes the origin of the company and the story about the founder.
- This section is a 2-column section where it says how the user can contact the company and on the right side a map with the location to where to go and get your alebrije.
- This section is the footer.
- Comgratulation Page
- The content of this page is images and a text. Which thanks the user for entering the completing the form on the Form.page.
- 404 Page
- The content of this page is images and a text. Which let the user know that there has been an error and give the possibility to go back to the homepage.
- 500 Page
- The content of this page is images and a text. Which let the user know that there has been an error and give the possibility to go back to the homepage.
All pages content remains the same, features and display change as follows:
- Navigation links get under the logo and the title on the left side.
- The 4-section column gets to 2 section column.
- Form.page get down to 1 form, under the other and in the middle the aside section.
All pages content remains the same, features and display change as follows:
- Text in the text-image section gets under the image.
- The 2-section column gets to the 1-section column.
- Three-section div gets to 1 column with 2 images at the top and the bottom, and in the middle the section with the text.
- Implementing in the step section some javascript code to hide some of the content for the steps page, so that the user can interact with the page and decide to see more info or not.
- Contact form on the About-Us page.
- Changing the navigation links menu to avoid different media queries, and implementing UX, from a basic navigation menu to a hamburger menu.
The main colors for the website were chosen with Colourmind palette generator.
Colour Palette
Those two colors were chosen based on the Day Of The Death.
The main colors in fact of that day are orange/purple/black/dark blue .
I choose orange as the main color because I wanted to represent that day and at the same time because is the color that is more represented in Mexico and "The day of the death".
The 2nd of November is celebrated all over the world but especially in Mexico.
Another color used was a darker white the #FAF9F5 used for the background of all the pages and the contrast on the dark theme.
The last color used was #E9E8E5 named = Narvik, used just on the botton in the text-side. Just to give the user a better UX experience , this color was chosen hovering over #FAF9F5, to not contrast too much the original color.
The typography was chosen with google fonts.
The two main fonts are :
- 'Arapey'
- 'Work Sans'
That goes back to safe fonts as :
- 'Serif'
- 'Sans-serif'
If the page or the browser is not compatible with the first two then it will change to "Serif" and "Sans-serif".
Many different issues and bugs were encountered by the developer throughout the project. Below a short list of the most important bugs and issues found , along with solutions for them :
- responsive images = When changing the size of the screen most of the images were just disappearing from the screen. The problem was that there was the % of the container but not an exact height set to the child , making all content disappearing.
Resolved : By searching in Stack-Overflow .
- Link to go to map = A bug was found when clicking on the link on the homepage that should go directly to the section of the map was bringing just to the map page, not the map section.
Resolved: The anchor was bringing to the first image of the about-us.html because the name of the image was the same as the id given to the map section. Changed the name from location to map and it resolved the issue.
- Left side space = An issue was found when checking responsive devices. There was a very small blank space on the right side of the page.
Resolved: Controlling and hovering each element on the page, the error was then found on the margin of the navigation menu, which was causing all the elements in the page to have this extra white space. Eliminated the margin to eliminate the issue.
The main requirements of this project are to use all the technologies learned so far, HTML5 and CSS3.
- Google Fonts
- Google fonts was used to import the fonts "Arapey", "Work Sans", "Oswald" and "Serif" , "Sans-serif" for backup fonts into the style.css file. These fonts were used throughout the project.
- Font Awesome
- Font Awesome was used on almost all pages throughout the website to import icons (e.g. social media icons).
- GitPod
- GitPod was used for writing code, commiting, and then pushing to GitHub.
- GitHub
- GitHub was used to store the project after pushing
- Balsamiq
- Balsamiq was used to create the wireframes during the design phase of the project.
- Google Maps
- Google maps was used for the embeded map to use for the location of the company.
- Canva
- Canva was used to create the logo of the company, the strategy plan and the map site for the read.me file.
- Am I Responsive?
- Am I Responsive was used in order to see responsive design throughout the process and to generate mockup imagery to be used.
- Ezgif
- Ezgif was used to convert all videos to gifs for the testing file.
- Free screen recorder
- Free screen recorder was installed on the pc, and used to screen record all videos for the testing files.
Testing information can be found in a separate testing file
This project was developed using GitPod, which was then committed and pushed to GitHub using the GitPod terminal.
To deploy everything to GiHub Pages the following steps were taken:
- Log into GitHub or create an account.
- Locate the GitHub Repository.
- At the top of the repository, select Settings from the menu items.
- Scroll down the Settings page to the "Pages" section.
- Under "Source" click the drop-down menu labelled "None" and select "Main".
- Click save or Ctrl + s.
- Scroll back down to the "Pages" section to retrieve the deployed link.
For the visual stimulation of the user is used different images and videos. There are different types of images used throughout the site:
Artistic images throughout the site were token from Art Station, they were selected for the alebrije's and for the positiob of the company in the underworld.
The following images were token from :
-
Jolanda Van Zandbergen = Used for the "Earth Alebrije".
-
Emylie Boivin = Used for the "Fire Alebrije".
-
Hadas Gold = Used for the "Air Alebrije".
-
Kadjugan = Used for "Water Alebrije".
-
Daniela Henríquez = Used for the "Homepage first image".
-
Fogwind = Used for the "Are you lost section".
-
Leon Tukker = Used for the "Company location".
-
Quentin Laville = Used for the "Form page left picture".
-
Juan D. Campos = Used for the "Form page right picture".
-
Marlyn = Used for "Congratulation message".
The other images were used to represent real scenarios or objects.
For example candles, pan de Muerto, and celebration of the day of death. And they were taken from Pixabay, Unsplash, and the movie "Coco" for the about us section on the homepage.
Youtube videos were used mainly to help the user with the steps to complete.
They are both on the steps page and help the user to:
- To prepare the altar for the arrival of the alebrije.
- To cook and prepare the Pan De Muerto.
The content of this site was mostly invented by the developer. Some information has been adapted from real stories and then changed slightly such as:
-
The story of the founder Pedro Linares López( the real inventor of the alebrije in wood) was taken from Wikipedia and then adapted.
-
The characteristics of the alebrijes were inspired from the real characteristics of the different astrological elements.
-
The recipes in the step.html were taken from Mexico in my kitchen.
-
Steps in step.html were inspired by the real Mexican tradition of the day of the death and then adapted and change for this fictional world. Info were taken from different websites that talked about mexican traditions.
The developer consulted multiple sites in order to implement and fix issues and errors while building the website.
The following sites were used on a more regular basis:
- I would like to thank my friends and family for helping me giving me many differnet feedbacks to improve the website.
- I would like to thank my tutors and my mentor, Seun, for their invaluable help and guidance throughout the process.
- Lastly, I would llike to thank the amazing people in Slack who helped me with a few issues and tested the site giving me valuable feedbacks.