Website Ideas

Final website

This is my final portfolio page, Im very happy witth the way it turned out as I think it sits nicely on the page with the white background. The page is simple and to the point which is exactly what I wanted, as a viewer nobody wast to mess around with a portfolio page they cant navigate and the way this page is laid out its very easy to use. When the tab at the top of the page "portfolio" is clicked the image shown above is what will appear in the browser.

This is my final contact page, overall im very happy with the way it looks as I feel the information that needs to be on the page is there and in an east efficient way. The 3 tabs at the bottom of the page will link the user to Facebook, Twitter and Blogger as these are all a way that the user can contact me, Blogger has information about all my graphics work I have done at the university of kent which the user may also find interesting.

This is my about page, I wanted this page to have a great impact as its about me and my portfolio but I also strongly feel that the user of my site has to like you as an individual and I tried to get my personality across with the information and image on the above page. I think by making certain words in the paragraph bold it adds a nice typographic feature to the page and its gives it a feel of design.

This is my final homepage, im very happy with the outcome of my homepage as my inspiration for this page came from the pearl fisher page. The pearl fisher page was very simple and this was the effect I was going for, it was simple black text on a white background but the sleek layout is what gives the site its design. I sometimes did get the impression that my page looked very simple and plain but this is the effect I was going for as in some cases less is more.

Navigation

Here I started to experiment with page navigation and where my links to,home,portfolio,contact and about are. In my personal opinion I think navigation need to be clear and simple as when someone visits your page you don't want to confuse them and make it hard for them to be able to navigate around your page otherwise they will just get fed up and leave. Making the tabs as clear and visible as possible will lead to an easy navigational page.

Again experimenting with the navigation on the page, on my opinion have it in this style makes it look cluttered and unprofessional.

I found many designers portfolio's used this style of navigation but I don't really like it in terms for navigation as these are the main tabs in which viewers will go around your page.

Contact Page development

This was my first idea for the development of my contact page. Ive kept the same point size and typeface running throughout my pages. I also decided that i was going to take the tabs for facebook and twitter off my homepage and put it on my contact page as they both are forms in which I can be contacted in. The image above has all my information on it so its just a matter of experimenting with it on the page until I find one that is appropriate.

Here I literally just moved up the contact information and also moved my facebook,twitter and blogger tabs into a more central position. I think having the page this way draws away what the actual reason of the page is, I think my tabs need to be perhaps smaller or in a less dominant position. 

I was really pleased with the outcome on this page, keeping the consistency of the grey box I added the sub header "Would you like to contact me" again giving the viewer an instant idea as to what the page is , this also engages the viewer as its in the form of a question rather than a statement. I thought i had to make the tabs for Facebook, Twitter and Blogger less dominant on the page i slightly lowered the scale of the icons and placed then at the bottom centre of the contact information. This page in my opinion works well in transition to the about page as the grey box is consistent within both.

About Page Developent

Here I pretty much centralized everything but in a more space efficient way. Have the image and the text this way make the page look spacious and the information and image do not conflict with one and other. I decided to ad a grey shape under the text where it has "Want to know some more about me"as I believe it gives the page some contrast and I could also have the same box running throughout the pages with a header of some sort that gives the viewer an idea as to what the page is going to be about at first sight.

Here I simply tried left aligning the information on the page just to see if it had a different effect, I also considered that I didn't have to keep the pages consistent in that way. I would keep the colour scheme the same and also the same font and point sizes but in terms of where the various parts of information would go on the page i feel this did not need to be the same.

I wanted to make my about information look more typographic and interesting, so what i did was make words that were interesting in bold, I also felt that these words described me well. I decided to centralize the image I used and the text to go with it to keep the consistency within the home page and this page, although the page runs consistent I think the page looks clustered so I need to further develop it and experiment a little more.

 

 This is the beginning process of my about page, after looking at some research within other people's online portfolios and the about page was very thin but quirky at the same time. The information on the about page. I think keeping pages consistent is a must so I decided that I was going to keep all the pages under the Helvetica typeface.

Slogan Ideas

In development to my previous slogan. I think this slogan works much better as it sounds less arrogant but is also quirky as the same time. "CreativeSince92" implies that I was creative since birth as i was born in 92".

I found that within many online portfolio sites they had a little quote that said something about the person as an individual, I wanted to come up with something similar to this so i came up with "Imsomethingtoshoutabout" Although this statement may sound slightly arrogant I thought it would make me stand out as an individual as I personally believe within Graphic Design there is a lot of competition.

Home page development

As I thought my home page looked quite simple I decided to add a smile face just to give the page some depth and some individuality. Most websites go for the standard typical layout but I felt as this is my own I could go as quirky with it as I liked. I also added 2 extra tabs for my Twitter and Facebook page so that the user could instantly find out more about me if they wanted to, Twitter ad Facebook have information that is more personal to me and I think by having this information on there makes it more unique.

In development to my previous piece I took away any form of image and started to follow the ways of the pearl fisher page. The pearl fisher page was very minimalist and only used a white background with their type but because everything was so neat and concise its made the page look very sleek and professional. I decided that I was going to change the main header from my name to A quirky header I came up with "CreativeSince92" the reason I did this is so that I could use my name on different pages but at a much smaller scale. Again the navigation of the page is very simple as the text is clearly visible as its black over a white background, this style of navigation would stay consistent within the following pages.

Further developing my home page, I decided to scrap the photography image used and use an image of myself. Using my research I found that many graphic designers that had an online portfolio used an image of themselves so I thought I would try out the idea. Keeping my name as the main header seems relevant as the page is all about my portfolio, I also decided to add a grey box over my name (Header) to give the page a little more life as there is no real colour used and also makes the header stand out more. In terms of navigation a user would find this easy as the typeface I used is relevant and of an appropriate size.

Here I tried making the main image smaller so it took up less of the page, I found that pages with more surrounding space look much more professional and sleek visually. Out of the two previous designs I think this one is most successful but at the same time I feel I need to further develop my ides and perhaps not use my photography image as the user may be mistaken that this is for a graphic design portfolio.

In development to my first idea, I center aligned the main header and navigation tabs, I think this works much better than having it left aligned. As the background is lighter at the top part of the page the black text works well across it. Navigation again would be very easy as the text is visible even over the image.

This was my first initial idea for my webpage, I decided that I wanted to keep my page very simple, Pearlfisher is a prime example of this, As this is my starting piece I thought that it was relevant to have my name as the main header and have the navigation tabs underneath it. Although the page is very simple I think its lacking any graphic impact so using the same information and image on the page im going to play around with the layout and see if I can improve on this piece. In terms of page navigation, users would easily be able to navigate through pages as the text is of a suitable point size but also visible over the image.

Web Design Process

Sv Builder

I used Sv Builder to create my web portfolio, this is the main menu that appears when you first click the application. First thing is to gather all the files which will appear on your web portfolio, Then clicking "Browse" you will be able to select all the files you wish to import. At the bottom of the page you can also change the size of your image if you want to "crop to fit" and also change the size in which the file will save as.

Once you have chosen all the files you wish to appear in your portfolio you can then customise how it will look in the browser. Here you can choose the size of the images and also the colour. Thumbnail size images appear on the left side of the page you can also change the columns and rows depending how many pieces of work you have, a preview is shown on the right side of the image above.

Once your happy with how your Sv Builder portfolio looks you then want to publish and save your file. When saving your file I found it much easier to save it into the folder which you want to put the portfolio on. ( I had a folder saved as "Portfolio page" I found that saving the file in here made it easier when the file was put into Dreamweaver so it could them be inserted on the selected page.

Process in web design

If you have made changes to your web page its important that you check what your page is going to look like. This menu above is in file and at the bottom it says "preview in browser' when this is clicked your html document will open in a browser of your choice to show you what it would look like, I found this very useful when making changes to my site so I could ensure that it worked.

This is very important as when creating you webpage you must create a root folder where all your main html documents are, this is so when your working on your webpage nothing goes missing and all your files can be found.

This part of the tab is found at the bottom of dreamweaver when you have a html and screen document open, here is where your spliced image will be linked to its chosen file. In some cases you can write into where it says link if you wanted to link the spliced part of the image to a webpage for example ( www.twitter.com ).

Once all the html files were found, I then could place my Sv Builder portfolio into the space which I had previously spliced. Going to insert and then clicking the name of my portfolio would place the file into the space as a flash image. Although the portfolio image isn't shown in Dreamweaver it was working. (An F for flash was in the box which meant the file placed correctly)

Here is where I imported my Sv Builder portfolio on to the selected page, firstly I had to open up the correct files so I could easily see where all my pages in html form were.

This is how my portfolio came out when I had placed all my images into sv builder, thumbnail size images of my work on the left and the enlarged image of the thumbnail on the right.

This is my home page ready and spliced, saved for web&devices in a html document.

This is my contact page ready and spliced, saved for web&devices in a html document.

This is my about page ready and spliced, saved for web&devices in a html document.

During my development I decided to put a ":-)" face in the center of the page, as this was an object i had to go to transform and rotate the object into the right position, this is shown above.

This is the tools i used in Illustrator to create my "CreativeSince92" slogan. Here I can choose the font I want and also the style in which its in. I can also select different parts of the word that I wish to increase the point size off, I can also change the leading, kerning etc of the word.

This is where the weight tool can be found, this increases the thickness of a line drawn by either the pen tool of the line tool. 

Taking an image into Photoshop, using the splice tool allows me to separate each given area so it makes it into an object which can later be edited.

Once the image chosen has been spliced, I saved the image for web and devices which then comes up with this screen, here you can choose the quality of the image which also effects to load time and speeds of the image when the web page is life, there is also an option to save the image as a gif, jpeg etc.

When you are happy with your file and are ready to save to get the html documents and images this screen will appear, simply give the file its name and then choose the save location of the file, its best to save this into a document which has already been created, this makes things easier and keeps everything in one place.

Once you have the file saved you can then open each individual file, here is the HTML coding for the page which is viewed on the left. Changes can be made through html coding but is much more complicated.

To change an image which is on the current file there is a few things which need to be taken into consideration. When the image has been clicked the properties tab at the bottom will come up with the width and height of the file in pixels, this is very important as this is the exact size of the image that  you have chosen. Having the selected area chosen insert a file which you have created it will then place over the image which you had selected.

When you save the image over the previous image the image tag tab will appear here you can choose alternate text which means text will appear in a small tab when the selected tab is highlighted over.

This is what the file should now look like with your chosen image which replaced the previous, its important the you remember the hight and width of the file as a single pixel out can made the page uneven just as I have done above.

Web Design Research

Web Design Research

What I like about web pages is the pure simplicity within the page, when web pages have loads of breathing space it makes the page look clean and professional. The web page above has everything a portfolio page should have using the most minimalist style possible, this is something I would like to achieve with my own web page. The main feature on this page is the icon within the white box, its most likely to be a logo of some sort but acts as the pages main feature, most current port folio web pages have an illustration, logo or an introduction to give the viewer a feel for the person and their work.

Another very simple webpage but what I like about this one is how one image have covered the whole background of the page this then allows the white colour in text to sit nicely on top of the page, in my personal opinion it looks very clean and professional. The one image may have some relation to the designer and what his/hers work is about.

A designers web page should be personal to the designer and give the slight feel of the personality of the designer, in some cases like the page above the designers have used images of themselves. The page above have also used headings like "Get your drinks up" this gives the viewer a feel as to what the designer is like and what they are about without even having to have met the person. Even with the humour within the page it still looks professional but also quirky. 

Some web pages have introductions which is a small paragraph with some small information about the designer and what sort of designing they specify in, in some cases this can be the main feature and design of the page exactly like the page above shows. Ive noticed that many portfolio web pages are quirky I believe this is to show that the the person is more than just a plain bland designer but also a creative and fun individual. The way in which the designer designs the page (style) can tell you a lot about the individual as it may relate to the style of work they do, or may simply be about their life interests.

I found that most portfolio pages had the tabs such as "home" "about me" "portfolio" etc were found at the top center of the page which allowed space for an illustration and or introduction and gave easy navigation across the page. In the web layout above they designer has gone for a different approach where the navigation tabs are found at the right side of the page, this shows me that I can have the layout of my page different and not as standard.

This page above does not look much like a portfolio site as there is quite a lot of information on the page and not much design, the only feature on this page that gives it the idea that its for a portfolio is the introduction at the top center of the page. This goes to show that a web page has not always got to be design and illustration filled but simple type graphics can be just as effective.

I very much like the idea of using an image of myself for the main feature on the introduction page, simply because a simple expression or action gives the viewer an idea as to what you are about and also makes the viewer see you more as a plain designer which has a boring personality. I think this gives the designer an overall better design because they are designing for their own specifications and not designing around a target audience of any kind.

What I like about this web design is how it jumps out to the viewer with the "Ahoi human" again this gives a quirky and fun entry to the page but also reaches out to the viewer as an individual and also gives relation to the design which is on the page.

Conclusion

In conclusion to my web research ive found that many websites for portfolio use are uniquely designed for the preferences of the individual. There isnt no target audience as such but you design it pretty much how you want and your personality should show through design. Many of the sites used pictures of themselves which followed with some information about the person and what types of design they did. This made me realise what sorts of design I could do and there is no limits.

http://speckyboy.com/2009/07/07/50-creative-and-inspirational-personal-portfolio-websites/

Carter Wong

This the website for Carter Wong, Carter Wong is a design company which have created some of the most recognisable brand identities and publish their work on this site. The Carter Wong site can be aimed at various people, anything from a fellow designer that take an interest in good design but companies might also view this page as they may want to contact them for some design help.

In terms of function I found that the page was quite easily navigational the main links such as  Home, News, About, Project and contact were found on the top left of the page and when they were clicked a smaller tab come down with subheadings within each subject, I found this easy to use and efficient. One thing I didn't like about the navigation within the page was the clicking of the left arrow to navigate across the screen, at first I was not aware that this was said at the bottom of the page.

The user group in my opinion would find this site to be quite to the point as the navigation is very easy and the work within the company are easily viewable. Depending on what the user needs from the website the contact tab makes it very easy for the user to contact the company. Another thing I found within the design on the page is that there is quite a lot of space that could have been used and there is also a left and right arrow scroller used for navigation which is simpler than a up and down mouse scroller as you only have to click 2 keys on the keyboard to navigate the page.

I think the use of type within this website has been used very well, the tone and voice of the type is very subtle when used in headings and subheadings but when type was used to speak about the company itself a more quirky personality type typeface was used, I think this works really well as it does not effect the overall view of the page but at the same time is very simple and to the point and does exactly what it needs. Colours are used in contrast to the work that is being shown, if an image shown has a more dominant colour that same colour will be used along side the image, I think this gives the page some depth and makes it all that bit more quirky.

Pentagram

The Pentagram site is a design company which show the works that they have done and showcase that work on this site. People that may view this site could be your everyday designer looking for some inspiration in his/her work. Other people that may view this page could be companies looking for a design company to design their products, website etc.

In terms of page function the Pentagram site is very too the point as their home page does not even have an introduction but has thumbnail size images of the work they have done for the company. Something I like within viewing the companies work is the choice of viewing the work in new and old, alphabetically and chronologically this gives the viewer the choice of how to view the companies work which enhances the accessibility. When a company has been chosen another page comes up with the work and design within that given company.

I believe the user group would find this page very useful and easy to use as the site is very to the point with work covering the whole page. This allows the users to see exactly what the company does and what they are about also when a company is selected another screen appears with some more pictures on their works and some brief information, this is exactly what the user group would want to see. Another thing I liked within the design on the page was the central scroll tab, this allowed to see more work and navigate the page with ease.

Within the website there isn't much type used as a whole but is used effectively to give the user the feel that the page is very easy to use and highly functional. The only pieces of type that had colour in them was the Pentagram logo itself and the about, partners,offices and new this gave these tabs more importance of the surrounding text.

Pearlfisher

This is the website for the design company Pearlfisher, this website showcases as a portfolio with the work they have designed for various companies. Again the Pearlfisher site is aimed at general people who like design but also to companies, companies that need a design team to create something for them, the way the style that the page is designed is so that potential clients can view the page very easily and make a choice.

In terms of page function I really liked Pearlfishers page, everything was very easy to use and I had no difficulties in navigating the page and the layout made the page look very professional and clean cut. This would give the feel to the viewer that Pearlfisher is a very precise design company and also very professional. I also think the way in which the work has been presented adds to the overall design of the page.

The user group would find this site very easy to use and straight to the point, the work that pearlfisher have done is on the left side and has the name of the work and company that will be viewed. The only thing I think the users would have trouble with is the small arrows which when clicked scroll to the next piece of work, personally I would have the arrow keys more visible and slightly bigger. I think the type on this page has been used appropriately as its very light and easy on the eye. Having type at a small point size insists that its expensive clean and professional, the colour of the type also sits very nicely on the white background.

NB Studio

This is the NB studio homepage, NB studio is a design company which have designed for some very big named companies such as Waitrose, John Lewis and Mothercare, This site showcases their work in hopes of getting more clients. This site is aimed at designers in general but also companies seeking help within the creation and design side of their business.

Page function within the NB Studio site is fairly easy to use, the navigation tabs are on the left side of the page. When clicked thumbnail size images come up with the clients, when the companies come up it comes up with the work NB Studios have designed within that company. The thing I didn't like about this was that you had to scroll down to view their work which was quite annoying, I dont think this was easy to use and just made things more awkward as you had to scroll down quite a lot to view all the pieces of work.

I think the user group would find this site relatively easy to use, as everything is named and when clicked brings up an easy navigation menu, my only concern is that the users would not like the idea of the scroll down bar as there is quite a lot of work to be viewed within certain clients, the work should have been presented as a slidshow or something similar.

The typeface used is very light and subtle and not over the top, it works well with the overall page and also insists that the company are professional. The type size is also used appropriately depending on what the type is used for. There isnt much colour used on the page other than the white and grey, the only other colours used are those of that in company logos which NB studio has designed for, perhaps implying that they always put the company first?  

Johnson Banks

This is the site of the design company Johnson Banks, this site is used to showcase the work the company have done in hopes of getting more clients for the company. This site is aimed at the average designer which is seeking inspiration but also aimed at companies who may need various aspects in their company changed or designed. The way the site is also presented gives the feel of a company that are very creative and think outside the box, the design of the site is very different to those in the other sites I have analised.

The page function within the Johnson Banks site might come across more complicated than the other sites, simply because its more designed filled, at the same time once you gather how to navigate the page it will become easy. Parts of text on the home page are highlighted in various colours e.g Identity&Brand, Logo's etc . When these are clicked it takes you to another page with the work within that description. The only thing I didnt like was that I had to scrolls down to view the work on the page which in my opinion isnt as professional as having the work as a slidshow or in a transition.

As the user group are going to be mostly designers, I think they would find it quite easy yo navigate through the pages and appreciate that it is in a more design filled manner. This site is different from most in terms of layout as they havent gone for the typical style of minimal. The typeface is very light and easy on the eye, it makes the page feel settled and not too over the top as their is a design element to the page also. I really like the simple colours the page has used they work really well together and give the page a more fun filled element and not boring.

Jake Tilson

This is the site for the designer Jake Tilson, this site has all of Jake Tilsons work as an online portfolio but also sells works that he has designed. This site would be aimed at the general designer but those that also those who are interested in his work. Something I really dont like about the Jake Tilson page is how its laid out, everything seems really clustered and cramped, this makes the page look really cheap and as if not much effort has been put into it.

In terms of navigation, I think this site is the hardest to navigate as I wasnt sure what I was clicking, weather it was work from a company or something on view. And when I hovered the cursor over the image the image vanished and it didnt seem as if I could click it, but when it was clicked another menu come up viewing the work but again I really disliked the way it was laid out.

I think even the user group would find this difficult to use as everything is over the place and there isnt any order to things, you kind of have to guess what you have to do. Although the style of the page is completly different I really dont like the way its laid out, the page looks clustered and the colours which are used on the page do not go together. In terms of type used on the site its abit all over the place and there is no consistency used with the flow of pages, type seems to be all over the page left right and center.