Formal report

Part of the assignment was to write a formal report about how I created the website applying professional standards and format for industry.

I started to write it in Adobe InDesign CS6 and after 17 pages, I decided to use different software because quality of the used images was so bad that you could not see it.

sc

I used simple Microsoft Word for it and quality of the images was great. I wrote full formal report in this software.

Usability testing/evaluation

I did usability testing while designing the site so I did a few correction to the design. I got positive feedback from people that were testing it so I am happy about it. Everything is working perfectly fine on the site considering it is a dynamic site.

Improvements that I would like to make

The only negative feedback I got was that it is not a responsive/adaptive designed. The reason for it is that I did not have enough of time to do it as I had to work on other projects. I am aware of it thought and if I have spare time in the future, I will make it responsive or adaptive.

This site is missing CMS (Content Management System) to allow users to add, delete and edit content of the site. PhpMyAdmin would not be needed anymore after adding CMS. Another thing that could improve whole site would be contact form which would allow users to contact author of the site straight from the site.

Over all, I am happy about this website, design is very nice and the fact that it is my first fully dynamic site makes it even better.

Browsers

This site works in

  • Opera 20.0
  • Internet Explorer Version 11 (slide show is without special effects)
  • Mozilla Firefox 27.0.1
  • Google Chrome Version 32.0.1700.107 m
  • Macs
  • Computers
  • Laptops
  • Mobile devices
  • Tablets

Changes made after user testing – resizing photos

Another good point that were made while user testing was that photos were too big after opening. This would make big problem on tablets. I checked size of them and they were way too big. I did little research about the right size of photos on websites and I found out that it suppose to be 800px and no more than 150kb.

I opened them in Adobe Photoshop CS6 and set them up to this size.
The result was seen straight away. Not only size of full folder went lower but also size of photos were better and worked fine with tablets.

Changes made after user testing

All changes were made after user testing. Symmetry plays big role in designing websites and I must say that it looks better after changes were made. I also created ‘split screen’ in home page by dividing left and right side of the site which creates a perfect symmetry –
symmetry

This is how the site looks at the moment

Home page

home

Gallery page
gallery

 

User testing

When the site was designed and everything worked perfectly fine, I did user testing. I got positive feedback however, there were a few things that I didn’t notice.

Changes I’m going to make

changes

1. Moving text to the left so it’s all in one line – symmetry
2. Making ‘selection’ function as big as rest of the windows

Beginning of designing process/colour scheme/explanation of the design

PHP and MySQL is working perfectly fine and my job now is to create design of the site. I already did my research, wire frames and mock up so I know exactly how it is going to look like. I need to customize it with CSS.

The result – index.php

28

gallery.php

28 gallery

Explanation of the design/colour scheme

At the beginning, I wanted to use ‘carbon fibre background’ as it has very professional and elegant look but while I was going through photos that I was going to use, I noticed vintage style picture hanging on the wall and this gave me an idea to create a vintage looking website.
15.result gallery lightbox2

I typed into Google ‘black vintage background’ because I already knew that colour scheme is going to be black/white or grey as it fits perfectly with colours of photos; did a little research about it and found perfect background that downloaded from www.pixeden.com. It is called dark-planingwood.

Fonts

I typed into Google ‘google fonts’ and chosen the right style of font for header. It is called ‘Oleo Script cursive’ which if you have a look closer, is exactly the same as one of the writing on the picture that I took.
fonts

font

Another font that I used for text is called ‘Open Sans Condensed’. The reason for that is that I needed to make it readable and font used for header wasn’t very readable with large text. This font still has a vintage look and it is readable.

Untitled

Backing up tables

Every time you work with tables, you need to make sure you back them up just in case they get deleted for some reason.

Step 1 – connect to database with phpMyAdmin

Step 2 – select the table you want to back up

1. selecting table

Step 3 – click ‘Export’ 

2. export

Step 4 – choose different formats you want table export to 

3

4

 

Step 5 – save it to folder called ‘SQL’

5

 

Photos randomly pulled from table

On ‘index.php’ I decided to have random generated photos from table. The reason for it is that while doing my research I found out that most of the websites used it as some kind of form of introduction to the site, showing users what they can find on the site.

Creating table

First of all, I needed to create another table in phpMyAdmin. I named it ‘RandomPics‘. It consists of two columns ‘RandPicID’ and ‘pics’. I didn’t need anything else for that.
1

Edited table

2

 

Explanation of code

3

It was the same code that I used for gallery page with a little change. Instead of 4

I’ve chosen new created table for random photos and the code you see above tells it to choose random photos from table. ‘LIMIT 1’ tells it to choose only one photo at the time, you can change it to any number you want and it’ll add more photos. I’ve chosen only one photo at the time.
Then simply echo it out.

I came across to little problem while doing it as I echo out only like this 5 which didn’t work. It only pulled out path of the photos. I know now that it was mistake and I sorted it out by pulling it out by ‘img src’.

Result

Photos randomly changes after refreshing page.

6 7