Code Institute Milestone Project 2: Interactive Frontend Development
POSTFLY Business card creator is a site where it is possible to design your own business cards. The focus with this site is to combine knowledge about what it takes to design a business card with what was learned this far about HTML, CSS and JavaScript. The site’s goal is to design your own business card which you can download and request a quotation for.
By clicking this link a live demo version will be visible.
This is meant to be a B2B site which targets visitors who are in need of business cards and want to design it themselves.
- Create / design your own business card.
- Be able to choose the paper type and quantity.
- Request a sample kit with papers for if you are not familiar with the paper types.
- Request a quotation and download the designed card.
- Provide the service of designing your own business cards in an easy way, without additional designing costs.
- Reduce workload on the prepress (design) staff.
- Expand customer base.
The design goal is to make a clear, accessible, structured site so that visitors can easily design their own business cards.
The site shows a homepage with an explanation, there the user can either first request a sample kit for the paper types or start designing. On the creator site it allows the user to choose out of three different sizes of business cards, to choose a background color, to choose the paper type, to choose the quantity, to upload an own photo or logo, to edit text content, to download the designed card as a low-res jpeg file, to send a request for a quotation for the designed business cards.
This site is structured as clear as possible, it is easy to see what can be done on the page, on all screen sizes it is clear what should be done on each part of the site. The design of the card is visible on all screen sizes. This all ensures that the user knows what to do and what to expect.
Desktop wireframes
Tablet wireframes
Mobile wireframes
Surface
The colors that were used are the existing corporate identity colors, white and an off-white color, which are:
The colors used as background colors for the user to select were found when another project was inspected with the DevTools. These colors have been chosen because they are full and bright.
During development the site's layout was restructured a little bit, because this seemed visually or otherwise better. What was changed is:
- The color for the red headers and buttons were changed from #e73b3b to #e72f4c and #e02a51 because during testing #e73b3b did not give a good enough contrast.
- The icon for the website was added, because it would be logical to refer to the main website of the company.
- On the sample kit request form and the quotation request form a checkbox was added to reduce spam by checking if the user is a robot.
- The layout for desktop view on the creator.html for the card selectors was changed a bit to make it look more appealing on smaller screens and to make it more logical to follow the steps.
- The Select Size and Select Printing Method options were combined to give it a UX friendly experience.
- The buttons for adding a text field, downloading the preview file and resetting the made choices are grouped together to present a better and UX friendly experience.
- The button to upload an own file was separated from the other selectors and made pulsing to give it better attention.
- The legend which explains all the lines (bleed etc.) of the templates has been put above the template to give it a UX friendly experience.
- On the bottom of the page above the input fields for name and email address a small explanation was added to create a more UX friendly experience.
- After testing the user-friendliness was experienced as not good enough, because only the logo could be used to return to the homepage. That is why on the page for requesting the sample kit and for designing the business card, 2 buttons have been added at the top to switch between the other pages. Cancel buttons have also been added to the bottom of the forms and the request quotation button was changed to send. This increases user-friendliness.
Google Fonts was used to embed the Roboto font in the code. Roboto was chosen because this is already in use on the existing POSTFLY site and it fits the corporate identity.
For the icons on the homepage Font Awesome was used and for the other two pages the icons of Materialize were used.
The site contains the following features:
- choose out of three different sizes of business cards
- choose a background color
- choose the paper type
- choose the quantity
- upload an own photo or logo
- edit text content
- download the designed card as a low-res jpeg file
- reset the selected items
- send a request for a quotation for the designed business cards
The following items can be added:
- choose a different color for the frontside and the backside of the card
- choose the production / delivery time
- customize the paper size
- choose between round or right angles
- integrate it on the POSTFLY website
- show costs in advance without having to ask for a quotation
- set the designed business card through as an order
- HTML5
- CSS3
- Materialize 1.0.0
- JavaScript
- Fabric
- EmailJS
- Adobe XD
- Adobe Photoshop: to resize the images and provide the images of arrows, ect. where necessary (for example the README images).
- Adobe Illustrator: to adjust the business cards templates.
- Adobe InDesign to make a favicon.
- VSCode: to write the code in.
The tests have been done on multiple devices and browsers, in the end everything works as intended. Because this topic contained more content than expected, a separate page was created. For more details about testing and bugs please view this file.
To view the deployed version, the steps underneath can be followed:
- Go to GitHub
- Find Daph1986's page
- Select repositories.
- Select the Postfly-business-card-creator repository.
- Click on the link on the right side or on the link under "Demo".
By clicking that link the live demo version will be visible.
To create a live version of the website VSCode was used together with GitHub Pages. To deploy the website with GitHub pages the following steps were made:
- Login into the personal GitHub account.
- Go to the repository: https://github.com/Daph1986/Postfly-business-card-creator
- Click on settings.
- Then almost at the bottom the "GitHub Pages" part is found, the branch "master" was selected and saved.
- After a few minutes the published result was visible.
If you would like to run this website locally you can clone this repository in an IDE such as VSCode.
You can clone it by following the next steps:
- Log in at GitHub
- Find Daph1986's page
- Select repositories.
- Select the Postfly-business-card-creator repository.
- Click on the green "Code" button.
- Copy the URL.
- Open VScode or your preferred IDE, open the file or folder in which you want to use the project and open a CLI terminal.
- Put the following command in the CLI terminal:
git clone https://github.com/Daph1986/Postfly-business-card-creator.git
- Press enter and the clone will be created, it is ready to work on.
Cloning into 'Postfly-business-card-creator'...
remote: Enumerating objects: 113, done.
remote: Counting objects: 100% (113/113), done.
remote: Compressing objects: 100% (71/71), done.
remote: Total 113 (delta 34), reused 105 (delta 26), pack-reused 0
Receiving objects: 100% (113/113), 8.54 MiB | 11.13 MiB/s, done.
Resolving deltas: 100% (34/34), done.
- Go to EmailJS sign in to your existing account or sign up to create an account.
- Click on Email Services and then add new service.
- Save and click on Email Templates.
- Make 2 templates and give them the id names of "sample kit request" and "quotation request" to ensure they work with the functions in this code.
- Copy the service id as shown at step 2.
- Replace the id in the code for your own id.
- Go to Integration and copy the user id and replace your id for the id in the JavaScript file.
- The EmailJS service is set up and everything should work.
All content has been written by me.
- the POSTFLY logo provided by my colleague Filip Matthys.
- the POSTFLY business cards templates provided by my colleague Filip Matthys, edited by myself.
- image that was used to create the hero image on the landing page.
- Woman holding business card(id-2024655) by cuz.gallery.
- Toolur was used to compress the hero image.
- Color-hex was used to get the images of the colors that were used.
- Autoprefixer CSS to optimize the use of vendor extensions in the CSS code.
- Adding the defer attribute to the script files in html was a tip given by my mentor Narender, this ensures that the script files are executed when the page has finished loading.
- Codegrepper for getting the value of the checked radio buttons instead of using for loops.
- W3schools to get an idea of how to do a media query in JavaScript.
- Code Institute LMS Sending Emails Using EmailJS to get understanding on how to EmailJS works, the used EmailJS are based on what waslearned in the course material.
- DIGIdesigner this idea got me the inspiration for my subject on the milestone 2 project.
- Fabric as a library to make the functions work on the canvas.
- cdnjs to get the JavaScript cdn's from.
- JustSunOne his tutorials about Fabric were followed to get an understanding of how things worked.
- Our Code World this example was used as an inspiration for the business card creator tool.
- GitHub Wiki TOC generator this creates a table of contents for Markdown, many thanks to follow student Aukje (byIlsa_lead) for sharing this.
- Am I Responsive? to check the responsiveness and make the mockups.
- My mentor from Code Institute, thank you Narender for your time and guidance.
- My husband, thank you Django for taking care of our son more so I can work on my education, thank you for your patience, thank you for your extra explanation about JavaScript and thank you for checking my project!
- My colleague Bart Lauwaert for helping with the translation of the correct English names for the paper types.
- Aukje (byIlsa_lead) thank you for hosting a "Preparing for your Second Milestone Project" call on zoom, it was really helpful! Also thank you for your time and effort to go through my code in order to help me with my question about my form.
- Cormac, Johann and Scott from Code Institute tutor assistance, thank you for helping me with my questions.
- Special thanks to my colleagues, friends and family for their support, tips and for testing my site.