User Centric Frontend Development - Milestone Project

The website will be built for Simple Design Works Ltd | Product Design Consultancy. I plan on building a responsive website with basic functionality using HTML and CSS. The client has requested that the code needs to be neat and maintainable in case someone else picks up on my code after I am finished.

Design Brief

• The Website needs to be a simplified version of their current website - www.simpledesignworks.co.uk
• The client has stressed that they would like a cleaner design, prefferably with a lighter more inviting color scheme.
• The home page must feature a call to action as well as a portfolio section.
• The website must be responsive accross devices from mobile to desktop.
• The client would like 3 pages; Home, About and Contact.
• The code needs to be well structured in case of future addons.

Planning

To start the project in the most efficient way, I decided to have a face-to-face meeting with the client to discuss their needs. During this meeting I sketched a few basic layouts based on their needs. As the meeting went on I found that they were focusing on the design aspect of the website more importantly that overflowing the website advanced function. The client is a design consultancy with a good taste of clean and simple design. After the initial meeting I went back to the drawing board and thought about the best ways to implement their desired features in a way that compliments their branding. The ultimate goal is a more inviting website that encourages the end user to get in touch about their project.

I've used a scheduling and task assignment website called Trello. You can see my task board here - https://trello.com/b/FsDcKTKl/user-centric-frontend-dev

Design

To start the design process, I created a basic layout sketch with all the features they need. Using this I will be able create the skeleton within a UX software “Adobe XD”. It’s important for me to focus on simplifying their current website, removing all the unnecessary “bloat” content that gets in the way when trying to find relevant content.

You can see my Wireframe designs that I created using THIS LINK - assets/media-library/initial-wireframes.pdf After a day of wireframing, I have come up with a layout that works. I then sent the layout to the client and they were over the moon with the new design.

Features

Here is a list of the client’s desired features

• Responsive header with a collapsible navigation section on mobile
• Meet the team section with individual images for each person
• Call to action on the home page as well as a separate contact form on the contact page.
• Portfolio section on the home page
• Sitemap in the footer of the website

Within my designs, I have been able to add all of this functionality.

Testing

To test the website I decided to use my collegues. I gave each of them the task of going through the website testing links, buttons, responsive design and each browser (Safari, Google Chrome, Mozilla Firefox and Microsft Edge)

Here's a detailed user stories - Ruth: "The website is now a lot cleaner and there is less bloat. In comparison to the current website, this new design really gets us ahead of our competitors and offers the user a sense of our UX capabilities. The navigation is clear and easy to use, I admit that having a sitemap in the footer really helps from a UX point of view. The website is responsive and offers the same functionality on each browser."

Deployment

I've desicided to deploy my code onto GitHub pages. I have chosen GitHb pages because it allows you to deploy your code and create repositories free to chage whilst keeping a great standard on performance. GiHub allows you to share code with other developers and in this instance, assesors.

Technologies Used

To develop this project I am using the following languages and external libraries/external sources;

• HTML5 (Hypertext Markup Language)
• CSS3 (Cascading Style Sheets)
• Google Fonts
• Font Awesome (Icon Library)
• Bootstrap (CSS Element Library)

Credits

Media (images and videos)

All media items were supplied by the client.

Content

Conent was supplied by the client. They managed photography and chose the most relevant images to use in all places within the website.

General Notes

Meet the team section - About Page - I had to use duplicate images for two people's headshots. The client did not have any relevant images so advised on duplicated images to use as a placeholder until they have another photoshoot.