This is a one page website template designed by me in Adobe XD on which I then made my first attempt to turn it into a WordPress template.
Aury Silva
Primarily, I would like to point out that due to the time limit given to perform both tasks I constantly worked under pressure in order to complete both.
Short version of the brief:
I was given 2 days to design (using any tools of my choice) and develop (on WordPress) a luxury restaurant but while doing so I should keep in mind is there are critical information/communications any restaurant HP needs, for example:
1. Images demonstrating the space, lifestyle and food/drinks
2. Menu link
3. Contact information
4. Operating hours
5. Private dining
6. Allowing us to showcase multiple venues all over the world
7. Reservation buttons need to be prominent
8. Capture customers details for the newsletter
9. Please use this site for inspiration
10. The rest is up to you as we want to see your thinking
My Design choices:
As I was only given 2 days to complete both tasks, I made a choice to use Adobe XD which has a very quick approach to prototyping and interactive design.
I deliberately made a choice to only make a prototype of a single desktop webpage containing different sections as required by the brief which I then made responsive using coding. By doing such I saved some time on which I applied during the development time.
Development:
Decision making
Before starting any development, I primarily looked at the job specification and I noticed that there are several required skills for this role. Therefore, I decided to develop this website template in a way that I would demonstrate a little of every single required skill by doing the following below.
Platform used: WordPress.
Step 1 -I firstly logged into my cPanel account under “aurysilva.co.uk” where I created, I file named “spine-agency” which I then deployed the downloaded “WordPress.zip” file onto it and unzipped it.
Step 2 – I then logged in to “phpMyAdmin” where I created the database to be used later during the WordPress installation.
Step 3 – loaded the WordPress directory on the browser where I entered all the database connection credentials during the installation process.
Step 4 – once installed and logged in to my WordPress dashboard, I then installed a simple WordPress theme “Go theme” normally if I had more time I would use a WordPress theme generator such as “underscores.me“. Once “Go theme” has been installed I then made I child version of it in order to make sure that I do not break anything.
Step 5 – I decided that the body of this website will be at least 90% fully hand-coded with no frameworks like Bootstrap as this would demonstrate that I have a core understanding of responsive design.
Step 6 – I then looked through the current theme files and started shaping up the footer by adding my own footer widgets area using PHP on the “footer-4.php” and “functions.php” while using CSS to manipulate the overall visual look.
Step 7 – I figured I will need at least one plugin to manipulate the showcasing section. Once that was done, I hand-coded the whole body of the website including the menu using CSS and HTML.
Main present functionality:
- The “make a reservation” button on the “Our Menu” section opens a reservation form which I not have enough time to connect using hand coded PHP to get all the user’s input. The “onClick” function was done with handed coded JavaScript using onclick event.
- Using jQuery, I created a food and drink menu where customers can click through different tabs to find different beverages.
Missing:
Due to the time limit, I was unable to clean up my code as there are still some inline and embed CSS.
