Checkpoint One

Checkpoint One

Checkpoint Summary

This is the first post of my WEB503 project diary, welcome.

Over the course of 5 weeks, I will be producing a website with a checkpoint each week which covers the sequential development steps which lead to us completing the project.

The purpose of this checkpoint was more planning focused than development, last week we handed our briefs in which exist as an overview and preliminary documentation to accompany the development process of our websites. We are to plan out our classes & id's for each page whilst also constructing our index (home) page. 

Initial Home Page

Mobile View

My mobile design still needs work but I have completed some preliminary measures that resize key elements using media queries. I abandon the intro sentence on the title image because it was leaving the image too cluttered as the screen shrunk down. The content box's for my testimonials needs some work as well.

To complete my mobile design I have to shift away from the default single column behaviour and rearrange elements to fit better with each other rather than everything ontop of each other.

-- Problems -- 

Design: The bulk of my problems consisted of colour theory & efforts to make my home page appear elegant. I am challenging myself by trying to create an elegant and professional website which intrigues me as I think it takes some nuance to achieve.

I had trouble finding a way to make the content of my index page flow elegantly down the screen as users scroll instead of cutting off at the bottom of the picture. To aid this I added the 'Testimonials' box which crosses over the header picture into the next section, this eases the transition between these two content area and makes the process easier on the eyes.

Nav Bar: I spent hours in an attempt to get my nav bar to where I wanted it until I stumbled upon a stack overflow thread that allowed me to build a navbar which has a centred title text/logo that remains centred as the page resizes. It is still not completely centred, this has a feeling this is due to the content on either side of the middle text being of different width, I may try to implement custom width to amend this in following checkpoints.

Footer: The problem with my footer is making it appealing, currently I think it looks a bit too basic, to amend this I believe that I have to add a little more details in order for it to show more appeal. Adding detail is walking a fine line with my type of website though, I need to also retain elegance and not go overboard with adding features for the sake of design, as I add more elements to my design the complexity fractures making it harder for me to retain an appealing & elegant page.

Title Picture: Initially I had trouble finding a picture with the right contrast until I found this one which consists of dark tones to ease the transition from nav bar to the following content.

-- Customizations -- 

Navbar: Customer navbar which centres the middle element respective to the content around it.
Footer: Added <hr> lines to the bottom and top of the footer to give it a more distinctive look.
Title Image: I placed header text as well as a sentence over my title image, this will serve as the introductory text for the site.

-- Design Choices ---

Colour Theme: I have used blues with a pinkish red for elements I want to emphasize. The colour theme is based on instilling trust & a sense of professionalism to the user. 

Title Image: A 'title image' or a jumbotron is an effective way to introduce your website, using an attractive image that captures the mood of your site you can create a sense of interest. Pictures speak a million words and can be used to effectively manipulate site visitors better than text.

Theme: My target theme is that of professional & trustworthy, in an attempt to accomplish this I have mentioned the previously talked about colour scheme & also included testimonials from previous customers as a home page feature.

Page Classes & ID's

General

• footerAndNavText: Covers the text elements for my footer & nav bar due to their similar style.
• text-align middle
• etc
• navTitle: Used to manipulate the "Doe & Sue" title text in the nav bar as well as the footer, if i choose to leave it in the footer.
•     color: #e7e7e7 !important;
•     font-family: 'EB Garamond', serif;
•     size

Home

• jumboWrapper: wraps the intro text within the jumbotron image
•     margin: 0 auto;
•     width: 35%;
•     position: absolute;
•     right: 20%;
• jumbotron: used to manipulate the jumbotron that encapsulates my title image
•     margin-bottom: 0px;
•     background-image: url(../images/lawfirm.jpg);
•     background-position: 0% 0%;
•     background-size: cover;
•     background-repeat: no-repeat;
•     color: white;
•     text-shadow: black 0.3em 0.3em 0.3em;
•     height: 800px;
• testimonialTitleWrapper: manipulates the wrapper around the testimonials heading under the title image.
•     margin: 0 auto;
•     border-radius: 25px;
•     padding: 20px;
•     background-color: rgb(51, 70, 125, 0.9);
•     position: absolute;
•     bottom: 15%;
•     left: 35%;
•     width: 30%;
• testimonialTitleText: this is only activated upon media query, makes the testimonial heading smaller to fit mobile size.
• font-size: 15px!important;
• testimonialBoxWrapper: manipulates the wrapper that houses the testimonial content.
•     margin: 0 auto;
•     border-radius: 25px;
•     padding: 20px;
•     background-color: rgb(51, 70, 125, 0.9);
•     width: 100%;
• testimonialPersonText: manipulates the text that cites the testimonial giver under the testimonial text
•     font-size: 15px;
•     font-style: italic;
•     text-align: right;

About Us

• aboutUsContentText: manipulates the context text of this page under our history and our vision
• size
• colour: white
• shadow
• font
• aboutUsTitleText: manipulates the text that heads the content for this page
• size
• colour: white
• shadow
• aboutUsSlideshow: manipulates the slideshow on this page
• shadow
• border
• radius?

Our Services

• servicesBox: manipulates boxes encapsulating services content
• width
• height
• color: dark blue
• shadow
• radius
• font-size
• font
• servicesImage: details for the image inside services box
• size
• position
• shadow?

Our Team

• ourTeamBox: manipulates boxes encapsulating services content
• width
• height
• color: dark blue
• shadow
• radius
• font-size
• font
• ourTeamImage: details for the image inside the services box
• size
• position
• shadow?

Contact Us

• contactForm: form CSS manipulation
• colours
• dimensions
• shadow?
• alignment?
• contactUsHeader: header manipulation for this page
• font size
• text alignment
• colour
• font