Subax Tech

Click to see the website

Subax Tech

Subax Tech is a web design and development agency. This is just a practice of how I want to build my web agency. This idea of having a web agency the way it started was; I was talking to one of my best friends and we were discussing how to have our business and then he told me this idea and that's how it started.

User Experience

User stories

As a user, I want to easily understand the main purpose of the site and learn more about the organisation.

As a user, I want to be able to easily navigate throughout the link navigation to find content.

As a user, I want to be able to easily navigate to and view a content.

As a user, I want to be able to easily contact the oragnisation.

Business owner goals

As the site owner, I want my visitors to feel connected to what we offer.

As the site owner, I want my visitors to see what we do when they first visit my website.

As the site owner, I make sure my visitors have easy and smooth navigation so they can visit the pages they want.

Target Audience

Anyone who wanted to have a website.

Anyone who wanted to have a logo.

Anyone who wanted to have a brand identity.

Anyone who wanted to have a rebrand.

Anyone who wanted to have a web design.

Anyone who wanted to have a graphic design.

Features:

Existing Features

Navigation bar

- Logo andnavigation bar has a consistent look and placement on all three pages of the website supporting easy navigation. It includes a simple Logo, Service page, we are page (about) and get in touch page (contact) and is responsive on multiple screen sizes. On small screens (e.g. mobile devices) the navbar will be collapsed.

Home page

The home page is the first thing the visitors will see and I displayed a little tagline below the nav bar also what we do section after the tagline.

Footer

Service page

Contact page

About page

Wireframes

Home page

home page deskop

home page tablet

home page mobile

Service page

service page desktop

service page tablet

service page mobile

We are page

we are page desktop

we are page tablet

we are page mobile

Get in Touch page

Get in Touch page desktop

Get in Touch page tablet

Get in Touchpage mobile

Design

fonts

Oswald

Lato

color

black background color and white text color white background color and black text color

Technology used

Balsamiq for the wireframes

Fontawsome for the icons

Google fonts for the font style

GitHub

Git

Gitpod

Adobe photoshop

Adoper Illustrator

Languages used

HTML

CSS

frameworks

Bootstrap 5

Testing

HTML and CSS code were validated with the W3C Markup and CSS validators. Both were found to have no errors or warnings. Reports can be seen below:

index page HTML validation check

index page CSS validation check

manual testing

Home page

Service page

We are page

Get in Touch page

Responsive testing

Desktop testing:

Platforms: Responsive design checker Browsers: Chrome Firefox Edge Opera

Tablet

platform: Apple Ipad mini Browsers: Chrome Edge Opera

Mobile testing:

Platforms: Apple Iphone 13pro max Browsers: Chrome Edge Opera

Credits

Code

• 1 Navigation link I have modified the navigation as it wasn't meet my expectations. Responsive navigation from bootstrap from Bootstrap

• 2 Accordion I have modified it as it wasn't meet my expectations. Accordion from bootstrap from Bootstrap

images

Images of What we do section:

• 1 Brand Identity link Brand Identity on Freepik

• 2 Development link Development on Freepik

• 3 UI/UX design link UI/UX design on Freepik

Depleyment

The website was deployed using GitHub Pages by following these steps:

In the GitHub repository navigate to the Settings tab On the left hand menu select Pages For the source select: Deploy form a branch For the branch select: main After the webpage refreshes automaticaly you will se a ribbon on the top saying: "Your site is live at https://yasirwiifto.github.io/SubaxTech/