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