Fig 1. Title Page
- This was my very first website! I began learning to code with the Code Institute in February 2018. One month in, this was my milestone 1 project which was created as a part of User Centric Front End Development. I have chosen not to modify or improve this work in any way, because it is a snapshot of what I had learned at this point in time.
The purpose of the website is to let people who are interested in flying drones as well as photographers who use drones as well or who would like to be able to collaborate with drone pilots, to come together and enjoy their hobbies together. at locations all over Ireland. The website will present videos from YouTube of drone flights and still images of drones as well as taken from drones. The site is made up of the following pages, using semantic HTML5 and will use a Bootstrap grid layout which will facilitate the transitions for a mobile first design.
This is a Milestone 1 project, about creating a website focused on the UX. As per the project guide-lines, it is to demonstrate lessons learned in this section HTML and CSS User-Centric Front End Development.
Common sections to all the remaining pages: Structure will be a bootstrap grid. I used as site called Shoelace - Visual Bootstrap 3 Grid Builder to help me plan the grid for desk top then to see what the mobile approach may look like.
| Area | Grid Sizing |
|---|---|
| Nav bar | col-sm-12 |
| Header | col-sm-12 |
| Section, Article | col-sm-8 |
| Section, Aside | col-md-4 |
| Footer, Meetups | col-sm-8 |
| Footer, Socials | col sm-4 |
Fig 2. Grid layout
There will need to be a member sign in section as well as a new member sign up form. There will also need to be a form where members a post links to their YouTube video files so that they can be reviewed for posting to this site.
On mobile devices, the navigation bar compresses to reveal a compressed hamburger navigation icon on the right. The mobile menu will drop down from the top left corner of the navigation bar. I plan to use hover effects on the items as well as delayed transitions to improve the UX. Where there is opportunity, I will also use Font Awesome icons to enhance the metaphorical imagery to better link the textual narratives to the page imagery.
Fig 3. Menu with hover effect
Fig 4. Sub-menu with hover effect
Fig 5. Club sign-up
https://ddeveloper72.github.io/milestone-1-project/index.html
A hero image fills the page. There is a compressed hamburger navigation icon in the top right corner of the page, that lets users enter the different sections of the site. The image will be vertically centred and have the full view height and be fixed absolute for smaller screens. Over the top of the image there will be a transparent nav bar with a compressed hamburger nav icon that will allow the user to navigate further into the site. The nav menu will have drill-down properties and hover effects to show successful clicks. Below the hero image, is a transparent footer which will contain the social links to the site.
Fig 6. Landing page
https://ddeveloper72.github.io/milestone-1-project/stills.html
This section of the site is to showcase some domestic drone images that have been submitted by the members of the group. The image the article section will have an image container displaying 4 images, col-sm-8 col-md-2, col-md-2, col-md-2, col-md-2. The aside will then have discussion points from the users about the images.
Fig 7. Second page - Photographic Stills
https://ddeveloper72.github.io/milestone-1-project/videos.html
The site lets them showcase a feature video of the month, filmed from a drone. There may be several other videos from previous months that a user can select and play. The article section will contain a video player window from YouTube which will fill the area: col-sm-8. Beside this is the aside with textual contend containing discussion and a link to the video being sown in the article.
Fig 8. First page - Video Presentation
https://ddeveloper72.github.io/milestone-1-project/meetups.html
This section of the web page is divided into four sections, the header, article and aside and footer. My initial design is to use a google map with location pins in the article. The Aside will have meetup information and possibly a calendar entry system so that users can update their drone flight diary.
Fig 9. Third page - Meetups
Site Link: https://ddeveloper72.github.io/milestone-1-project/index.html