the application will also have a chat function , this will allow users of the application to to be able to talk to each other instantaneously during the game time , again giving members to options to organize events after the game.  

nlon

iugh9o

External Client Update - 85% Finished.

Things have been going very well in terms of the client project , I have finished most of the code and designs , and spoken to my client and he seems pleased with the outcome , below I will talk in more detail about what changes I have made and what changes I plan to do if any to make the website a better experience for everyone in all browsers....expect internet explorer, no one likes internet explorer.  

In the above picture you can see that I have mostly completed the home page for black owl , it is a quite simple layout , using sections instead of DIVS , but in essence achieves the same outcome , the reason behind this is that I wanted to test myself using HTML 5 and CSS3 coding so that I can future proof myself , when HTML 5 and CSS3 will become the standard and DIVS are no  longer used , which will be soon in my opinion. 

Like I have said  , I have gone with a quite simple layout compared with the earlier concepts I had make , the reason being , I could not expand the li tags in the navigation to extend downwards giving the impression of a sticky note  , another reason was I could make the a tags in the li position themselves   vertically using little CSS , the other techniques I have seen , using extensive br tags to achieve the effect , it did but it left the HTML code in a mess , so I didn't bother in the end.

The above image shows the navigation I have decided to use , a simple inline display , but in order to jazz it up a bit I have decided to use a CSS3 transition which when the mouse scrolls over the navigation bar on an A Tag , the A tag selected will increase in size whist the others fade back into the background.  

Below the slider , are two sections , one named previous works and other named Upcoming works , in the case of the previous works , I decided to have a box slider for the previous work , as I believe it is a nice way of displaying  multiple content and images within the same LI , and it is a modern trend as most websites have some sort of content slider.  With the other section (upcoming works) I wanted to keep it simple so a unassuming  section with two articles inside. Both of these sections can be easily updated when the time comes.

Website Development - External Client Project.

Sorry for the lack of updates , just being trying to crack on with my research project , so i haven't had tiome to update my blog on a regular basis , but work has been developing along nicely despite the lack of updates below are screenshots of the website in its current form , and it is begin the take the shape , the way i wanted to.

i decided to reign back the typewriter font , throughout the website and give the P tags a font they could actually read, this being the Lato font acquired from Google fonts , it is an easy to read alternative to Arial or  Helvetica and I am really pleased with the outcome.

Being in regular contact with my client , has allowed me to quickly implement this ideas and thoughts into the project , so I may be able to deliver the final project before the deadline in 3 weeks’ time , if adjusting  the website to tablet and smartphone doesn't take too long.

Update - External Client Project

Just a quick update again , this is where I am at with the development of the website , as you can see I have managed to put in a background to represent the “desk” this will mostly likely change , as I would lie to add more detail into the back , but again this will be discussed with Phil. 

Font/Text Considerations - External Client Project

This is a just a tester to see what font I should use the for the main body text , in the first print screen , I am using the same text through the website called 'bohemian typewriter’ , It is a lovely  font type which Is in line with the theme of having the website based on a screenplay , but with that  I feel that I am over doing , and there could be a problem of some viewers on the website not being able to read the text entirely.

Here am using a Google font called  Old standard TT , this font face certainly makes a difference in terms of being able to read the main body content , I have decided to keep the same H1 text it really works well has a header text since am going to keep the screenplay theme a contrast throughout the website,  the Typewriter text works well in doing so. As for the old standard text , I am not too sure about it , I believe it doesn't work well  with the typewriter text and is actually quite jarring.

In this screen shot I have gone with a very simple font face called lato , again from Google , I like this text , clean and to the point, when enlarged I believe it works well with the typewriter font face  , but the final decision does not lie with me , but with Phil and i will be sending him these screenshots and see what he thinks.  

Wire frame Development - External Client Project.

Been busy developing the website for Phil , and having shown him the designs I had drafted up in the previous week , and he very much liked what he saw , for the logos he really liked the 1^nd and 3^rd design , and having taken some of his suggestions on board I have tweaked the logo’s here and there and come up with a few more options for him to take a look at , and I will post those designs in the following days.

Design 2 Phil Liked

Design 1 Phil Liked

When it came to the actual look of the website , again he enjoyed the just I came up with but he told he liked the notes on the first design and he thought it was more in tone with modern designs and I would have to agree with him , essentially it makes me designing the website I look easier , without having to do separate HTML files to display the same content , something I would have to have done in the case of the third design. 

The Layout Phil Liked.

So I have spent all of today , doing the basic wireframe of the website , along with making it responsive for tablets and smart phones.So I have spent all of today , doing the basic wire-frame of the website , along with making it responsive for tablets and smart phones. Doing this has allowed what I exactly I need to for the appearance of the site , giving me accurate pixels and dimensions , making my job in Photoshop much easier to do.    

Home Page  Basic HTML5 Placeholders  Based on the Layout Phil Wanted

Who are Black Owl Page  Basic HTML5 Placeholders  Based on the Layout Phil Wanted

Upcoming Page  Basic HTML5 Placeholders  Based on the Layout Phil Wanted

Home Page  Basic HTML5 Placeholders -Tablet- Based on the Layout Phil Wanted

Who Are Black Owl  Page  Basic HTML5 Placeholders  Based on the Layout Phil Wanted

Upcoming Works Page  Basic HTML5 Placeholders  Based on the Layout Phil Wanted

I am still working on two pages  before I can get to work on the styling CSS , but if I keep going at the current rate, I should get this site finished by mid Feb allowing me plenty of time to adjust and add to the site , if Phil wishes.

Logo Design and Navigation - External Client Project.

Just some progress to the current state of the project , i have created a series of logo's for my client to take a look at , these are just early concepts and i will be designing more  , but in the mean time i have sent these logos off to my client for him to take a look at , hopefully providing me with some feedback , so that i can develop them efficiently

For the process i have made in the field of the navigation , i have created three mock up pages of what the navigation could look like, the first image is based on the sticky notes and the second image, the notes are the right hand side. The third is more creative , it will be sections stacked on top of each other , using z index and will be represent both the page and the navigation

Ramblings

 #info1 - Home Page.


width:550px;
height:310px;  for Television



 #bioinfo - About Page

height:800px;

width:860px;



#skillsps {background-color:#334;
 width:400px;
 height:55px;

External Client Project - Wireframes

Below are a few wireframe concepts for the site ,  like I said before I really wanted to focus on the layout ascepts for this project Page layout is equal parts art and science. Creating something that’s visually attractive and unique takes an artist’s eye.

According to a online expect on wireframes  Joshua  Johnson , there are several very easy to follow guidelines that you can use to create solid layouts that work for any number of cases. These principles include choosing and sticking to an alignment, structuring your white space properly and highlighting important elements through size, positioning, etc.

More Research - External Client Project.

Another company I was told to look at was wall to wall pictures ,  a television company based in the united kingdom , what is clear from the site , the use of the colour purple , from the header to the background , in fact the only thing which isn't purple is the background of the wrapper. The website can be described as clean and clear , but I also believe that it isn't very simulating.   

Getting Started - External Client Project

I wanted to do a little bit of research into production company websites as I have no knowledge into what kind of website design they follow or is there some sort of a trend , but lucky my client Phil has given me some background research and website to look at , in order to heighten my knowledge.

First off we have wellington films , what I like about this website is the bold typeface and the large gallery  in the center of the page , giving emphasis on the current and past works of the group , which at  the end of the day , is reason why the costumer and potential investors are visiting the site is because they want to see what the company has done in the past and current works.

The colour scheme of the  website is different from one I have seen from current websites , but I like it strangely enough , the red really stands out from the black background  , which again works with the white subtext for the links down the right hand. 

But on the other hand it looks plain and unexcited, one of the reasons Phil wanted to work with me is because is really liked the visual style of my websites and has given me full creative control of the website , though I have vowed to that I will not go overboard with the design scheme , it has to remain somewhat professional , but eye catching and appealing at the same time.

My mind went blank for a little while , but I have come up with what I think it is a brilliant idea , a website based on the visual styling of a screenplay.  

Above is a VERY early mock-up using Google images and Photoshop of the  kind of the idea I am going to go for , as you can see the website is very set in the screenplay style , and I think Phil will like it , and if he signs off on it , I will be steaming ahead with this design. 

Client Project - Phil Nodding - New Project

So the new term brings a new project to do, but with the different being an external client rather than with internal. But the work ethic will be exactly the same. I am happy to report that I already have a client sorted in the shape of Phillip Nodding , screen writer and lecturer at NTU , we had already agreed for me to do a website for him , after he was impressed with the work I had done with Shaun Belchers website in Year 2.

My website for Shaun Blecher in Year 2

With this being my last ever project at NTU , I plan to use all facets of my skillset in order to produce a website that best showcases my abilities.

For this project I wanted to take a closer look at the layout for the website , and after I some research , I found that they are many different layouts you can choose from , each having a different purpose from the standard two or three column layout  to more complicated layouts such as the power grid and five boxes layout.

I have discussed in emails with phil on what does he want from the website and he has responded with a number of websites for me to take a look at , over the week i will be discussing each website in detail , but in mean time ,am just giving a brief over view of what i intend to do. 

i want to do something along of this

  

New website - Update mm

Updated Context 3 - Process