Interactive - Evaluation

Over several weeks, I have designed and produced a non-linear website which focuses on past and recent work. I have created a site which consists of a simple, eye-catching layout in addition to features such as text, hyperlinks, video and form. Together these produce an appealing site.

At the start of the assignment, I analysed several existing portfolio websites and noted their advantages and disadvantages. Each site had a quick loading time and displayed the navigation in a clear manner across the top of the page. I have taken into account these advantages and used them to my product’s benefit.

In order for a site to be successful the navigation must be displayed in a clear manner, allowing the site to be interactive and memorable for the user. I have produced a website that meets this requirement and in order to achieve this, I chose to create navigation that was not complicated to follow and I also chose to display it at the top of each page, enabling it to be instantly seen by the user. 

Throughout the website, the navigation contains the same colour scheme and fonts, providing the site with a consistent layout. I have chosen to create the navigation with an orange and white colour scheme, which together produce an attractive banner. I have chosen to display the links in an orange Times New Roman font because it is a classic font which is clear to read. I have chosen to display the text in an orange font because a lighter font is more visible on a darker background and vice versa. I believe this font is only suitable for a small area of text and not a large paragraph because if a large amount of text was written in this font, then it would be difficult to read.

In addition to the navigation at the top, I have also provided the same navigation at the bottom of each page, but in a smaller font. This then allows the user to navigate to another page without scrolling to the top.

Where there is writing on the site, I have ensured the language used is simple, yet interesting to read. This is because it is aimed at a large audience, and if the user is of a younger age, then it should be simple. On the About Page, I have ensured the text is clear to read by displaying the text in a white, Arial font.

I have ensured each page contains a similar layout. Although this is an advantage of the product, due to consistency, it is also a disadvantage because each page contains an image in the same place with the same border.

Evaluation to be continued...

Interactive - and it's FINISHED...

Today I completed my online portfolio. I created an image gallery, displaying my work, using Adobe Bridge. I also added an extra page...a video page. See below

Interactive - Portfolio is ALMOST complete!

As you know, over the past five weeks I have been working on my portfolio website. I am pleased to say it’s almost finished! I only have the gallery left to complete. Below are screenshots of completed pages. I'm pleased they actually turned out how I planned.

Typography for Web Design

It is essential  to consider suitable fonts for the web before implementing the website. The following factors must be carefully thought through:

·         Font

·         Size

·         Colour

Font:

There are various parts to a font to consider, for example whether to use a serif or sans-serif font, whether to capitalise the font, whether to use a font downloaded from the internet etc…

Using different fonts is the best way to divide content on a website. However using a number of fonts can confuse the user and make the site look cluttered. Therefore I will only use a maximum of 3 fonts on my site.

Each font used must be thought about carefully. For example you may use a font on your computer which the end user does not have. Therefore they will be seeing a different design to you. I have thought about this and have decided to use the classic Times New Roman font, and also Arial. The reason for this is because both fonts are clear to read, and the majority of computers have them.

I will also use fonts downloaded from the internet as headings. Because these may not be present on the user’s computer, I will have to create an image file of text which will display on the web quite easily.

SHOULD I CAPITALISE MY FONT? Using capital letters is good to emphasise navigation or headings, but it is too hard to read for a large paragraph of text. I have chosen to capitalise my navigation to stand out from the rest of the page.

Size:

When creating a website, the end user must be considered. The text must be set to at least 12px so it’s legible for the majority of people. The size of  the monitor must also be thought about i.e. as stated by ilovetypography.com “what’s legible on your 65 inch High Definition Plasma monitor, might not be so on a 15 inch MacBook.”

Colour:

A further factor to consider is colour. To help achieve legibility of text, it must contrast enough with the background.

To conclude, I will use Times New Roman, Arial and a font downloaded from the internet (I have yet to decide which one!). I have chosen these two fonts as they are both clear to read and the majority of computers have these installed. As for the other font, which will be used as a heading, I will create an image file of text which will display on the web quite easily. Thinking about the choice of font hasn’t really affected my design process and creativity. I had already thought about these factors before planning the appearance of the pages.

Interactive - Portfolio Page (Again!)

Today we were introduced to Adobe Bridge, a program used to create image galleries the easy way! I have chosen to use this to create my portfolio page, so ignore my last post! I won't be using that design.

Interactive - Portfolio Page

Today I created another wireframe and mock-up page for my site (Portfolio Page).

Obviously the thumbnails on this page will be different. I have used the same image as a guidence on how the page will look. I have yet to create each thumbnail. The images on the page will be displayed in a black and white colour, and will return to their original colour when the user rolls over them. A larger version of the image or video will appear in a new window when the thumnail has been selected.

I have one page left to design (The About Page) and then I can crack on creating!



Interactive - Contact & About Page

So today I created a wireframe and a mock-up for the Contact & About Page:

Interactive - Home Page (Take 3!)

Today I looked at the Home Page I created a few days ago, and noticed the simplicity and lack of colour. I decided to add a border to add excitement to the page:

Interactive - Home Page (Take 2!)

In the last Interactive session, I decided to re-design the Home Page of my online portfolio. However, before doing so, I carried out research into current online portfolios. Below are three examples which I found appealing:

By looking at current examples of online portfolios, including the ones shown above, I have noticed that the majority of them use a dark coloured background. I have decided to follow this colour scheme and will also use a dark coloured background. Out of all the examples I researched, the one that has really stood out and made an impact is the third image above. The reason for this is the simplicity of the page on a whole. The usability of the site is simple, i.e. the navigation is clearly displayed. The person's name is also clearly visable, which is very important. For these reasons, I have decided to base my Home Page on this site's Home Page.

During the second half of the lesson, I began to create a wireframe, displaying the layout of the page. This can be seen below:

I then created a mock-up of the site in MS Word:

Interactive - CSS Style Sheets

Last lesson we learned the use of CSS Style Sheets (Cascading Style Sheets). They allow you to control the layout and appearance of the pages easily, i.e. they allow you to set the properties for the whole site, such as background colour, font and font size, links etc… You can assign these properties to the style sheet so they will remain the same throughout the site, or you can enter the code in the main body of each page.

I have used these briefly at college, but did not really understand them. This lesson proved to be helpful as I now have a deeper understanding on how they function.

I have started to create mock-ups of my portfolio site. Below is my Home Page (so far!), but I don't think I like it. I'll update when I've made changes!

Interactive - 'Mood Board'

Interactive - First Lesson

In this lesson we were introduced to the brief which is "to design a 5 page interactive website using Adobe Dreamweaver that acts as a digital portfolio and promotional online resource for your artwork".

We also learned basic HTML, such as making things bold etc. Already having knowledge in HTML, I found this lesson fairly simple.

Below are some tags we learned to modify text and insert images:

<h1></h1>                  Heading (largest)

<h2></h2>                  Heading

<h3></h3>                  Heading (smallest)

<b></b>                      To make text bold

<p></p>                      Paragraphs

<a></a>                      Links

<img>                         To insert an image

<br />                          Line Break

<i></i>                        To make text italics

<ul></ul>                     Unordered List (w/ bullet points)          

<ol></ol>                    Ordered List (w/ numbers)

<li></li>                       List