Architecture Website Logo Designs & Research

Research

I have decided to look at the different architectural logo designs that are currently being used. This will give me a better idea on what features my own personal corporate identity will be like.

This sort of logo design reminds me of and estate agent or an eco friendly firm.
I think it reminds me of this because of the shapes and the two greens that are used. I want my design to have more than one colour element to it.

This logo is very modern and simple, I would like to follow the same style as this by using simple shapes.

I do not like this design very much as it seem rather out dated and wouldnt look very good on a new modern website. I think that it is too dark and doesnt make a statement about the firm.

Looking at all these logos i have found that the colour green is a very popular amongst most architecture companies. I will do something that is completely different to most of the brand identitiys that are being currently used.

Designs

To make my website look professional i have created a number of different logo designs. I will place one of these onto either the header or footer of my page.

This is the text i will be using for my logo i like how i have made it modern by using two different fonts and making them fit the actual text.



Navigation bars

A navigation bar (also known as a links bar or link bar) is a sub region of a web page that contains hypertext links in order to navigate between the pages of a website ( Wikipedia)

The main function of a website is to navigate to different pages. A navigation bar helps us do this. Navigation bars are the main source in which we find the pages/content we need. For example you could look at the MSN.com navigation bar, this contains lots of different ''links to the pagesyou are looking for.

This navigation bar gives you the different catergories that are available within the web site. This is much easier for the user and saves time.

Whilst researching navigation bars i found that the majority follow the two click principal of the web. The content is also very short as it is easier to read and therefore you can quickly choose what you want. For example if a navigation bar contained large words and sentences we wouldnt find this easy to use.

Styles

I have found that all navigation bars come in different styles depending on the design and what the content on the bars are.

Navigation bars are made by creating a html sheet whcih will determine what the content is on a website. You can then edit the style of a nav bar by creating a Cascading Style Sheet (CSS) which will allow you to change the padding, colour, hover colour and the font.

I found this design on the website

http://www.w3schools.com/css/css_navbar.asp

This site is very good and allows me to edit the Cascading Style Sheet where i can make the navigation bar my own design.

Architecture website research

To get a better understanding of what architecture websites need to have included to make it look as professional as possible i looked at anumber of different architecture websites that have either been given awards for or are of a very high standard.

I have found that all good websites need to have the following...

• Good Design
• Ease of use
• Interactivity
• Use of technology
• Innovation
• Good Content

I will follow this when designing and creating my website

I chose to look at these Best Architecture WebAward winners. As they are very professional and look like they would grab in clients just through their web page.

AECOM

This image is from the front page of the actual website. I looked at the source codes for this page and found out how it was created and the different fonts and colours that were used to make it look quite professional. I like how on the front page of the site it shows you screen grabs of what the actual website looks like once you click the view website link.

I then clicked on the link to enter the site and found that it has lots of images of the companies current projects and plans.

The way the images have been placed on this page work very well as they make the page look less cluttered and stick to the principals of a website.

I then found that the page is interactive and has a sort of slidshow on its home page which shows both images and videos i found this very impressive and is something i would like to try and create on Flash for my own website.

Navigation

The navigation bar is very important to a website as it has to be easy to use and easy to find specific content. Whilst looking at this website i found it very easy to use. The only problem i found with it was there was too much content with the navigation bar which found it quite hard to figure out.

Interactivity

To make my site impressive i want to make it interactive, where my audience can click certain areas of my site and find it amusing. Whilst looking at aecom i found that it has a lot of interactive properties like being able to change the images on its different pages and you can also filter the pages by choosing what you want to see instead of having information that isnt relevant to the user.

This image is an interactive part of the web site because you can choose what images you would like to look at. You can tell this page uses the programme Flash because of how quickly you can interact with the page.

For example you can change the image above by moving your mouse cursor over the black rectangle at the bottom of the main picture. Doing this reveals more information and makes it more interactive.

||

^

 The navigation bar for this website is very practical and easy to use. In just one click you are directed to the page that is clearly stated in the navigation bar. There are'nt any drop down menue's or lots of content to look at it is very easy and quick to use.

...........................

BHDP

I found this website very impressive as it focused mainly on its projects and their ability to created good architectural buildings.

The BHPD website is very simple and easy to use.

Navigation

The only thing i found what was wrong with this site was that the navigation bar blends in too much with the background which makes it difficult to find.



Other Architecture Websites

http://jump.dexigner.com/directory/8556

I really like htis website idea becasue of the way you can interact with it for example at the top of the page theres a ''rate'' button where you can rate the companies website and information that is on it. This is something i am interested in because it lets the users tell you what they think.

http://www.leoadaly.com/

I am not too sure about this website it seems to complicated in terms of its layout and the font sizes. I also think that in terms of content there is too much which makes it seem quite boring. Although it looks professional it looks quite out dated to me.

.................

AEDAS
 

 http://www.designfinder.co.uk/letter-search~action=detail,pid=1344

I found this website whilst looking through google for the different names of architecture companies. I found it quite intersting as it was different to previous sites i had looked at.

This site shows its work im more depth with the images used on its splash page. It shows a variety of different images and shows both its industrial side of work and the end products of their designs. THe majority of the pages on this site have very little content. With just a search box and a text box with information added. I have found that the image is clearly the main focus of this site. This makes it seem simple and un complicated.

Navigation

The navigation this site is very simple but is placed in an awkward place. For example on most websites you will look on you'll find the navigation bar the top of the page either underneath the header as a main feature. Aswell as just having the one navigation bar it has a sort of add on bit where you can find out a little more from the first set of options.

This is a screen grab of where the navigation bar is. It is quite difficult to see at the bottom of the page. I would use this layout for my web design.

Interactivity

This site doesnt have much interactivity apart from the fact that you can download a review of the company and that you can hide the infromation boxes and use the search box to find what you are looking for.

This site is very simple and concentrates more on its images than on its content and level of interactivity. I wouldnt mind creating a site that is simple but i would have to make a few changes like making the content my main priority.Whilst looking through this web site i found it quite interesting as it had lots of this that you could get involved with. Such as moving images and interactive buttons thats were not part of the navigation bar.

RMJM

http://www.rmjm.com/

whilst looking at this site i found a page that was very interesting to me.

This image is fully interactive. The yellow dots and arrows are clickable and shows the process of how the company works. This is very clever and is something that i would like to try on flash.



This is another interactive part of the site that i found interesting. The site allows you to look at a number of different images without having to click more than once. The yellow button at the side of the images allows you to do this.

Navigation

This is a closer look at the three main navigation bars.

The navigation on this site is quite easy to use but there is too many different navigation bars on the page. I found that there is a side navigation bar a top bar near the header then the larger text on page is also a nav bar. This can be quite confusing and takes you a while to find out where you are going.

Overall I think that this site is very good in terms of content, usability and interactivity. These are the things that i am more likely to focus on when creating my own.

Headers and Footers

I decided to look at the different types of headers and footers that other people had created for websites. I found this very helpful when designing mine as it gave me a greater idea on what mine should be like in terms of colour and size.

http://webdesignledger.com/inspiration/headers-and-footers-that-grab-you-coming-and-going

This is the website that i looked at to find the different headers and footer designs i liked. I chose to look at three different styles to show some form of comparison

This is the first header and footer design i looked at. The way they both fit together works really well and keeps to the same style and colours. This is the type of header and footer i would like to create where i can created my own image and have it as part o the actual website pages layout. I have noticed that in this design the links that are usually near the bottom on the footer have been put at the top of the page above the header. This is something i havnt seen before.

I love how child like this design is. The images link together kind of like a childrens book. It is very bright and different to what i have normally seen. I really like how the text on both the header and footer does not interfere with the images, i think that this works very well.

I have also noticed that the header banner is linked in with the navigation bar at the top. Which i think is unusual to see on web layouts, because they are normally seen underneath a banner.

This design is completely different to the previous two because of the sort of realness it has with the photos of the bananas and how it has a kind of 3D effect unlike the others which seem rather flat. I also like how there is three different link buttons on the footer which look

 like they are part of the background image within the header.

I decided to create my own different headers to see if i could make a good functionhal design.

This was the first design i created. I decided to take and image and edit it to the style i wanted and gave them different widths and fitted them together so that i could see if they would work on an actual web page.

I liked playing with the different colours in the images so that the design of my web site could have different variations

I like this design it would go well witha  black background and some white lettering and tabs on it

Analysis Of Web Sites (MSN)

I have also decided to look at the website MSN as it uses lots of different elements within it and links to a lot more different sites and pages. I also chose to look at this site as you can check your eamils and log onto your other accounts by going onto this site. I think that is a very straight forward and impressive website. Aswell as looking at its functions i have looked at its colour schemes and how it all fits in together.

This website is the only one that i have came across that regulary updates and changes its background to some form of advertisement.I think that this is good as it provides more than one service.

I also think that the sites browing facilities are very easy to use and like the NME website it brings you to other parts of the website quickly just by following the same principals.



Analysis Of Web Sites (NME)

I decided to analyse the NME website as it is something i normally look at and is the more technical side of the NME magazine. This website was created to keep the magazine up to date with technology and the culture we live in.

The themes and layout of this website match with the themes and the similar layout of the NME magazine. You can tell this by looking at the typography, the logo and the colours that are used i.e the red,white and black.

I

 have also noticed that this website also follows the very same principals as most commonly used websites have such as the two click system and the way the layout it set. The two click principal is mainly referring to the navigation and browsing bar at the top of the page.

This picture shows exactly how the two click system works. For example if you click on news it brings down another small browing bar which gives you the options of what page you want to go to.

Analysis Of Web Sites (BBC)

I chose to analyse bbc.co.uk because it is a popular website that is used and is very easy to navigate round.

Whilst looking at this website i found that it followed the exact same principals as the other three it had followed the same simple layout style and used the two click system within its navigation bars. I found this website very interesting because you are able to personalise the page and remove the different contents that do not apply to you.

This screen grab shows the tools that are on the website which enable you to edit the page to what you want. You can either shorten the boxes or remove them from the page. This is very handy to the users and can make searching this site easier to manage.

The text and the use of wording in this also sticks to its principals and uses short words and phrases which make it easier yet again and doesnt waste the users time. I think that this is very good for this type of website as it gives you some form of personalisation.

This website also has boxes within the home page that link to the navigation bar at the top of the page. This gives you two options to what you can do. The navigation bar can automatically link you to the numerous pages that are linked to the subject. Or you could possibly use the boxes on the front page that give you smalls amounts of information and links that will directly take you to where you would like to be.

Typography- The typography and text of this site seem to match well with sites corporate logo. This is most prominant at the top of the page and within the individual text boxes.

Analysis Of Web Sites (youtube)

I have chosen to look at four different types of website that i most commonly use. I have chosen to analyse

1. http://www.youtube.com/
2. http://www.msn.com/
3. http://www.nme.com/
4. http://www.bbc.co.uk/

I decided to look at the website youtube first because of its interactive side. The fact that you can watch videos, create and upload your own videos onto this site and have your own account is something that is a major part in web design today.

I screen grabbed an image of youtube so that i could look at it more carefully. I found that the website follows the same principals through out.

This web site continuously keeps to the same rectangular layout to keep the structure of it easy to use and create and also makes it less muddled and squashed up which enables the user to use the site easily.
The text and typography of the website is very simple and easy to read. It also has an interactive element to the text. for example some of the text on this web site it highlighted in blue whcih gives you and indication that it is a link to another part of the site.

The usability of youtube is very good as it is very simple to use and allows you to browse and search for your own material.