Saturday 26 March 2011

Digital Me: Evaluation


The second project of this term was called ‘Digital Me’; I was set the task to code and design a five page interactive website using Adobe Dreamweaver. The purpose of the website was to act as a digital portfolio and promotional online resource for my University work. I had to display proficient design principles, learn to self-promote and gain an imperative understanding of coding and building a website. Consequently, I had to show a fundamental insight and true concept of the current common attraction to utilising social networking sites as a form of advertising and displaying information.

Firstly, I drew up wireframes so I could begin to explore and interpret initial ideas for my website design. Secondly, I began to investigate and learn about Adobe Dreamweaver; this was the software that I would be using to code my website. Primarily, it took me while to learn how the software and HTML worked. This proved to be far more challenging than last terms project, 'Interactive Space'. However, with much patience and guidance from my lecturers in seminars and also extensive online research, I gradually began to grasp and to successfully apply the software. Finally, I managed to build the basic template that I had predesigned using the wireframes as a guideline.

Once I had the basic template, the actual design of the website had to be decided. This included deciding on which font, logo and colour schemes I wished to portray on my website. It was a lengthy process to compose a name for my site that I could base my logo on as this was an important decision as I felt passionately about making the website reflect my personality. I spent time mind mapping and experimenting with possible ideas until I had the concept of my final choice: ‘I-Scream Design’. I scanned this image into Photoshop, where I then traced the image and added colour in an original way. I used muted bright colour’s to reflect my personality throughout the site; cheery and loud, but with a sense of calm and tranquility. I then moved and used the logo to design the banner. To achieve this, I downloaded two fonts from dafont.com and inserted my logo; again this was all completed in Photoshop.

I believe the most successful components of my site were the colour choice that I used; they all complemented one another and provided direction through all the pages. I had to edit the gallery’s XML so the font and colour’s followed with the rest of the site; these allowed a pleasing flow for an audience as they travel between pages. I also felt the unique features I included, such as the contact form and the redirection of the page after form submission, brought a professional atmosphere and quality to the site.

On the contrary, time and skill permitting, there are many improvements that I would like to have made to the site. Majority of these improvements would require me to know JavaScript, however, I believe they would have added to the sites content and overall design. I would have liked to have added a Facebook feed and possibly change the main font I used, as I do not feel it harmonised with the rest of the site.

Having now completed the project, I can conclude to the vast knowledge I have gained throughout the designing of my website. From knowing very little about HTML and Adobe Dreamweaver, I am now confident I have a reasonable understanding of coding and am suitably capable to build a functioning and aesthetically pleasing website. On completion of the project, I have been left questioning which pathway I wish to follow next year as I enjoyed exploring new software leading up to the creation of a functioning and gratifying website.



Thursday 24 March 2011

Digital Me: Website

Here are screenshots of all the webpages I have designed,  I hope these images give you an insight to what my actual webpage looks like. I will write a 500 word evaluation which I will upload shortly.



Home


About


Portfolio


Gallery


Videos


Contact


Thank you

Digital Me: Social Network Icons

Below are the 3 Social Networking icons I wish to use for my site, however the icons below are ones I have edited for my website. However, I do not think they work, as they do not stand out on the page and they are not as recognisable as the actual social networking site's. I have decided to use icon's I have found from a website called Icon Archive, I have used hotspots to link them to my pages.


 Facebook


Twitter


Blogger

Digital Me: Banner

The next stage for the design of my website was to design a banner that can be inserted into the header of the site. This meant finding the correct font that I want to use as well as including the logo somewhere within it. I decided to create a number of banner's and then from this choose which want I will choose for the site.



The above banner is one that I do not want to use as I don't like the positioning of the logos or the colour of the font, I also feel that I that two font's could make it more aesthetically pleasing. 



This banner is better and the improvements from the above banner have been made, however I am still not happy with the positioning of the logo and I want the font to be larger as there is too much blank space.


For this banner I enlarged the font and used the logo as the dot above the 'I' this does not work as the logo is too small also the font for 'design' needs to be enlarged.


This is the final banner I wish to use as I feel that the font's work well together and enlarging the logo and only using a section work's aesthetically with the rest of the site.

Digital Me: Logo

Once I had decided on a layout, I wanted to come up with a name and a logo to design my website around. At first I drew many images of different object's until ended up with this ice cream in a glass with a straw and a cherry on top as seen below. This is a sketch of the logo that I plan to use in my website, I would like to make a few alterations but this is the basic logo I would like to use.


The next step I took was to scan the above image into photoshop where I used the variety of tools to trace over the sketch and then add colour. The colours I have used are faint but bright colours as I wished to show my bright and cheerful personality through my website. I didn't keep the colours in the lines as I wanted to have a tissue paper type effect. The image below is the final logo I want to use for my site.

Saturday 12 March 2011

Digital Me: The Wireframe For My Website

Here is my initial layout designs I produced in Adobe Illustrator, there is a possibility however, that the designs may be altered as I am coding my website because I am sure that there will be complications in my design or improvements that I would like to make.


1
2
3
4
5