GitHub Pages Website

This project is a website for a model, Agnes Krupka, based in Prague (Czech Republic). The website will act as both a visually stimulating resume of her work in the past, which centres around her existing portfolio of photographs, and a point of contact for clients to book her for future projects.

It is essential that the overall design of the website complements her photos and provides a clean, modern and professional feel as this will emphasise her versatility and visual appeal as a model. The website will also serve the purpose of providing her with more exposure and clients will be impressed by the eye-catching visuals, so they will see her as an ideal fit to push their campaigns to the next level. The website features an ‘About Me’ page so that the client can get to know her a bit more and the experience will be more personalised. There is also a Contact/Questions page that will give the client the opportunity to get in touch and discuss potential projects. The primary goal of the website is to visually demonstrate Agnes’ talent to potential clients whilst simultaneously providing them with an easy point of contact so that they can book her and discuss further details with ease.

The business goals of this website are:

• To build a brand and define her particular style of modelling.

• To provide high quality examples of her photoshoots and demonstrate her versatility as a model.

• Build rapport with potential clients via the contact page. This, in turn, will increase her network and provide her with more bookings.

• Beautiful, clean and professional looking UI so that the client can immediately visualise how her photos can both enhance and complement their campaign.

The customer goals of this website are:

• Searching for the ideal model for their campaign/photoshoot/show.

• Easy and intuitive means of establishing contact and discussing details for future project. Exact pricing is not provided as it will depend on the nature of the work and it will be necessary to discuss this with the client in further detail.

• Easy access to the model’s previous work so that they can quickly and seamlessly gauge whether or not she is the correct fit.

This website is aimed at professional businesses or photographers currently searching for an experienced model. Ideally the client is either English or Czech speaking.

1. As a potential client and a business with time-constraints, I can immediately see beauty and full body shots of Agnes, so I can gauge if she has the overall look that I am searching for.
2. As a potential client, I have easy access to her bio and so I can determine whether or not her character and work ethic fits with our team.
3. 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.
4. As a potential client, I have immediate access to her existing body of work so I can determine how well she photographs and how versatile she is.
5. As a potential client, I am able to access her social media (instagram and facebook), so that I can do further research and keep up-to-date with her existing projects if I so wish.
6. As a potential client, I can see who she has already worked with, so that I get a better idea of her level of experience.

7. As a potential client and a business, the overall layout of the website enables me to visualise how her photographs can be translated into a broader campaign, so I am able to gauge if I can use them in a professional capacity to fulfil my particular need.
8. As a potential client and a business with time constraints, I can use the contact form quickly and intuitively in case I wish to get in touch with her and discuss anything further.

Follow the links below to see the wireframes for the website. The images in each wireframe view are organised in the order of Mobile View, Tablet View and then Desktop View from left to right.

Home

About

Portfolio

Contact

The website has four pages (Home, About Me, Portfolio and Contact). Each page has a responsive navigation bar, a logo in the top left-hand corner and a footer that has both the copyright information and two social media icons - one for the facebook page of the model and one for her instagram.

The goal of the website is to maximise the amount of exposure of the user to the model’s photographs, so both the Contact and About Me page contain a focal image of her, while the Gallery and the Home Page contain many images and it is easy for the user to move through them.

The Home page has a carousel as it’s focal point, which emerges via an animation. The purpose of the animation is to create a more visually stimulating and attention-grabbing experience for the user. The Carousel has three photographs, so that the user is immediately left wanting more. In order to fulfil this need, there is a ‘View Portfolio’ option on the carousel, which will immediately lead the user to the Portfolio-gallery page, so that they can see more images.

Following the carousel, there is a short quote section to further personalise the experience and help the user feel more familiar with the model. This is followed by a short introduction section with a photograph of the model. The purpose of this is to introduce the client to her as a potential person that they will work with through providing some insight into her personality. Within this section there is a ‘Learn More About Me’ button that will navigate the user to the ‘About Me’ page. The purpose of the tidbit is to engage the user’s attention, which will lead them to want to learn more about Agnes - and they will be able to navigate to her bio both through the navigation bar and the button on the homepage.

The About Me page has an attention-grabbing photo of Agnes that appears via an animation for a better user experience. There is then a brief bio of the model that expands on the information given on the landing page. This is followed by two call-to-action buttons, one of which navigates to the portfolio page with accompanying text that encourages the user to look at more photographs. The other call-to-action button ‘Contact Form’ navigates to the contact page and the surrounding text similarly encourages the user to establish contact with the model.

The portfolio contains a few sentences instructing the user on how to enlarge the images. Following this are a series of images that use fancybox. When they are clicked, they are enlarged and it is possible to move to the next picture, go to the previous picture, and return to the main page.

There is an animation in place using aos to make the pics fade up as you scroll down the page. The purpose of this is to enhance the visual experience.

On a desktop view the images are side by side, 2 at a time. I chose two because even in a smaller view I want to preserve the quality of the image. On a mobile and tablet the images are stacked one on top of the other.

The contact page contains a main image and a contact form. The image fades in when you enter the page in order to enhance the visual experience. The Contact form asks for ‘Name, Surname, Email address and message’. Following this is a ‘Send’ button. It has been kept simple in order to minimise the time that the client spends filling it in, as this will increase the chance of them getting in touch.

• Header Logo: Each page has a logo in the navigation bar. The purpose of this is to create a sense of the brand.
• Header Navigation: There is a navigation bar at the top of each page so that the user does not need to use the back button at any point. This bar toggles in mobile view to provide a better user experience.
• Footer Copyright Info: Copyright Information for Agnes exists in the footer of every page.
• Footer Social Icons: Instagram and Facebook Icons exist on each page so that the user can connect to Agnes’ social media platforms.
• Carousel: There is a carousel on the landing page with three pictures. The purpose of this is to immediately capture the attention of the user/potential client, as this will subsequently lead them to view the portfolio of photographs and book the model.
• About Me page - Introduces the potential client to Agnes, so that they have a better idea of who they will be working with and this will encourage them to get in touch.
• Portfolio Page - Enables the client to browse through Agnes’ existing work.
• Contact Form - Gives the client the opportunity to get in touch with Agnes and ask further questions.
• Call to action buttons - these are located on the Home page and About Me page. Their purpose is to ease navigation and encourage the user to view the portfolio and bio on the About Me page, as these are the two focal parts of the website.

• A promotional video on the portfolio page of Agnes modelling. This will give the user a better visual experience. It will also help the client get a better image of Agnes’ modelling.
• Option to choose the language of the website - Agnes’ first language is Czech, and she works in both Czech and English. It is therefore important that the website is eventually translated into Czech, however this is not possible at the moment because of time-restraints and financial restraints.
• A more dynamic Image Gallery and Thumbnails in order to enhance the visual experience even further.

• HTML and CSS were used to code this project.
• Bootstrap CDN was used to make the layout of the website cleaner and more responsive. Bootstrap CDN was also used to get icons from FontAwesome for the footer.
• Fancy box was used for the gallery.
• Animista was used for the animation on the carousel, as well as the animation on the images on the About Me page and the image on the Contact page.
• AOS Animate on Scroll Library was used for the scrolling animations.
• Google Fonts was used to style text on the website.
• jQuery was used for Bootstrap, FancyBox and AOS Animate on Scroll Library.

Detailed information regarding the testing of the website is located in the following file TESTING.md.

GitHub Pages Website

Cloud9 IDE 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 nafeesahyounis/user-centric-frontend-project 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:

1. Go to the Project Repository.
2. Click 'Clone or Download'.
3. In the Clone with HTTPs section, click he clone URL for the repository.
4. Open the Terminal and change the working directory to the location where you want the cloned directory to be made.
5. Type git clone, and then paste the URL you copied in Step 2.

$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY

6. Press Enter.

These instructions were taken from the following link: Cloning a Repository.

The text for the website was created by Nafeesah Younis.

All of the photos were obtained from Agnes Krupka's existing portfolio on her facebook and Instagram page. Some photos were also on her hard-drive from past shoots that she hasn't uploaded to a social media platform yet.