Half way there…

18 Apr

I ended up waiting over a week for my tutor Martine to come back and rescue me. She did not come up with a solution right away (this stopped my pride from hurting slightly) but she had to go away and think about it. But solve it she did. Now the “Home” page was looking more like how it should although it still needed some work. Mainly it was the text of the page which needed tweaking, trying to make it look balanced and as readable as possible. I tried different font sizes and letter spacings which eventually got me the look I wanted.

Home Page

The finished Home Page

I started working on the “Dietary Services & Fees” page next which contained a lot of material that was demanding to decipher and looked very jumbled. I had just done an assignment using tables and Martine suggested I make a table from some of the data contained on the page. This made a lot of sense as it was a means of presenting the information in a much clearer manner. It was also a good exercise to make me more fully understand the coding used in making tables.

Martine had many suggestions on making it more attractive and readable which contributed greatly to the finished article. Once I was pleased with the table I worked on the remaining information on the “Fees” page. As the table contained the majority of the material there was less data to present and I was able to lay it out in a more legible manner.


The Table For The Fees Page

The next page I worked on was the “About” Page. That went a bit more smoothly than the other pages as I was able to use the layout and font sizes etc from the previous two web pages. Once this was finished I had half of the website done. Unfortunately I wasn’t able to go full steam ahead with the remaining three pages as I didn’t have the textual information from my client which I needed. Also I have to be taught about forms by Martine which would be used in the “Contact” page. So hopefully when I get the info I need it’ll be full steam ahead with the rest of the website.


Code glorious code!

27 Mar

Having done the wireframe of the home page on graph paper and the mock up in Adobe Photoshop, I was at the stage where I could start doing the code. However, jumping into the CSS code at this stage is frowned upon as my tutor Martine wants us to write it out first. This is good practice as it means you should have everything worked out before you input the code into Notepad++.

I had my wireframe drawing and a sheet of paper with the measurements for everything I could think of in front of me, along with a rough workout of the code. It was surprising though how when you think you have everything worked out you still notice errors and omissions which you have to iron out. Once I had all the CSS written out I gave it to Martine to check. She was happy with it and so I started on the actual coding.

First of all I inputted the code for the HTML document. This contained all the pictures and text for the body of the document, along with all the different boxes or Divs which provide the structure. The home page run in a web browser at this stage would just show all the different elements one on top of the other and would not be terribly impressive at all. Once Martine checked the HTML it was time to do the CSS.

Code Glorious Code!

On the left the CSS, on the right the HTML

The CSS is what gives flair to web pages. How text looks, the spacing between each picture, each Div and basically all the style elements are governed by the CSS. I have a habit of checking how the document looks in the web browser after every few lines of code. This lets me know whether the document is going the way it should. Even with all the preparation I had made there were still some errors and omissions which goes to show one can never be too prepared.

Unfortunately by the end of inputting the CSS code it was apparent that something was wrong. The Div with the pictures was not where it should have been and the spacing between it and the Nav wasn’t right either. I couldn’t work out what the problem was. I kept combing over it to try to spot any mistakes but I couldn’t find any. Martine said she would have a look over it the next day but the next day there was a snow blizzard and she was unable to come in. So I am stuck with a broken webpage which is frustrating to the extreme. Hopefully Martine shall be able to come in tomorrow and end my misery!

Home page drawing & mock up

14 Mar

Now that I knew what way to lay out my webpage I decided to have another go at a web page mock up. I started out by using graph paper to draw out the individual components of the page. The pictures and text parts will become divs once I do the code for the website. Once I was happy with this I showed it to my tutor Martine. She was happy with it as well.

Client Home Page Sketch

Graph Paper Mock Up

Next it was time to use Adobe Photoshop to bring colour to the page. I started out by placing horizontal and vertical guides wherever they were needed to mark out where the logo, navigation bar, pictures, text and footer were to go. The rest of the page went smoothly as I knew where to put everything. Once this was finished I e-mailed a PNG of the document to my client. It seemed like an eternity waiting for her response but like it she did. Also she was working on the text for the website and she would have it for me by the end of the week. This was most gratifying.
Client Home Page Mockup

Client Home Page Mock Up

After the event I decided that there needed to be more space between the individual elements of the document. This could be done when I do the actual code for the webpage.

Creating the diagrams & the Home Page Mock Up

12 Mar

I had my logo done but I was still waiting for my client to send me the text for her website. I did however have a couple of projects related to the website to occupy my time. One was a Venn diagram which I created in Adobe Illustrator. The other was a diagram illustrating the various factors that lead to good health. My client was happy with the Venn diagram although the colours were not to her liking so I changed them. She was very happy with the health diagram.

Venn Diagram

Venn Diagram

I realised the site would need pictures to give it a bit of vitality. As my client was not going to be providing me with any I knew I would have to look for some elsewhere. I came across a site called Stock Xchng where pictures are free so long as the owner of the picture is credited. I ended up downloading over one hundred pictures from the site, definitely enough of a stockpile for my client’s website!
Health Diagram

Health Diagram

I decided to make a mock up of the home page even though I didn’t have all my client’s information at that stage. It consisted of the logo at the top with a navigation bar below it. Beneath this was one of the pictures I had downloaded in the centre of the page. Next was the main area which had a heading and then Lorum Ipsum filler text. Finally I had the footer which had copyright information and links to other pages.
Webpage Mock Up

Webpage Mock Up

When I met my client she told me that although she liked the colours I had used she wasn’t happy with the layout of the page. So I asked her to draw out the layout she wanted. The drawing had the logo and navigation bar at the top like my layout but where it differed was she put pictures on either side of the main area. This looked a bit odd.

The next day I showed the drawing to my tutor Martine. She did not like the layout either. She suggested that the pictures should only be on one side of the main area. This way the focus of the page is the main area and not the pictures on either side. The next time I saw my client I brought this to her attention. She acquiesced which was a huge relief to me.

Creating the logo for my client

18 Feb

My initial idea for my client logo

Part of my web design course consists of designing a website for a client. I had a bit of free time on my hands so I decided to come up with some ideas that I could use for my client’s logo. I had not officially started on my client’s website yet but I thought it was a good use of my time.

I came up with an amber sun with yellow rays emanating from it and a white cloud at the base of it with the heading “Live Well Dietary Coaching”, my clients company name. I used Adobe Photoshop to produce the work as I am reasonably proficient using it.

The client is a friend of mine and as I was seeing her socially that evening I showed her a print out of my idea. She liked the colours and the idea of the sun. She had some ideas of her own such as using scales to signify balance in life. This seemed like food for thought to propel me in the right direction.


My initial idea for my client’s logo

Logo Mark II

Over the coming days I worked on the logo. My tutor Martine told me I had to use Adobe Illustrator to produce the logo as it was a requirement of the course so I had to stop using Photoshop. I eventually produced a logo that had potential. I e-mailed a PNG file of the logo to my client to seek her opinion on it but she didn’t reply. I showed it to Martine and she suggested adding some gradients and shadows to give it more depth and texture.

The logo consisted of a blue sky with an amber sun in the centre creeping over the horizon. Then there was green land with a black scales (signifying balance) in the foreground. Finally the name of the company was at the bottom in gold with a black background.

I was pleased with the final result. It had been one week since I had shown my client my initial idea and now I was going to meet her again to do an interview with her to set out the parameters of the website I am to design for her. This was when my work for my client officially began.


My subsequent idea for my client’s logo

The interview & utter rejection

I met my client on 7 February 2013 to interview her regarding the website. It was the first occasion where she proffered an opinion on the logo which I had been working on over the last few days. She didn’t like it. She didn’t like the scales which she herself had asked me to put in it. There was green in the logo and she told me for the first time that she doesn’t like green. It was a major blow for me and I found it hard to keep my emotions in check. She told me that she wanted blue, yellow and orange in the logo and that she wanted the sun and sea in it also. She drew me a sketch of what she was looking for. It looked like a holiday company logo. Not exactly what her company was about.

Next I had to proceed with the interview which went well. I had an Interview form to fill in which had very specific questions that needed to be answered. I was able to fill in most of the form with the remaining questions to be filled in at a later time.

If first you don’t succeed…

Over the next couple of days I tried various ideas out, none of which were to my satisfaction. I was almost starting from scratch although this time I had a better idea of what my client was looking for. Nothing I came up with seemed to have the potential for further development. I looked at logos online for inspiration. Finally something triggered an idea which seemed worthwhile. I set to work on a new logo which felt right.

My new logo consisted of a very light blue sky with a yellow sun on the left at the horizon and a deep blue sea with “Live Well Dietary Coaching” to the right of the sun. I developed the idea to such an extent that it could be shown to others. Martine, my tutor wasn’t in so I e-mailed it to her and I sent it to my client as well. This time I made it clear to my client that I needed her to proffer an opinion as I needed to know whether to work on it further or whether to start on a new logo. Martine replied that it was a good idea and then my client e-mailed me saying it was “fab”. However she wanted me to add rays of sunshine and waves in the sea which was fine by me.

The definitive article

The next day I worked on giving the sun rays. I gave the rays a transparency so they wouldn’t overpower the other components of the logo. I tried to do waves but was unhappy with the results so I hoped that my tutor would be in the next day so she could help me. Thankfully she was. Martine showed me how to paint waves using brushes and I was pleased with the results. She also helped me give the sun a more prominent texture and give the horizon more definition.

I printed out the logo to show my client whom I was seeing that evening. Her response was muted when she saw the print out but when she saw it on her laptop screen it was as if it leapt out at her. She loved it but but there was a proviso –  the font of the company name had to be changed and  the sea should  be cropped slightly.

As soon as I got onto my computer the following day I got to work on cropping the sea and changing the font. I e-mailed my client four versions of the logo so she could choose the one she liked best. She e-mailed me back telling me which one she wanted. Now, finally the logo was finished! She showed the logo to some friends of hers and they loved it! I was jubilant.


The final article approved by my client

The Blog and About Pages

29 Jan


My Blog Page

The next phase of the project was to create the blog page. Again I had to make a mock up of this on graph paper and in Photoshop. The coding once again was challenging but I persevered and got through it. It was of help that the header, logo and footer were the same as on the home page. I was very pleased with the final result.

The next stage was to do the about page. This didn’t require an awful lot of coding, just a bit of writing explaining the gestation of the website.

At this stage I was heading for the home straight. I had a lot of validation to do at the World Wide Web Consortium website. I had to validate all the HTML and the CSS and where there were errors fix them. Once this was done all that remained was to upload each page and all images associated with it onto the GHIS website. And there it is, for my sins!

My first web page

28 Jan

Project1Thumbnail_ck.png 400x309

My Home page

The next part of creating my web site consisted of drawing a mock up of my index page on graph paper. I found this difficult as I had to show all the dimensions of everything such as the navigation and the h1s. It is traditional for the index or home page to have an image on it. I decided that the best image for my site would be a collage of various pictures of my cats so this is what I worked on next.

Once my tutor Martine was happy with my mock up it was time to make a prototype of the home page using Photoshop. This gives me the first onscreen glimpse of how my webpage will look. At this stage one gets an idea of what colour schemes work best and what fonts look best. When the prototype of the home page was finished it was time to work on the code for the actual web page.

The coding is the tricky bit as inputting long amounts of code can be laborious and mistakes can easily be made. The navigation bar which was at the top right of the header in my drawing and Photoshop prototype had to be changed to the bottom right as there were unforeseen problems with it. I also had a lot of problems with padding and margins which were only apparent when I tested the web page in Internet Explorer.

I have to say that the process of creating the web page was an interesting one, full of ups and downs but with an enormous sense of accomplishment once the web page was finished.