Design Process

The design process consisted of developing wireframes, and graphics implemented on the website. The theme of ConnectEd is simplistic and modern.

Wireframe: Version 1

Adobe XD: Password is NanoBanano1

As more versions deploy, it is important to keep updating the wireframes to maintain a uniform theme.

Design Resources

ConnectEd was developed with the use of:

• Bootstrap-Vue is the CSS Framework for developing responsive and mobile-first websites.
• Font Awesome is the external library that contains hundreds of free icons to use.
• Absurd Illustrations is the source of the website graphics.

Design Rules

Due to the minimalistic design, the colours chosen are: black, white, gray

In the future, adding a contrasting colour would redefine the rules. 6:3:1 ratio rule

Review Components and Style for some styles for components that should stay consistent throughout the application.

Design Tools

• Adobe XD is used for wireframes
• CSS Tricks contains content regarding front-end articles that explain in depth what each component can do.

Vue

Each component of the website consisted of its own HTML and scoped CSS. Vue allows the use of components in any page that eliminates duplicate code.

<template>
...HTML...
</template>

<style scoped>
...CSS...
</style>