Digital ME project self-evaluation.

Here is the link to my website:

http://www.samanthafreeman.site90.net

                In this project named “Digital ME”, our task was to produce a portfolio website containing at least 5 pages using both HTML and CSS. This portfolio had to show off our work and skills to the best of our ability, as well as to give us the chance of an online presence – a very important factor in finding a career in multimedia.

                Firstly, I made a mood board to explore my general interests, colour and typography I could use within my site later on. I also looked at other people’s websites as inspiration before starting my designs. Another important step towards the beginning of the project was coming up with wireframes for my 5 pages within my website. This is where I came up with my final pages: “Home”, “About Me”, “Gallery”, “Video”, and “Contact” pages. These wireframes also made me realise I wanted to produce a 2 box layout in HTML and CSS – this is where floating was needed to get a right-aligned navigation bar, which I learned independently to get my desired layout.

                After all the layout was pretty much sorted as I had planned it, I started to produce some drawings and illustrations to possibly use within my website layout. For instance, I produced my header and navigation by doing drawings with black pen, then scanning and manipulating them on Photoshop to the correct dimensions and optimised appropriately. I also did this with a scan of squared paper to be used as my main background. I feel the process of optimisation was very important when uploading images onto my pages as it helped greatly with image loading times, which I noticed are pretty reasonable now my website is online.

Optimisation is also something I did when using video within my website. For instance, to experiment with loading times, I converted my latest moving image H.264 file into an MPEG which I uploaded onto Vimeo and embedded within my “Video” page. I feel this piece of video is not as good quality, but still does its intended job of loading quicker than the original very large file.

I came across a small amount of problems whilst working in Dreamweaver, such as previews changing between the software and in a browser window. This meant I had to try to discover what the problem was by myself until I got it right. I found this quite frustrating at times but I think I worked most of my main issues out before my website needed finishing.

Overall, I think the final outcome of my website is quite effective and I think my use of floating in my layout is more successful than it would have been with just a 1 box layout with navigation above the content. I also liked my colour scheme throughout my website, which is mainly why I decided against using different colours on each page like I had originally planned. I also think my mix of images, typography and embedded objects is balanced well throughout the pages and have kept it simple enough for the audience to cope with.

If I did this project again, I think I would spend more time on producing high quality imagery and illustration for the design of my website to enhance the aesthetic experience for the audience. If I did this in the future now my site is online, I feel my portfolio could be more effective at its purpose of attracting possible employers to my work.

Oooh free web hosting, haha.

Have a gander. I think it is finished. I don't care if the domain/URL thing is a bit long winded, at least it works! haha. :D


http://www.samanthafreeman.site90.net


Woo.

Social Networking.

This week in our final interactive media seminar with Shaun we focused on the importance of social networking. We have also looked at how to feature them on the contact page of our website. For instance, we can include simple icons or links to each, or rss feeds or widgets to show updates automatically on my website.


I have also made a Facebook artist page for myself and made a link for this on my Twitter.


Here it is: http://www.facebook.com/pages/Samantha-Freeman/136070829794395

I should also now have a Twitter box somewhere down the right hand side here on my blog!

Here is how my contact page looks.

Latest on my website... :)

This is my about page. This is nearly complet,e minus the title, which I need to use my laptop for to get the "Impact Label" typeface.

I have added a background of a simple scan of squared paper. I edited it slightly on photoshop then added it as a fixed and centered background. It seems to fill the whole screen on the uni monitors so it should be okay I think!

I am pretty happy with the colour schemes and think the background and content goes together really well. I originally had the idea of changing colour schemes between pages, but I am now thinking this might be too much for the audience and simple might be better.

I am now just adding content and tweaking little things to make it better before my deadline in about 2 weeks times. Will kee[pyou posted ;D

Update on DP2 stuff...

This is the latest screenshot of how my site is looking so far. I spent quite a bit of time on Thursday due to a silly 4 hour gap between sessions just doodling stuff like trees, birds and leaves for the imagery on my site. I took influence from sites I previously posted such as Kate Nash's site using simple scribbly drawings of birds and other natural things. I have also done some illustration/animation similar to this in the past so thought it could fit in well with my style of work.

I have also used the "Impact Label" font I found within my header and nav bar using photoshop and this is a more reliable way of using downloaded fonts within my design. I have been messing about on photoshop with this font making it white when hovered over. This is taking time but it will hopefully be worth it!

More updates when needed...

Optimisation... (:

Image Compression

I can understand this part of the website design quite well as I come from a graphic design background. For instance, I am familiar with references to 150dpi and 300dpi being used in printed graphics. However, in web design, lower resolutions are required. This is mainly due to increased loading times with larger, less compressed image files. The typical resolution required for web is anywhere between 72dpi and 200dpi (although these are the extremes!)

I have experimented with an image I found on Google by searching "300 dpi image". I originally saved it as a jpeg, then resized it to 500 pixels in width and 150dpi, then resaved as jpeg, gif, png, bmp and tiff files. I did this to observe which file types and sizes are most effective for the web. These are my examples.

Original 300dpi image (jpeg)

150dpi compressed jpeg

150dpi compressed gif

150dpi compressed png

From observing these, it is hard to tell the difference at first, however, jpeg images tend to have more colours and detail in them, and are therefore most commonly used in web. gif files are less used now due to their limited colours and detail. png are often used for logos and detailed images, but have the disadvantage of larger file sizes. (TIFF files are not compatible on Blogger, therefore this has helped my decide against using this straight away!)


Video Compression

We have also looked into compression of film and video files for web. This is very important as large film files such as h.264 take a long time to upload onto a host such as Vimeo or Youtube. For example, my last film project's outcome was a file of over 600mb and I had to join Vimeo plus to upload it for my deadline! It also took a very long time to upload to the my account. However, I feel, once it is uploaded, this from of video embedding is the most simple and successful in terms of my portfolio. If I used flash videos it may not run as fast or be lower quality. To increase the loading speed of my film when embedded on my site, I could compress the original film file using Adobe Media Encoder to something such as an avi or mpg file and then reupload to my Vimeo before embedding this file onto my site.

H.264 file (600+mb)

"Ticket" Group Edit from Samantha Freeman on Vimeo.

MPG file (93mb)


"Ticket" compressed film from Samantha Freeman on Vimeo.

At the moment...

I am in my third dreamweaver seminar with Giselle, mainly experimenting with HTML and CSS to make my layout right before I start producing material to upload into my code to make my final design. For example, I have just had a go at using the "float" element of CSS to make my navigation bar float on the the right side of my content div area, rather than being a separate section between my header and content divs. This hopefully fits in well with my previously posted wireframe examples. I think this will be effective when I produce my navigation bar (drawn?) and other content. I hope it will look a lot less "boxy" in this form!

This is not my final design, this is a simple layout + font experiment

I have also created folders and html pages for my other 4+ pages in my portfolio website. I have chosen "About", "Contact", "Gallery", and "Video" pages, in addition to my homepage. I just opened the index.html file and saved as these different file names in their appropriate folders. I will change the content as appropriate for each page. I may also have to create differentr style sheets for each page if I wish to go ahead with my idea to use a different colour scheme/background on each page/section of the site.

My next task is to start producing this material for my site. For example, I will start to sketch designs for my header - using ideas from my initial moodboard. I will also start to do the same for navigation buttons/bar and background images. Once I have done this, I feel the construction of my site using HTML and CSS will not be too time consuming, as I feel I have gained quite a good knowledge in the area so far.

Portfolio Wireframes.

In our design seminar for the Digital ME project this week we learned about wireframes and produced some for our ideas for our website pages. I did 5 possible page layouts using Photoshop to produce my pretty basic wireframes. Here they are so far...

 

 I would keep a similar layout between the pages to improve continuety within my website, but would possibly change the background image between each page to give it more of a creative interest, rather than making the audience too bored by seeing the same image over and over again. I could also carry this on by changing the colours of the images or backgrounds slightly too.

 (I would have uploaded these earlier but my laptop seems to be slowly dying from malware or something. typical hm? D: i shall sort it)

Examples of websites I like...

In preparation for designing my own portfolio website, I have looked at websites of music artists I am interested in and commented on their style and layout.

Florence + the machine:

 I really like the variety of manipulated photography, images, videos and blog in this design. I also really like the darkness of it and how the photograph of the "lungs" makes it seem more 3D. I also chose to look at this website because of the use of pieces of paper in her layout. This is something I would like to do to make my website less typical.


 Kate Nash:

This website is much more wacky and unorganised in style, but uses a lot of hand drawn imagery and text (as well as html typography too) which is another quirky feature I would like to experiment with in my designs. However, I feel the layout is too random and confusing in this example and would prefer all the text to be aligned to the left.

Andy Love's blog:

 

In my seminar, Shaun recommended I looked at one of our 3d animaiton lecturers' blogs on the refelective journal website as research on websites associated with my preferred pathway (VE). I like how he has used simple scribbles as a main background rather than a possibly distracting photograph or boring colour background. This is something I would like to try in my own designs. I also like how it mainly uses only black and white, to fit in with this sketches and work shown throughout the webpage.

Interactice Media Project - Digital Me.

This week we have started our new project for DP2 - Digital Me. For this we will produce our own website portfolio using HTML and CSS on Adobe Dreamweaver (CS5).

One of my first tasks was to produce a quick moodboard of my interests and things that represent me well. This includes both images and typography - important factors of web design!

Here is my moodboard so far. It looks a little blank, but hey, I think it is about done. :)

I've featured obvious things like my name, interests using different fonts and imagery I like. I have also included main themes such as games, music and fashion that I like outside of my university life. Little Big Planet 2 is something I very much like at the moment so this has a reasonably large section in the corner of my moodboard. Same for my first car in the opposite corner :D

We have also learned some basic HTML and CSS styling on Dreamweaver with Giselle. I found this pretty darn easy to be honest, I guess it is going to get a bit more stressful when we start to produce our designs. I will try and practice as much as possible to ensure I can do as much as I want to when the deadline gets closer, although I am trying to practice animation in preparation for that project too as that is my main interest! (Struggling :( boohoo.)

I am finding this project pretty interesting so far, probably due to me coming from a graphic design background and I have done a project very similar to this before, but I only did mock ups and did not actually produce the a functioning site, so this should be fun! :)

Interactive - David Shrigley Portfolio

http://www.davidshrigley.com/index.html

This website uses a lot of handwritten navigation and titles throughout, which fits in with his style of drawing, animation, etc. This could also be a disadvantage in some sense as it could be difficult to read or become quite unclear where to click, etc.

I like the simplicity of just using black and white on the main pages of the site which is well contrasted and usually clear for the audience to navigate and read through. The way it is just the image/illustration and text to describe it all above a link back or to the home page is also simple and effective. This use of links at the bottom of the page could be a method of making the user look at the whole page, therefore can be quite frustrating.