CleliaMente design studio is a portfolio to showcase the work of Designer Clelia Giannuoli.
The user should be able to interact with the website freely and be able to visit the portfolio section of the site and be able to book clelia via their contact page. Also to get more information about the designer via their about page.
This Site is for users who are interested in hiring a designer.
Agile Methodology was used via In person between myself and the designer. Making sure regular meetins where attended to get the desired outcome of what the designer was looking for in terms of the aesthetics of the website.
All tasks whered crossed out via the kanban board provided to myself via notes.
•As a user I have the option to make a call back request via the contact section leaving my Name, Phone number, and email address.
•As a user I can see where the design studio is located on the map so I can contact the designer.
The Portfolio is designed is for a Design studio that provides Freelance services. It invites the users to be able to book the Designer for Design services.
The Application purpose is also to inspire users to try and get into design.
This will give the incentive of Users sharing these with other potential customers bringing more awareness to the site.
Wireframes were provided by templates via template jungle. Based on the existing template I transformed the template of an Architect firm to a design studio.
(Colours for Cleliamente)
• #84413F Amaranth Purple for the colour of the lips that brighten the page from the Hero image.
• #FFFFFF White Of the whitespace of the site that contains the various sections of the website
• #9E9E9E Cadet Grey for the buttons on the website.
• #F3452A Cinnabar for the image on the hero section of the portfolio site
• #DCE4DD Alabaster For box sections of the website
• #44A0A2 Verdigris for one of the main project pages of the portfolio site
• #38729E UCLA Blue for one of the main project pages of the portfolio site
• #C73653 Rose Red for one of the main project pages of the portfolio site
• #B19E87 Khaki for one of the main project pages of the portfolio site
The home page has an attractive layout to keep the user engaged and excited to get into contact with the designer while getting to learn a bit about them. The page has a Navigation bar that links to other sections of the site and buttons on the page that link straight to contacting.
Portfolio Page has an eye-catching layout to keep the user engaged and intrigied to look at the various projects available to be viewed in the gallery section of the individual projects.
The About page will consist of the bulk story element of the design studio and their back story.
The Contact page also has a Google maps location of the Design studio.
In order to deploy site to Github I had to do the following: • Select Settings at top of Repository page. • Click on Pages button on the navigation for GitHub Pages. • Click on source and select Master Branch to commit action of page to. Link below: Github Pages
HTML - Used for the template structures.
CSS - Used to style the markup.
PHP - For the contact page functions
SCSS - For some of the site styling.
Javascript - Custom use minimal, for some of the aesthetic scrolling features of hero and nav bar.
GitHub - to store the overall project repository.
GitPod - used as a workspace to do the coding.
Figma - To design the wireframe of the complete project.
Google Fonts - for main fonts.
Icon Scout - for custom social media icons
Bootstrap - grid, layout, columns, cards and forms structure.
Coolors - to choose the colour palette and colour shades.
AmIResponsive - responsiveness of the site.
Lighthouse - used for testing site functionality.
W3C Markup Validation Service - used for HTML testing.
W3C CSS Validation Service - used for CSS testing
Template Jungle
Youtube
HTML template credit to Template Jungle. I have amended the code to my Design Studio sites specification.