This website was created for a fictional antique photo restoration business. As this type of business is often small or even family-run, a customer is always at the very focus of every decision making. With that in mind, we can assume that the budget for website development and maintenance may be restricted and that we need the website to be simple, small (only few pages long), but effective and attention-grabbing, so the the sparked interest encourages the customer to get in touch to find out more and allows the business owners to stand out from the competition without enduring high costs for website design and maintenance.
Business Objectives:
- A simple to maintain and budget-friendly website
- An additional outlet (on top of their social media accounts) for a visual representation of the quality service that the business offers
- Widened customer target and reach
- An opportunity for additional branding and credibility
- Additional source of business
Customer Objectives:
- A website that is easy to access, navigate and read
- An opportunity to verify if the business is legitimate
- An opportunity to check the quality of work produced by the business
- An opporunity to compare the business with other businessesn on the market
- An opportunity to get in touch with the business in just one click
- A chance to find out more about the owners of the business and how long was the business operating
Improvements to roll out in future:
- Add page with a detailed list of services and (estimated) price list
- Add page about the team and businesses contributions towards local community (with images)
- Section with links and icons for social media
- Include a "behind-the-scenes" video
- Offer online gift vouchers
Overall summary:
(please remember that the business is fictional)
Business owners decided to invest in a website that would be able to showcase their work and spark an interest in customer.
The main idea was to nurture the customer with an astetically pleasing website and encourage them to get in touch.
The website needed to be functional, simple, yet with corporation of quirky design elements. As the businesses operation is based on hand-on creativity, yet very tighly connected to vintage and antique timeline, it was important to show that the business is keeping up with the modern design trends, yet staying true to their main vintage theme.
After inspecting their main customer profiles, the business confirmed that their main target audience is comprised of 45-65 age group of working professionals with children.
Restoring family heilrooms and memories is incredibly important to them. Not only to relive the happy moments from their childhood, or to gift their parents with a restored old wedding photograph, but to pass this small family heritage to their own children.
Being able to know that the business understands the emotional value behind the services that they provide and is able to produce quality work out of severely damaged or faded pictures is their number one priority. Helping the business to stand out from the competition, whist translating back to the customer the values mentioned above, was my own priority when completing this project.
The strategy was developed in-line with businesses objections and it's target audience.
My mission was to produce a website, that can stand out from the competition, yet remain simple, easy to understand and be astetically appealing to different age groups.
It was important for the business to have a website that can demonstrate their work, values, professionalism and taste of style, without overloading the customer with information or visual elements. As the business is built on creativity and craftsmanship, it was important to communicate it back via website design to the customer.
The time frame, business goals and my own skills naturally dictated the the path of minimalist website that will be only few pages long and will be divided 50/50 between meeting business goals and customer objectives, without complicated colour schemes and with only few focus points per each section.
The following principle (for website content p/section) was determined early on:
- visual + informative element (image + text) - option 1
- informative element only (text/form) - option 2
- visual element only (image) - option 3
This single-page website consists of the following sections and elements:
- Navigation menu (header section)
- Hero section with company's name
- About us section
- Gallery section
- Get in touch (footer) section
Although the website needed to look attractive and showcase the work of the business, it was important to keep the element structure simple and make sure that every element compliments another and the website's appearance is cohesive across all sections.
This was achieved by deciding early on the sections (above), not adding more elements than those that were included in the wireframe and sticking to the selected color theme and layout.
Wireframes were designed with Balsamiq
A visual reference of the future website (to simplify the exact layout/color/font shoices) was designed in Canva
Fonts
- The heading font first tested on Canva was not available in Google fonts, so an alternative font (Cormorant Garamond) was found on Google fonts and used.
- The rest of the text is in Arapey font from Google fonts
- To stand out and draw user's attention, some text sections were made bold, and some italicized
Color Palette
#121210 black, #c24643 shade of pink-red, #333639 grey + white shades (#dfdfdf, #babfaa, #fff)
- The above colors comliment client's antique/vintage theme of restored photographs and stand out well on a page (high contrast levels). #c24643 shade of pink-red was added to this palette to bring some quirkiness and freshness to this color mix and was used to make selected elements stand out on a page.
Images
- As this is a fictional business, I used antique and vintage images sourced from {Pexels](https://www.pexels.com/).
Overall style
Minimalist, modern, yet with an "old-school" and vintage aestetic. A matching favicon was created with {Favicon.CC](https://www.favicon.cc/) for a more cohesive website look.
Navigation bar
- Right at the top of the page
- Consists of 4 navigation links to Home, About us, Gallery and Contact us sections
- As it was important for the business to encourage people to get in touch with then, Contact Us section was highligthed with #c24643 shade of pink-red
- When hovering over the nav bar, the text on Home, About us and Gallery changes from white to #c24643 shade of pink-red
- When hovering over, a pink-red line comes through above the menu, to emphasise to the customer that their cursor is on the navigation section
- The menu is positioned slightly to the left of the screen, which allowed the business name in the section below to stand out more
- Black background
Hero Section
- Right below the navigation bar
- Linked to and appears on the navigation bar
- Consists of text (business name and slogan) and an old photograph that along with the business name, helps to immediately identify what service is the business offering
- Black background
About Us
- Below the Hero section
- Linked to and appears on the navigation bar
- Consists of text elements and a picture
- Tells the users about the business and about business owners
- Features a hyperlinked text element that (when clicked) brings users to the contact us section
- Features a vintage photograph of a girl reading a newspaper (as this section has the largest text content) wrapped in #c24643 shade of pink-red arch
- Includes an additional slogan (vertical text)
- Black background
Gallery
- Below the About us section
- Linked to and appears on the navigation bar
- Consists of gallery of photos (5 in total) operated by radio buttons
- When hovering over the radio buttons, they change their color from black to #c24643 shade of pink-red
- Black background
Contact us
- Below the Gallery section
- Linked to and appears on the navigation bar
- Contrasting color heading that matches the navigation bar
- Consists of form with text input fields, check boxes and submission button
- When hovering over the submit button, it changes it's background color and text (from white background color to #c24643 shade of pink-red; from black text to white)
- Black background
(from the description section)
Desired features for future implementation:
- Social media section with social media icons
- A page with a detailed list of services and (estimated) price list
- Replace the images and text with "behind-the-scenes" video in hero section
- Offer online gift vouchers (purchase page)
- Customer account feature with ongoing and finished projects
Avoided:
- Adding the smooth scroll effect, as it potentically can have a negative impact on accessibility. CSS tricks Blog
Laguages
- HTML5
- CSS3
Integrated
- Google Fonts (fonts)
- Favicon.CC (favicon)
Workspace
- GitPod (IDE coding environment)
- GitHub (Hosting platform/service for storing and managing my repositories)
Other
- Balsamiq (desktop, tablet, mobile viewport wireframes)
- Canva (this design tool was used to create a visual reference of the future website)
- Git (version control)
- Google chrome devtools (for temporary editing and debugging)
This website was tested manually by 2 people (myself and my friend) on Microsoft Edge, Opera and Google Chrome browsers using laptop, tablet and phone devices. The website was loading fast, the navigation and other elements worked as intented.
However, there is a big issue with responsiveness of the website.
The website does not behave as it should. Many items were checked and tested to resolve this and my personal feel is that the core structure needs re-arranging. I did not use Bootstrap when building my website and I believe this could have been avoided if I availed of the technology.
Unfortunately, I had to remove most of my media query code, as on some browsers it was conflicting with other elements on the page, even on viewport that it was designed in (standard laptop).
Testing
Most of the features were tested immediately when implemented and only if the code proved to be working, new features were added to the website.
Common issues that were resolved when entering the code & looking at the output in a browser:
- Spelling mistakes
- Wrong fonts used
- Wrong colors used
- Brackets not closed
- Wrong mapping of the images
- Width of gallery sliders (so they match the width of the gallery and dont overlap)
A lot of adjustments were done to positioning of the below elements on the page (via code and direct output and via temporary adjustments on Google dev tools):
- Font-size and font-weight
- Nav bar - positioning
- Nav bar - spacing
- Nav bar - hovering over effects
- Hero image positioning and size
- Arc element positioning and size
- Arc element - border width
- Arc element - picture positioning
- Gallery - size, centering, positioning
- Gallery - hovering over effects, background colors
- Gallery - radio buttons functionality, spacing, size, positioning
- Form - centering, positioning, spacing
- Form - hovering over effects
Lighthouse
CSS validator issues were not addressed
Website
- The favicon should be visible
Navigation bar
- The nav bar elements should be positioned slightly to the left
- A red line should come through above the menu when the coursor is one one of the navigation elements
- A font color should change to red when hovering over the Home, About us, Contact us sections
- Failed - responsiveness
Hero Section
- Right below the navigation bar
- When home is selected on the nav bar, this section should appear
- Text (business name and slogan) and photograph should load
- Failed - responsiveness
About Us
- Below the Hero section
- Linked to and appears on the navigation bar
- When about us is selected on the nav bar, this section should appear
- 2 text elements (about us and slogan) with arc shaped image should load; arc border should be red
- On the left - about us section, middle - arc image, right - vertical text
- Slogan should appear as a vertical text element
- A hyperlinked text element that (when clicked) should bring to the contact us section
- Failed - responsiveness
Gallery
- Below the About us section
- Linked to and appears on the navigation bar
- When Gallery is selected on the nav bar, this section should appear
- Gallery of photos (5 in total) should load
- Gallery should appear wide and centered on that section
- Images are selected via radio buttons
- When hovering over the radio buttons, they should change their color from black to red
- Failed - responsiveness
Contact us
- Test of the navigation link in the nav bar
- When Contact us is selected on the nav bar, this section should appear
- Text input fields, check boxes and submission button should work
- Last name section should not be mandatiory
- You should get a form submission confirmation (from code institute url for dump forms was used here)
- Hovering over effect on the submit button should work - the button should change from white to pink and text (button only) should change from black to white
- Failed - responsiveness
The website was designed on GitPod (linked to GitHub) and was deployed to GitHub. Master branch was selected on GitHub pages.
Banda agency Chornobyl case Their Chornobyl case was an inspiration to my project
Canva Their design tool helped me to better imagine what the finished product should look like and select the right fonts/colors/images.
Balsamiq This tool helped me to decide on the layout (for desktop, laptop and mobile viewports) and main elements that should be included on the website.
YouTube Helped me to beter position, size adjust my own image box
Codepen Helped me to adjust my hover effects
Love running Code Institute - the code from the 3 element section (benefits + image) has inspired and helped to create my own About us section
Sololearn Helped me with my arc element (about us section)
Youtube Inspired me and helped me to create the radio-button controlled gallery
Slack channel - peer review readme were used as a guide for my own readme Elon Masney Santorini Nail Bar Samar Ziadat
HubSpot Blog Helped with text indention on the contact us form
Markdown language guide Helped to style my Readme.md file
Code Institute learning platform Slack peer review & class channel W3 Schools Stackoverflow YouTube Balsamiq Wireframes CSS Tricks Pexels DevTools Freecode Camp AmIresponsive?
Very grateful to my course facilitator Irene who has motivated me and encouraged me through the entire project.