The project is a website for a company providing services in aerial photography & filming on the territory of the Czech Republic. The website provides info about the company, equipment it uses for its projects, a list of services it provides, also showcases a number of projects and photo gallery. There is a contact page with address of the company, a Google map with its location, and a contact form which enables visitors to contact the company. The footer contains a link to the license from the Civil Aviation Authority, and links to social media pages of the company.
The business goals of this website are:
-
Create online presence, and provide info about the company, its services.
-
Present examples of projects, types and quality of photos, & demonstrate company's experience.
-
Offer a simple way to find the company's location and contact it via a contact form.
The customer goals of this website are:
-
Searching for a company providing aerial photo/video services with suitable experience and capabilities.
-
Access to the company's portfolio of services & implemented projects.
-
Clear info about license/permit to provide the offered services.
-
Easy and clear means of contacting the company.
Balsamiq wireframes software was used to create wireframes for this project. PDF and BMPR files are stored in the wireframes folder.
 |
 |
 |
You can see all the other wireframes here:
The purpose of the site is to provide a simple, easy to use format presenting information about the company, its services, and its experience by presenting implemented projects & photo portfolio. It is aimed at potential private and business clients from various industries, inlcuding (but not limited to) real estate, sport & cultural events, tourism & travel, industrial complexes & construction, etc. The target visitor is English or Czech speaking (for now the website is implemented in English).
- First visitor is welcomed by a great view of the worldwide known landmark of Prague - The Charles bridge, from an unusual viewpoint. This shows a visitor what great and unorthodox image can be captured from any point in the air around the point of interest.
- Right underneath the main image a potential client can get directly to company's info & its services. The services area features more aerial images of Czech landmarks and industrial buildings.
- A new visitor can easily & intuitively navigate between the pages, so no time is wasted searching for things. The main menu is clearly presented on the main/hero image and a visitor won't get confused with how to navigate the site.
- A visitor can access immediately the list and description of provided services, used equipment, and featured implemented projects, featuring impressive photos. For enhanced impression the section featuring the projects is complemented by a gallery of best aerial photos.
- All the pages provide easy access to social media (Facebook, Instagram, LinkedIn), which contain more photos and videos produced by the company.
- A potential client can see what type of projects the company implmented, and get a clear idea of its experience by browsing through projects and photo gallery.
- Any potential client or a business with time constraints can use the contact form quickly & intuitively to get more info or discuss cooperation.
The website has three pages (Home, Projects, and Contact). Each page has a clearly visible responsive navigation menu in the bottom-right corner of the hero image, a logo in the top left-hand corner and a footer that has license & copyright information, plus links to social media - Facebook, Instagram, LinkedIn. The website's objective is to maximise the amount of exposure of the user to aerial photographs, so all the pages have the hero image (responsive to attract attention) depicting an appealing aerial view of the well-known touristic & historical landmark of Prague - the Charles bridge. A user will see the hero image every time switching between pages, the animation of which is intended to grab a visitor's attention every time any page re-loads. Plus Services, Projects and Gallery contain a lot of high quality aerial photos to create a deep impression on a visitor.
- I used two fonts:
- Quantico for its technical look to convey connection the advanced technology of UAVs, used in the Logo and copyright info in the footer
- Ruda, for its slightly similar to technical look, but also quite normal, easily readable; used for all other texts on the website.
- I used two main colour palettes:
- Dark blue/violet, and matching colours, to connect to the colour of the river on the hero image, used for the logo, buttons, links, responsive backgrounds, etc.
- Muted section backgrounds, to create visual separation between parts of the web-site, but not to distract attention from the main areas.
The Home page has a responsive hero image to create attention-grabbing experience for the user. Responsive menu is placed in the right-bottom corner of the hero image on the dark background of the Vltava river. It is easily visble for users to see it right away. The menu icons react to mouse movement so that a visitor can easily navigation between pages.
Below the hero image the page is split into 1/3-2/3, where left side provide descriptive info about the company and the equipment it uses for its projects. The right side gives a list of services the company provides with appealing aerial photos and description of the services.
The Projects page features a number of projects with photos and description of the projects' objectives, and description of the points of interest or sites photographed. The page is following the 1/3-2/3 split, where pictures take the left narrower side, and the titles and descriptions cover the right 2/3 side. The Projects section is responsive, and images become full screen wide in Pads and phones, and placed above respective descriptions of the projects.
Gallery is placed below the Projects section and features best aerial shots to showcase the artistic quality and experience of the company. The photos organizes in a tile formation, 4 pictures/tiles in a row, with a responsive resizing of 3 images per line for Pads, and 2 images/line for phones.
The contact page contains the responsive hero image with the menu, address of the company with an interactive google map and a contact form.
- Header Logo: Each page has a logo in the top-left corner of the hero image, and has an active link to the home page(index.html). The purpose of this is to create a sense of the brand.
- Header Navigation: There is a navigation menu at the bottom-right side of the hero image, clearly visible on the dark background, and easily spotted by a first-time or repeated visitor. The menu re-arranges itself into vertical for mobile view. In both views icons increase in size with mouse movement to show a user which menu-item/link is about to be clicked.
- Footer License Info (present at every page): License info with a link to a flights permit from the Czech Civil Aviation Authority.
- Footer Copyright Info (present at every page): Copyright Information for all the content present on the website.
- Footer Social Icons(present at every page): Instagram, Facebook, LinkedIn Icons for easier access to social media of the company.
- About the Company Section - Introduces the potential client to the company, gives a brief summary of its activities.
- Equipment section - describes the quadcopter used for projects, and a link to the quads' producer's web, which provides very detailed info.
- Projects Section is placed right next to About and provides full info on all the services the company offers.
- Gallery section is intended to make a strong impression by showcasing the best aerial pictures, and enhance the impression of quality and professionalism of the company.
- Contact Form - Gives a client the opportunity to get in touch with the company & ask further questions.
Due to time constraints and whishing not to extend deadline of submitting the project, I have decided to keep some features implementation or fine-tuning, improvements of existing ones for later.
- Expand the Projects section into a separate page and present more projects.
- Expand Gallery section into a separate page and add more photos.
- Create a separate Video Gallery page.
- Czech language version.
- Connect contact form to an email server, and make the form work properly
- Some fine tuning mentioned in the Testing write up section in italics.
- HTML and CSS were used to code this project.
- Bootstrap CDN was used for a responsive menu.
- Font Awesome was used for icons in the menu and social media links in the footer.
- Google Fonts was used to style text on the website.
- Google Maps was used for embedded map in the address section of the Contact page.
- Autoprefixer to make sure your css has all the prefixes it needs to work on all modern browsers.
- Github for creating repositories, storing files, publishing developed pages.
- Gitpod as an IDE to create the project code, files, file structure, upload files, and push all of this into Github.
- ChromeDevtools to check created code and possible inconsistences, find best parameters for various code items.
The validity of the code and potential errors were checked for both HTML and CSS using the following validators:
- Got warnings for a number of added by the Autoprefixer parameters, e.g. "-webkit-box-sizing".
- During a check I got warning and recommendation not to use H1 for Projects & Gallery titles, but i decided to keep them as H2 would be small for needed visual effect.
The responsiveness of the website for various screen sizes was tested via this website:
Am I responsive. Though it tests for various Apple devices, it gave a solid idea whether the website is responsive.
-
Laptop Google Chrome, Internet Edge; all pages, links on those pages, and footer icon links perform well on all viewport sizes. Developer tools were also used on all browsers for the various viewport sizes.
-
Mobile Used my Samsung A7 to test; all pages, links, icons performed well on all devices using Chrome.
-
Desktop & Pad Checked via Am I responsive where you can scroll and click buttons & links on all the screens.
-
As a potential client I can immediately see the appealing view of the Charles bridge, so i can immediately fell how aerial images can impress people by being taken from very unusual viewpoints.
- The landing page immediately provides the client with an appealing view, and all the necessary menu items to navigate, as well as About and Services section.
- A link for Projects page, containing pictures and info of implemented projects, and photo gallery, is located right at the hero image for easy access to those sections. The link has an attention grabing icon.
-
As a potential client, I have easy access to the company's description, services, and used equipment.
- A call to action is located right under the Services' description, and takes a visitor to Projects page.
- A brief description of the company is placed right under the hero image, straight line down from the main logo. It gives a quick introduction of the company to visitors pressed for time.
-
As a new visitor to the site, I can easily and intuitively navigate between the pages, so I don’t waste time searching for things.
- Call to Action buttons are placed in a logical sequence: Under Services to take visitors to Projects and Gallery; between Projects and Gallery to take people to Address and Contact; under the map in Address area to take visitors back to Projects and Gallery.
- The Navigation bar is in a clear font at the bottom right corner of the hero image, on dark background. It converts into a vertical menu in mobile view, placed on dark background of the right side of the hero image, so it is very intuitive to use. The icons are responsive, changing size when mouse moves over, so a visitor know right away, which link is active.
- According to convention, the logo links back to the Home Page.
-
As a potential client, I have easy access to the company's photo, so I can get a good idea of quality and level of experience.
- There is easy and intuitive navigation that leads to Projects and Gallery from the Home page.
- There are pictures on all of the pages of the website.
- The appealing hero image grabs attention and invites visitors to explore more.
-
As a potential client, I am able to access her social media (Instagram, Facebook, LinkedIn), so that I can do further research and keep up-to-date with current projects.
- There is a footer on each page that navigates to both Instagram, Facebook and LinkedIn pages of the company.
-
If i need, I have immediate access to the valid license from the Aviation Authority.
- There is a link in the footer on each page, where I can see the license from the Civil Aviation Authority, its validity and other details.
-
As a potential client, I can see what kind of projects the company implemented.
- There is a list of projects with pictures, objectives, and descriptions.
- These are complimented by a gallery of best shots to showcase the high artistic quality and provide idea about the level of experience of the company.
-
As a potential client and a business, the overall layout of the website enables me to visualise how photographs can be used for a great visual aid to sell real estate, advertise a historical building, promote a tourist destination, or do an aerial inspection of a power station.
- Minimum number of other colours (logo, menu, buttons, links, social media icons, etc) were chosen on purpose not to distract attention from the photos. Soft, subdued colours were chosen to create section separation and visual balance. The color for log was chosen based on the colors of the river on the hero image. Then matching colours' pallete was created to play together.
- Overall design was done on the basis of thirds, both horizontal and vertical: horizontally the Home page, for example, has three horizontal section: 1.hero image, 2. main section (About + Services), 3.footer. Vertically, the hero image covers the whole width, the main section is split into 1/3 and 2/3, and the footer into 3 parts. This additionally creates a diagonal line going from the Logo to the bottom-right corner of the website.
- Minimum number of other items were added to the page, in order to keep main focus on the photos, and supporting texts.
-
As a potential client and a business with time constraints, I can use the contact form quickly and intuitively to contact the company.
- It is easy to navigate to the Contact Form via the navigation menu or call-to-action button placed between Projects & Gallery.
- There are only 4 required fields on the contact form, and so the User Experience is fast and does not require too much typing.
- The form follows an intuitive and conventional layout (Name, Surname, email address, subject and message).
All the pages were tested on an Android phone, a laptop, because i don't have any other devices available, i tested Desktop and Ipad via the Am I responsive where you can scroll and click buttons & links on all the screens. I also checked all the pages on the developer tools.
-
Navigation Menu
- I opened the Home page. Checked how the navigation menu is placed, and how well visible it is. It took me some adjusting for best location that works for all sizes. It is still can be fine-tuned, as it is not perfect. Especially in mobile view; home icon is not placed as it is intended, i will need to work on fixing that. The placement and visibility needs some additional work for improvement.
- Checked if all the menu icons are responsive on all the pages. And if each menu items highlights correctly according to which page is active.
- Clicked on all the Menu items to check if it switches between pages, and how hero image animation works on all of them. I had a problem with size of the hero image for desktops, it was too small. I have added a bigger image for screens over 1300px.
- Logo was clicked from all the three pages and as expected it took the client to the Home Page.
-
About and Services section
- Checked how sections, images and texts are responsive on various sizes of screens, if they re-arrange correctly for Pad and mobile view.
- Clicked the link about the quadcopter to check if it takes to the correct DJI website.
- Clicked the call-to-action button to check if it takes to the correct page.
-
Footer
- Checked how the footer re-arranges according to change of screen size, and if it looks as planned on all screen sizes.
- Checked if license link is responsive and changes font & background when a mouse moves over it. Clicked the link to show license if it opens the correct document.
- Moved the mouse over the social media icons to check if they react as planned, byt changing colour and background. Clicked on each icon to check if the lead to correct pages.
- Navigation Menu
- Tested the same way as described above (Home page).
- Code was checked in ChromeDevtools too.
- Projects' images and texts
- Checked proper visibility on all devices, plus how they re-arrange according to screen size change, and whether they do as planned.
- Noted possible improvements for later: For Pad view add a third image per Project to eliminate empty space on the left side from the description text. The images should be visible only on Pad, not on mobile or laptop screens.
- Gallery images
- Images were checked for proper placement, creating tile effect, and if they re-arrange correctly for smaller sizes (3 images per line for Pad, 2 per line for mobile).
- Noted possible improvements for later: in Pad view there is a single image on the last line above the footer. Either make it invisible for Pad view to eliminate empty spaces or just move it to the left side. For both Projects and Gallery section to resize all the images to make them load faster.
- Call to Action Button
- The button was clicked to check if it takes to the Address-Contact page.
- Footer
- Checked as described above (Home page).
- Navigation Menu
- Tested the same way as described above (Home page).
- Code was checked in ChromeDevtools too.
- Map
- Checked if the map opens the Google maps on click.
- Call to Action button
- Clicked to check if it takes to the Projects page.
- Contact Form
- Form was checked to see if it would allow user to submit without all mandatory fields filled in. It requires to fill all the fields.
- Checked if it requires to fill in correct format of email. It does require to enter "@", but it does not fully check the email format, and let's send an email like "alex.st@gmai" or "alex.st@gmail.co". I have decided to use only html for email verification, but have not found a method to fully prove it. As i don't have any BackEnd connectivity, it is not essential at the moment. For proper functioning JavaScript would be used.
- The screen size was changed and form was viewed on all devices to ensure that it looks clear and smooth regardless of screen size.
- Footer
- Checked as described above (Home page).
Gitpod was used to code this project. It was then committed and pushed to Github using the command line and deployed on GitHub pages from the repository.
In order to deploy the site, firstly I logged into GitHub Pages. Following this I chose OlekSt/User-Centric-Frontend-Milestone-Project-1 and then clicked on ‘Settings’. I then scrolled down to ‘Github Pages’ and changed the ‘Source’ to ‘master branch’. From this, the page automatically refreshed and I scrolled up and found the link to the deployed website.
In order to clone this project, it is necessary to follow these steps:
- Go to the Project Repository.
- Click 'Clone or Download'.
- In the Clone with HTTPs section, click he clone URL for the repository.
- Open the Terminal and change the working directory to the location where you want the cloned directory to be made.
- Type git clone, and then paste the URL you copied in Step 2.
$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
- Press Enter.
These instructions were taken from the following link: Cloning a Repository.
Content of the website is created or curated by Alexey Statsenko.
- All the photos used for the website were taken by Alexey Statsenko, all the rights belong to STOdrones.
- Colorspace for matching colours of the logo, section titles, links, links' responsive backgrounds, social media icons & their responsive backgrounds.
- Am I Responsive web site for checking responsiveness on various screen sizes.
- W3schools.com for code used on e-mail form; constantly referred to this web site for examples, explanations, etc.
- Font Awesome for menu and social media icons.
- Stack Overflow used as a resource for finding answers to all types of coding problems.
- Autoprefixer to make sure your css has all the prefixes it needs to work on all modern browsers.
- Fragments of texts from the websites:
- Idea about the central part of the website 1/3 & 2/3 taken from the "First CV" tutorial of the course.
- Idea about the hero image + animation, plus some code is from the Love Running tutorial of this course.
- Navbar code is taken from Bootstrap.
- Idea for footer split into three parts, and social links animation idea + partly code taken from "First CV" tutorial of the course.
- Texts about the historical/tourist landmarks are partly taken from websites of the respective points of interest (see point 8, section above).
- Contact form code is taken from w3schools website.
Special thanks to:
- My mentor, Adegbenga Adeye, for advice and help with planning and creating the website; checking the project and giving advice during the project's calls - checking the code, fixing problems, giving general advice how to organize the website in a better way.
- Richard Wells (Jedi in training) for informative posts on slack forums, and his peer code review, and help with solving some css/html issues.
- Nafeesah Younis, Code Institute student for advice on how to organize my first project, code advice, and other help for best possible result.
- Simen Daehlin for training and advice on using git command line/git commands.