code-institute-submissions / tomas-byggservice-ms1 Goto Github PK

Introduction

This comprehensive website was designed for my friend´s company called Tomas&Byggservice i Skåne. The main goal of the site is to show work examples, progress of the company and to be contacted easily by filling up a form about customers project.

Tomas&Byggservice is a building company whcih is based in south Sweden. The company is started in 2016 and by doing quality job is very succesfull. This company is capable to make many individual projects. It is very important to share different expierence they had been working on to find potcial customers.

Tomas&Byggservise is my fisrt Milestone project and this is 1 of 4 projects during the Software Developer Program at The Code institute.

Requirements:

1. HTML, CSS
2. Static front end project: Write custom HTML5 and CSS3 code to create a website of at least 3 pages.
3. Information Architecture: Incorporate a main navigation menu and structured layout.
4. Documentation: Write a README.md file for your project that explains what the project does and the value that it provides to its users.
5. Version Control: Use Git & GitHub for version control.
6. ttribution: Maintain clear separation between code written by you and code from external sources (e.g. libraries or tutorials). Attribute any code from external sources to its source via comments above the code and (for larger dependencies) in the README.
7. Deployment: Deploy the final version of your code to a hosting platform such as GitHub Pages.

Back to Top!

UX

The potential user of this website:

• New and old customers

What custmers are wwilling to find:

• As a new customer I would like to find easilly full comtact information.
• As new customer I want to be contacted deppend on my project.
• As new customer I would like to have a chance to write about my project directly in the webpage.
• As an old customer I would like to see the progress of the company.
• As an old customer I would like to recomend company thru the webpage.

Development Planes

To get the best results I worked together with the client, Tomas&Byggservice i Skåne owner, for informative, functional and comprehensive website.

Strategy and Scope

Content Requirements

The user will be looking for:

1. Information about the company.
2. Done projects images and descriptions.
3. Contacts.
4. Social Media.

Functionality Requirements

The user will be able to:

1. Navigate on the different screen sizes comfortably.
2. Get estimate of the future project.
3. Get the information about the done projects.
4. Easily contact the company.
5. Connect with the company thru the social media.

Structure

Website information was projected in a ranked data structure to be sure that users can navigate the website easily:

Design

The main idea was to create a stylish website with easy readable fonts and colours. The main fonts are "Exo" and "Exo""Open Sans". As a back up font going to be "Sans Serif". Colours was chosed to get fit in all pages and the main colour was brown as a main Hero image in the Home page.

Visualization

The selected images are realtive to the company specialization and gives one more information of what services has company. All images has alternative text to describe the images if something happens with the network.

Back to top ⇧

Features

Design Features

Responsive design on a navigation:

• Company name in the Header is the way to get back to the home page in all resolutions.
• Footer and Header is fixed on all devices to have a very simple design on each resolution.
• For the best user expierence smaller screen has toggler icon as collapsible sidebar menu to get full expierennce of the webpage.
• Home and About Us pages has Call to action buttons and redirects user to cotact page to fill up the form.

Home Page The Home Page has two columns and smaller screens has one column.

• Hero image used as the full width background image and it covers entire webpage on all devices to make a strong first impression.
• Middle container divided by two columns on Desktop Home page, taking 50% each column. On a smaller screens left column is taking the top position and the right column goes under it to have best clarity. Left column has information about possible projects and the right column has company motto.

About Us page

The About Us page is a little bit different from Home Page but it is still two collumns wide on Desktop and one column on the smaller screens.

• Hero image occupying 50% of the page on the right side. When resolution became smaller and responsive design turn on, Hero image take "under" position and filling full width of the screen.
• Middle container on the left side shows company's history and it takes another half of the page. On smaller screens text is talking top position.

Gallery page

• Hero image is used like in the Home page, to make a nice full size background of the webpage on all screen sizes.
• Middle conaitner or main area of the page is build as a gallery to make best possible presentation of company's projects and divided in three columns. Modal image gallery is leting me to show best quality images. On the tablet screens gallery changes to 2 columns and on the mobile phone screen sizes it changes to one column. It is importatnt same size of the picture on all screen to be viewable.

Conatact Page

• Hero image is used like in the Home page, to make a nice full size background of the webpage on all screen sizes.
• Middle container is divided to two columns on the desktop. On the left collumn has the form to be filled up. The form is simple, but makes easy to request information from the building company. The right side column has all the contact details. Smaller resolutions makes this page only one column. The form takes top position and the contact details is under it.

Issues and Bugs