WebFlow Website

A concept website for a college assignment

    • OVERVIEW

    About the project

    WebFlow is a fictional company website designed and programmed as part of a college assignment while completing my Information Technology diploma. I went above and beyond in this project by creating the entire backend system for the website, which was optional based on the client brief, which only requested a design and front-end prototype.

    WHEN WAS THIS?

    29th May, 2022

    WHAT'D I DO?

    Designed and developed a fully responsive website

    Tools Used

    BACKSTORY

    The Problem

    Design and program a fully responsive company website, including wireframe mockups.

    The client brief stated that they required a fully responsive website that could be accessed on various device types, as well as including wireframe mockups and a programmed prototype showcasing the frontend. I decided to take this one step further by developing the backend server for this website aswell as the front-end.

    Design & Implementation

    The project that gave me a Distinction

    ITERATIVE DESIGN

    Wireframe Mockups

    Before creating a fully-fledged version of the prototyped website, wireframe mockups were heavily utilised to gauge how the concept would look to the user, as well as being able to know where things would be placed in the viewport, such as call-to-action prompts and buttons. This aided in the project's development and allowed for adjustments and enhancements to be made throughout the prototyping phase.

    CALL TO ACTION

    Customised Buttons

    Call-to-action buttons significantly captivate the user and draw their attention to important information or prompts. As a result, I attempted to make buttons pop out by adding 3D effects to them and custom emojis. This aims to have the first point of view drawn to these buttons by their unique design and extra detail.

    ACCESSIBILITY

    Responsive Design

    Ensuring that everyone could access the website from any device was an essential aspect of accessibility and increasing the potential target audience the fictional company could reach. To achieve this, I utilised Bootstrap for a responsive design that resizes according to the screen resolution, maintaining a cohesive and consistent experience no matter what device was used.

    REFLECTION

    Project Learnings

    1. Tackling new challenges

    This project was my first-ever attempt at creating a fully responsive website, and it taught me so much about HTML, CSS and the Bootstrap library. The website development is a testament to my appetite for tackling new challenges and setting the groundwork for further websites I developed, such as this portfolio and client web pages.

    2. Prototyping is essential

    Using wireframe mockups and iterative design allowed me to grasp the concept of prototyping with different designs and ideas to create a finalised product a client would be happy with. This project allowed me to present varied ideas and implement a continuous improvement mindset to build a solid product.

    3. Responsive is everything

    As the client requested that the website be responsive, the site needed to work on devices of all types. This taught me a lot about the Bootstrap library, the importance of accessibility, and how it can affect the user experience and the potential audience that can be reached by not supporting varied devices.