ATRG - remaining pages

About Page:

Projects Page:

ATRG re-design!

I've recently had a change of thought about my original design. Having coded the Home Page and viewed it on a larger screen, it seemed a bit plain! I've redesigned the layout, but kept the content in the same place so it didn't take too long! To date, I've coded the Home Page and Contact Page (possibly making slight alterations later!)

ATRG Projects Page

If you're wondering what the thing is in the middle, it's going to be an interactive timeline!

ATRG Contact Page

ATRG Home Page

ATRG website banner

This is How the logo and navigation will appear on each page. I have decided to alter the logo slightly by changing the colours to match those in the colour scheme sample (posted previously). Adding colour to the banner will inevitably bright the page up, making it visually appealing for the user.

Client Project ATRG

Objective: To produce a slick, stylish 4-5 page promotional website with the express aim of documenting the work of the Advanced Textiles Research Group (ATRG). 
The market for innovative products in the medical, fashion, artistic sectors are great. This promotional website should describe the success already achieved by the group.

Time Plan: To begin the project I created a time plan, making effective use of my time (as shown below).

The second, most important factor I considered prior to beginning the project was the audience. The site will be aimed at primarily Industry, Research Students and fellow Researchers. With this in mind, it is essential that the site is classy, chic, informative and 'to the point.'

I then created a site map, displaying how the pages link together: 

I am currently unsure whether to display links to Twitter and Facebook on every page. A prime disadvantage of this is that the user may become distracted by the social network site. They may navigate away from the Research Group and not return. However there is an option to open their Facebook page in a new window. Alternatively, I may only display the links on the Contact and Home page.
 Research: Before beginning to design the site, I researched into, what I believe are current, well structured websites (as shown below):

Although there isn't anything special about these sites, I really like their appearance and how basic they are. In both examples, it is the images that make the site. This is where I currently have a problem, as I do not have access to high resolution images such as these. 

Taking into consideration that the textile group is part of NTU, I have decided to use a colour scheme based on those as seen on Nottingham Trent's website:

This will prove to be an advantage as it will add consistency to the group. Users who are familiar with Nottingham Trent will be able to recognise that they are part of the University.

Possible logos designs:

With the intention of a new logo, I created those as seen above. The second and third logo are similar. However during the creation, I could not decide which font I prefer. After viewing them together, I prefer the second. After creating the first logo, I decided to alter the font to match the one in the Nottingham Trent logo (adding to consistency).

During the mock-up stage, it is likely the colour of the logo will change.

Wireframes: Following on, I have started to create wireframes of each page. This will inevitably make creating the website easier, as I will know what goes where.

Home Page:

Projects Page:

Work Experience

So over the holidays I've managed to bag some work experience with Website Solutions, in my local town of Grimsby.

Above is a mockup of the Home Page for a Humberside Upholstery. With a little luck, they will be taking it to a meeting with them next week!

Group client project

Recently, each member of the group created a mock-up of the Home Page. We then picked the best 2 and emailed them to Tim. We are now waiting for a reply, stating which design he prefers. 

In the meantime, I've created a wire-frame for the About Page and News page, whilst another member created one for the Games Page and Contact Page.

Group client project

Ok, so this is my first post regarding the group client project we are working on at the minute. Safe to say I am pleased with our groups performance!

Last week we had a meeting with Tim Hatton (Business Development Manager) at Notts County Football Ground. We are required to create a junior supporter's website (under the name of Team Magpies), which is targeted at 7 to 16 year olds.

Below is the complete brief, as provided by Tim:

General comments

We need the website to be attractive to the children who will use it.  Team Magpies is split into two sections: all members are under 16.  Mini Magpies are 0 to 6 years old and Team Magpies are 7 to 16 years old.  Bear in mind that young children will not use the website.

I will be able to supply the copy for the content, but you can populate the different pages and I will amend them as necessary.

Visuals

The website needs to be interactive and fun.  It also has to be less corporate than NCFC Football in the Community and NCFC’s website but still fit visually with Notts County’s family of websites.

http://www.nottscountyfc.co.uk/page/Home/

http://www.nottscountyfitc.org.uk/

The Team Magpies leaflet and the page on the Team Magpies page on the NCFC website give all the information you need to start completing / filling in the copy for the different pages we need.

Content

The pages we will probably need are:

Home

About Team Magpies

News

Games / puzzles / quizzes / competitions

Contact us

This list could be extended – so it would help when you build the website if you could enable us to add additional pages if required.

Websites we like for this age group

I looked at lots of clubs websites but most don’t have a Junior Supporters section.  Arsenal’s is the best of its kind.  See below:

http://www.arsenal.com/juniorgunners

The CBBC website is good for children who are 6 years old upwards

http://www.bbc.co.uk/cbbc/

The CBeebies website is good for games for young children, so it would be useful to have some similar ideas for our younger members.

http://www.bbc.co.uk/cbeebies/

We need to include free football-related games, quizzes, puzzles, competitions etc. 

NB - We need to be able to update the website easily after the website project has been completed.

This will sit on staff desktops, so they can hover above a photo of a colleague, find out their name, click on it for their email address and phone numbers etc.  We need to be able to click on their email address so it opens up in Outlook.

There are about 40 – 50 members of staff at the club and 30 members of staff at FITC.  Not all of these have email addresses.

We need to be able to update this after project completion also to allow for new staff and people who leave.

Client Project: Mobile designs

Below are my designs for the mobilised website...

Client Project: Update

Having begun to create a one page layout, it occurred to me that it would be difficult to convert it to a mobilised site. I mentioned this issue to Nicola, and we both agreed that creating each page individually would be easier. This lead to a whole new website layout...

Client Project

Task: Design and build an artist / arts organisation website. This will be a website and related mobilised website* which will act as a promotional tool for an artistic individual or organisation and which will increase both profile and online traffic for the client.

My client for this project is a friend [Nicola] who studies Interactive Media at Lincoln University, but doesn't have the time to create her own portfolio.

Having spoken to Nicola, telling her what I am capable of creating, she has decided on a horizontal, one page layout, with the following colour scheme:

She has also stated that she wants a Home Page, an About Page, A Portfolio Page, a Blog link and a Contact Page.

I have begun to create the wireframes, as shown below:

Portfolio Wireframes

Since my last post, I have created wireframes as shown below...

Additionally, I have begun creating my portfolio. Below is a screenshot of the home page...

I have chosen to use fixed navigation at the top of the page. This means it will always remain at the top, even when the user scrolls down. The primary advantage of this is that it will always be accessible.

A second feature I have used is the Javascript scroller (which was made available online), to display recent work. The main problem encountered here was that it only functioned in Chrome and Firefox. This was a main disadvantage to Internet Explorer users. To solve this problem, I enquired about it on a Jquery/Javascript forum. A user shortly reply saying  a comma was not needed in the code. Having removed the comma, the scroller worked in all three browsers!

P.S. I also updated the layout of my blog to fit in with my portfolio!

Portfolio

For Context 2, I am required to create a Portfolio to present my work. Even if this wasn't an assignment, I would still create one - to get my name out there and expand my network. I've recently purchased my domain name, so it should be up and running soon!

This is the colour scheme I have chosen to use. Having researched current portfolios, I believe the majority of them have a simple appearance, with a limited number of colours. I have chosen to make mine pretty colourful to represent me as a person!

Above is the logo I intend to use on my site. I created this using Adobe Illustrator and by following online tutorials on how to make 3D text. This is the first time I have created something "graphicy" and I am pleased with the outcome!

After having created my logo and decided on the colour scheme, I created a mock-up of the Home Page, as shown below:

However, I am currently unsure on whether to create each page individually and link them up, or to try something new and create a one page website.

Restaurant website

For my current University assignment, I am required to redesign a poorly constructed restaurant website. I have decided to resesign La Bella (see image below), an Italian restaurant based in Cleethorpes. The reason for this is because it has a "boring" appearance. Additionally it does not state that it is an Italian restaurant.

To begin designing the website, I researched into current sites, in order to decide on which pages to create, and then began to create wireframes:

Article from .net magazine

Last week, I was given a .net magazine from my tutor. I found the following article and decided to blog about it because I found it quite useful!

You probably won't be able to read it, but it's basically about working with clients. It offers advice such as "Remember many clients have never run a website or made decisions about design. They therefore feel the need to get the advice and opinions of others to reassure themselves of their decision."

Additionally it suggests not to rush into the project, "but to slow things down a little, and process with your design step-by-step" - i.e. create wireframes, moodboards etc.

Finally, the article provides six useful tips to consider when working with a client. These are:

1. Ensure the client understands their role in the project. Starting with the kick-off meeting, reiterate that the client's job is to find problems, not solutions.

2. Have a strong methodology and instill confidence in the project by making sure your development process is clearly outlined to the client.

3. Include the client often and early so that they feel engaged in the progress and development of the design project.

4.  Educate your client about design decisions. Explain and justify your final decisions so the client will be confident and able to explain changes to other stakeholders or superiors.

5. Ask for specific kinds of feedback from the client. Target your questions and focus on the end result: "Will users like this?"; "Does this fulfil our original design objectives?"

6. Avoid saying "no" during the process. Be open to discussing and negotiating prospective changes.