Welcome to qubartstudios. This is a professional photographer's website. The domain of qubartstudios.com is wedding photography.

The site targets potential customers who are planning their weddings. It gives an overview of previous artwork and backs it up with strong customer testimonials.

Customers can get in touch with the studio directly by the phone, through the contact form or social media.

The main goal of the project is to give a modern look to the old website and learn along the way.

• ux
  • user goals
  • user stories
  • site owner goals
  • user requirements and expectations
    • requirements
    • expectations
  • design choices
    • fonts
    • icons
    • colors
    • structure
  • wireframes
  • features
    • existing features
      • navigation bar
      • home page
      • ethos section
      • portfolio section and page
      • about section
      • testimonials section
      • contact section
      • footer
    • future developments
  • technologies used
    • languages
    • libraries and frameworks
    • tools
  • testing
    • images
    • during testing
    • unfixed bugs
  • deployment
  • credits

• visually appealing, including images
• easily navigated around
• easily found contact details
• form to directly contact the company
• responsive design

• as a user, I want to see professional artwork of the photographer
• as a user, I want to contact studio by phone
• as a user, I want to contact studio by email
• as a user, I want to contact studio through website
• as a user, I want to contact studio by facebook
• as a user, I want to contact studio by instagram
• as a user, I want to get back to home page easily
• as a user, I want to see recent artwork
• as a user, I want to see testimonials of previous customers
• as a user, I want to see basic information about the studio

• modernise the existing website
• increase traffic to the website
• increase customer conversion
• optimise for organic SEO

• clearly visible contact details and methods
• information about services
• visually appealing, neat and tidy design
• responsive design to accommodate modern screen sizes

• I expect to see contact details on every page
• I expect all contact details to be correct
• I expect all links to work
• I expect all external links to open in new tabs
• I expect fast website load without loss of image quality
• I expect confirmation message on form submission
• I expect website will work on phones, tablets and laptops

  back to top
 

I used Google Fonts. The font used for the entire website is Poppins.

The use of small caps for headings, navbars and other components on the website is intentional and is part of the design. This also applies to readme.md file.

I used Font Awesome library for extra visual cues.

• #f1f1f1; - navigation bar color
• #f1f1f1; and #ffffff; - main background color
• #4f4f4f; - font color
• #b11942; - input buttons color
• #000; and #fff; - logo colors
• #4f4f4f; - footer color
• #2c3135; - design by color

Website is responsive with min-size of iPhone 4 (320px - wide) The screen size breakpoints are from Bootstrap breakpoints.

  back to top
 

I use diagrams.net to develop wireframes for the website. wireframes are designed for large screen only. I used Mozilla Firefox and Chrome developer tools to scale down and adjust design for smaller screens.

The wireframe of pages below:

• index.html page

• portfolio.html page

• mobile version of the page

  back to top
 

Responsive navigation bar adapts to various screen sizes. Includes active link for the phone number and emails address. Each section of the page has a clear heading to inform user on whic part of the websit is currently visible.

On smaller devices (<992px), navigation bar changes to "hamburger" style.

• home page hero image

  • the image spans over the whole height of the screen and gives the user clear message about the intent of the website, thsi works for each screen size
  • the message over the image invites visitor to think of it as a work of art
  • there is a "scroll down" button inviting user to explore more

  

• the ethos section gives a brief introduction and invitation to explore further

• the portfolio section gives quick overview of the recent or best projects chosen by the owner
• user can click each photo to view gallery of images

portfolio - index.html page

gallery of images - portfolio.html page

• the about section gives an information about the owner of the company, it's passion and a personal touch. Visitor can "meet" and get to "know" the owner.

• the testimonial section helps to build trust, reputation, relationship and assure the potential visitors that the qubartstuidos.com is a reliable supplier

  back to top
 

• the contact section provides basic information to help visitor to get in touch with qubartstudios.com

• name, email address and the message fields are required. Email is also validated

• all fields are labelled and include words "required" or "optional" for the accessibility purposes

• additional visual cue is provided when hover over or select any of the fields

• instant feedback is provided upon form submission in the form of thanks.html page

  
   

  contact form

  form submission confirmation - thanks.html page

  back to top
 

• the footer contains the social media links (open in new tab)

• social media links have the hover over effect which serves as an additional visual cue

• site map

• the copyright text

• logo - acting as home page (back to top)

• information about the designer

   

  
   

• expand on portfolio gallery, each photo to represtent different wedding in the gallery and links to sub-category page with related photos
• package pricing page
• video content gallery and with the description of services available
• additional services:
  • anniversary photography
  • engagement photography
  • family photography
  • maternity and new born photography
• e-commerce
  • albums
  • canvases
  • large format prints
  • POS products
• blog
  • planning tips
  • recent weddings
      back to top
     

• HTML
• CSS

• Google Fonts
• Font Awesome library

• Gitpod
• Github
• diagrams.net
• W3C HTML Validation Service
• W3C CSS Validation Service
• autoprefixer
• lighthouse
• Pexels
• WebFX
• cdnjs.com
• TinyPNG
• Photoshop
• qubartstudios.com

  back to top
 

I feel that I achieved agreed goals. The site is responsive. Images were optimised for web use to load faster yet still look sharp and crips. Website is clean and simple, there is no noise to discrat the user. Each section was designed with minimalist approach. Navigation bar is sticky on all devices and on large devices upward phone number and email addres is always visible.

Contact form requires minimum information to not to overwhelm potential customer.

Social media links are clear visible in the footer and open up in the separate tab so the user can always come back to the main website.

The biggest challenge and lesson learnt was that I designed the site for the large screen first 1200px and up. This caused a number of issues when trying to scale down. In the end I decided to refactor the whole code for the small devices firsst and use media queris to scale up for larger devices. I added grid and flex to ensure that the pages scaled nicely. It was chellenging and frustrating at times but it was always fun time.

All images on the webiste were compressed using TinyPNG

• Hero text was too small for devices from 576px upwards so I added media query just to deal with it

• In my wireframes, I had designed about page as a separate html page. In the end I did not like idea to be directed to a different page just to see those details. I embedded it in between portfolio and testimonials section on the index.html page

• When I switched to iPhone 4 device size my hamburger menu would disappear. I found chrome extension Unicorn Revealer - designed actually by my mentor Simen - that helps to identify items which overflow. This tool helped me to identify the cluprit quickly and deal with it. The social media icon had padding too big for smaller screens and pushed the width of the website beyond the viewport

• I had issue with the top of hero image on smaller devices. 100vh viewport was actually longer than the visible screen. After couple of trial and errors I noticed the this is caused by the navigation bar. This is where I developed image height to be a calculated figure that takes 100vh and subtracts height of the navbar of 6rem. This gives a nice full screen view of the hero image one every screen size

• Due to change in the design strategy. I found that I had a lot of repeated code in my style.css file. It took a great deal of time to find and remove it and test to ensure that nothing I removed impacted my design

• I run my webstie through W3C Markup Validation Service. Intial response returned 7 errors and 2 warnings (screenshot below). Second validation returned 1 minor warning

Initial Markup Test

Second Markup Test

Third Markup Test

• Subsequently I ran validation of my css styles using W3C CSS Validation Service. Which to my surprise did not return any errors.

Initial CSS Test

• Accessibility test was pushed through experte.com. My intial test returned just few errors. There was an issue with the aria labels around social media icon links of each page. Also contrast ratio between text of the button and actual background color was not too strong therefore I decided to give it new --maroon-shade value. Second test came up really good.

Initail Accessibility Test

Second Accessibility Test

• Final testing was performed by Google's Lighthouse

desktop size index.html

desktop size portfolio.html

desktop size thanks.html

 
mobile size index.html

mobile size portfolio.html

mobile size thanks.html
 

• Website was also tested on physical mobile devices:
  • Galaxy Tab A On testing on a physical mobile devices
  • Google Pixel 4XL
  • Iphone XR
  • iPad 6th generation 2018

• Last but not least I tested website and its responsiveness on 5 browsers:
  • chrome - used most of the time throughout the project alnog with the developer tools
  • firefox
  • opera
  • vivaldi
  • edge

  back to top
 

• The mobile version of the website should have smaller image to in the place of the full desktop one. This would improve its performace.
• I come across weird issue on during my tests on Vivaldi and Firefox website. Althoug CSS code was run through autoprefixer this did not fixe the issue. The issue is with the first landscape image on the portfolio page where the image does not span to full width of the grid container when I change the width of it with the developer tools. It only happens in those 2 browsers.
• I would like to revisit the html structure, classes and ids. I am sure I could cut down on lines of code in my CSS file to make it better. Other than that qubartstudios website needs more features mentioned in future developments section.

  back to top
 

The project was deployed on GitHub pages after initial commits using following process:

• Navigate to the repository on github and click 'Settings'
• Then select 'Pages' on the side navigation
• Select the 'None' dropdown, and then click 'master'
• Click on the 'Save' button.
• Now the website is now live on https://lukaszkukla.github.io/qubartstudios/
• If any changes are required, they can be done, committed and pushed to GitHub and the changes will be updated

  back to top
 

• Simen Daehlin - for code inspiration, help and advice

• Sam Timmins - for readme template, structure and some ideas that sparked from using it

• peer community on code institute slack channel

• kasia_ci from code institute - for "standing up" to the task and listening to the whole class weekly and patiently advising on best course of action
    back to top