OUGD504 - Design For Web (2)

Crit 1 - 5/11/13

After this crit I decided to go back to the beginning of the research and look into the different areas that I can research into to get a more informed scope on the subject of Hand Drawn Type.

To start with a did a brainstorm of everything I was considering and other information that I could include.

From this brainstorm I decided that although I had an interest in Hand Drawn Type, it wasn't a viable option to create a website on because I was finding it hard to make a website concept dedicated to one section of it without moving into the subject of type as a whole.

I narrowed the brainstorm down to what I found most interesting and what I could make a website on:

• Anatomy of Type
• History of Type
• The alphabet
• How to create a typeface/font

Out of these four areas I decided that as I knew the Anatomy and how to create a typeface, that I should make a website on the history of type, and more specifically the history of the alphabet and how it has changed through time.

Website research

I found that because it is such a large area at first all the information was overwhelming. When I thought I had the concept down, I read more information and it made me realise there was more to include/consider before narrowing it down.

My first initial idea was to do a website on cuneiform and I spent some time researching into this and decided upon the few alphabets I wanted to base the website on. From doing this research I created a few designs for the homepage to show it all in a simple and easy to see format.

I went back to looking into research after doing these and after doing deeper research decided that because it was such a large subject and overwhelming at first it wasn't going to be possible to make only a five page website on it because there was so much information to consider and understand before even considering designing a website dedicated to it.

After this I decided to look into the five completely different writing systems in the world:

• Sumerian
• Chinese
• Egyptian
• Harappan
• Mayan

However I found that because these were the original ones, there were a lot of different alphabets/writing systems that were spawned off of these, and once again there would be a huge amount of information to cover on just a few web pages.

As this is such a big subject area I knew I had to narrow it down to a specific subject otherwise I'd be going round in circles trying to create a website over a large amount of information.

After looking over all the research again I decided to create a website on the evolution of the alphabet, which incorporates all the research I did, but also is specific enough to be concise.

I looked through a large amount of writing systems & alphabets and decided that I would start with the Sumerian (because it's the earliest) and show the evolution of that to the alphabet that we know today.

I drew out a timeline highlighting a selection of alphabets that I could potentially use in the few I wanted to based the website on.

I wanted there to be quite a clear change, but also not make it too hard to see where the changes were made and show the obvious relation from alphabet to alphabet.

From this I decided to focus on five:

• Sumerian
• Phoenician
• Greek
• Latin
• Now

I found that there was quite a clear influence from one to the next and thought that these were the most relevant when it came to the subject matter. As I want people to be able to connect with it, using civilisations that are well known is something that I had to consider, which is why I decided to use Greek & Latin.

CHOSEN CONTENT RESEARCH LINK

I decided that I would do a seven page website:

• Homepage
• Sumerian
• Phoenician
• Greek
• Latin
• Now
• Timeline

After deciding on this subject area I thought about the navigation of the website as this would shape the website as a whole.

My initial idea was to have it as a linear website where each page followed another, however it would mean that the user would have to go through every page to get to the particular one they wanted.

Linear navigation

 After scrapping the linear idea, I wanted every page to be accessible from the homepage, and for the five alphabet pages to be linked as well. The timeline would be a separate link which only connected to the homepage. However this would also make navigation a little bit tedious for the user as they wouldn't be able to get onto the alphabet pages straight from the timeline.

Navigation 2

 After consideration I decided that I would have every page link together and accessible from every page. This makes it the most user friendly and easy to use.

Chosen navigation system

After deciding on the navigation I started work on thumbnails for potential page designs.

I then took the main page thumbnails and drew them up properly to see how they would look at a larger scale.

From these and the smaller thumbnails I took the ones I felt were best and created some precise grids around them.

Homepage 1

Homepage 2

Content page 1

Content page 2

Content page 3

I wanted the homepage to be simple and easy to use, so because of this I was going to use images for each button, which would flip to text when hovered over.

For the main pages, I wanted to follow through with a simple layout, so wanted just one section of text with a grid of the alphabet letters/symbols on the opposite side which would change to the meaning when hovered over with the cursor.

The timeline page is something that I want to be interactive, so that you can click on the five titles from it in the timeline and it will take you to the page. For this I will be taking a simple horizontal timeline approach to it as it is the easiest visual to understand.

My first thoughts are that the simpler appearances worked better, so the two designs on the right. However, which one I chose would depend on how I wanted the navigation bar to be, along the side or along the top.

From the grid designs above, I chose the three I wanted and took them into InDesign to modify them. I then drew out my finished grids.

Homepage

Content pages

Timeline page

I took these and drew out a basic look of what they will look like.

Final pages

To get a better visual understanding of how these would look I opened up Illustrator and did a mock-up of what they would potentially look like and how the buttons would work when hovered over, starting with the home page.

To start with I went about choosing a colour to use.

I knew that I wanted to use a bright colour as I wanted the page backgrounds to all be white. I looked at four different bright colours and decided on colour scheme #3 as it didn't involve black or a second colour and it would be interesting to make a website which has only one colour throughout. It will give contrast and make the text/images stand out instead of the potential to get lost within the design.

To start off with, I took the alphabets and made each of the symbols/letters into vectors and applied the colour to them.

Sumerian

Phoenician

Greek

Latin

Now

Overall I think the letters all look good and work well in the colour. I was concerned that perhaps the colour was a bit too bright, but I think it has worked out very well.

After creating the letters/symbols the first thing I needed to do was create the main title for the website. I wanted it to be striking and keeping in with the whole idea of the website so wanted to mix up the letters from each alphabet to write the word 'alphabet'.

To do this, I started by drawing out the different letterforms for each letter of the word. To do this I can not use the Sumerian alphabet as they mean full words, and not single letters. I also think these are perhaps a bit too abstract to use as a single letter, and those from the Phoenician, Greek and Latin are a lot easier to read when put in a word with current lettering.

From these, I then 

After deciding on the title I took these letters and created the title in Illustrator .

I then made the digital mock-ups for the homepage and went through colour variations.

After going through the variations above I thought that the ones with coloured boxes were too bold and it didn't really fit well together so I changed it to just the outlines of each button being in colour. I found this worked much well and balanced the layout out well.

Homepage

Buttons changing to text when hovered over

After I completed the homepage I started on the main information pages. I realised that I had buttons to link to each page apart from a button that indicated going back to the homepage. I wanted to keep it like the other buttons, a letter instead of it just saying 'homepage'.
I looked through the letters and chose out four which could potentially be used for the home button.

I decided on the first as it is the Phoenician & Latin letter for 'H'. Although I liked the other three, the first seemed the most logical choice to use and it would keep in with the boxes & straight lines of the rest of the layout. I added this to the title image of the homepage to give it a bit of context for the user, and wouldn't seem completely random.

Final homepage

Final cursor hover homepage

I took the layout I designed and mocked up the first of the information pages. Like on the homepage, when the symbols are hovered over they will change to the word/letter they are. The navigation bar will also do this.

Crit 2 - 12.11.13

In the crit it was mentioned that there isn't an 'about' section or page of the website which explains the context of the website and why it is there. I added a small 'about' section to the front page of the website which explains what the website is for and what the buttons will go to.

Before coding I drew out an exact wireframe to help make it easier to code. To create this I worked off of the document I created in Illustrator as I set it up for the exact size & in a web format. Although the numbers do seem a little out of the ordinary, this is how I liked it looking on screen so I went with it.

After this I started to code the website. I started by giving each piece of the page a different colour code to check that it all worked.

After seeing this worked, I started to add in the images and buttons, starting with the ones which were just simple images.

I added in the first rollover button and checked it worked before adding in the other six.

All images & buttons on:

After being happy with this, I took away all the coloured backgrounds:

Once happy with how the page looked as a whole, I added to the container coding so it moved into the middle of the browser window.

Finished homepage

I am happy with the way this turned out on Dreamweaver. It was relatively easy to code as there is no text and not a lot of content on it, and once I figured out exactly how to build it, it was just a case of putting everything in the right place & adding the images & rollover buttons.