Front end web development
Shihab Mehboob / P13233877 / CTEC3905 / Front End Web Development / Assignment 2
All README content is in the About section of the site itself, allowing for all content to be visible in one place. However, just in case, the contents from the about us section (that should be here too) is as follows:
We are a creative agency specialising in app design. We are passionate about what we do, aiming to deliver only our best. We put in our heart and soul into every product we make. The animations are fun and fluid, the graphics are vivid and eye-catching, and above all, the end product is heartwarming. We work with you to create something that we will both be proud of, and we do it whilst giving no less than 100% each and every time. We are here for you, bringing your idea to life.
This about section also serves as the readme for the site. From the module perspective, the site was created using all three required languages (HTML/CSS/JavaScript), which is predominantly hand-written code and responsive The HTML was for the basic markup and content, the CSS for the styling and various CSS3 transitions, and the JavaScript was for more complex elements that liken it to programming, used for the parallax and responsive menu bar. The menu bar is displayed with a hamburger icon for mobile devices, and the other areas appropriately resize and wrap around in accordance with the screen size, this makes browsing from any device convenient. The site maakes use of Twitter's API for the social area which displays a couple of tweets (an account was created specifically for this). Advanced CSS3 and JavaScript is used mainly for the header section, where rotating shapes at different speeds give the wave-like effect, and is also employed for the scrolling ticker text, and the parallax effect with the mountains.
The site is structured as a single-page site, with easy to navigate content that is simple enough to locate, the menu bar is also fixed and available throughout the site for instant access to other areas. It also makes use of flexbox for the footer area. The portfolio section is divided into sub-categories which are displayed as a dropdown menu on the menu bar. This site is accessible. The PARC design principles have also been extensively implemented, with proximity taken into account with related items being grouped together (all protfolio items together, header with moving elements together, footer with contact information together, etc). Alignment is evident, with clearly structured grids and a subtle flow. Repetition is prominent with the colour scheme, and the usage of fonts and design style, which ultimately gives the site a consistent feel. Contrast is also taken into account, with subtle cues to indiciate differences in the site areas, which include background colours, border elements in the portfolio section, and the distinct moving elements and parallax in the header.
From the initial idea, the site has improved and changed drastically, with adjustments and tweaks to the design, colour scheme, structure, and varying features present. Wireframes were created at the beginning for the initial layout and look, along with another one further on down the line when a more decisive look was chosen. This drew feedback from peers, who suggested improvements and edits that could help enhance the site overall. The constant changes resulted in better layout and inclusion of features. Each wireframe progressed upon the one before it. A mobile wireframe was created too to display what the system should look like on the smallest screen size.
The wireframes themselves are available on the GitHub folder structure within /images, and also linked within the website itself in the About section.