These are the final colour versions of my layout for my web design portiofolio. The only thing that is missing from this layout is the navigation tabs which will be added vertically down the left hand side of the layout.
This is because, from what I've learn studying HCI, the users look at the left side of a webpage first which is also why the name of my site is in the top left hand corner.
I really like my layouts, they are fun and colourful but simple at the same time. The header contains a circuitry board design in which some of the tracks have been made to glow using Adobe Photoshop CS4. Brushes were also used to add cherry blossom flowers to the image to make it more girly. Brushes were also used at the bottom of the header image to make it appear 'torn'.
The font used for the logo in the corner is called 'Fake Reciept' which I found using google while looking for 'futuristic fonts'. I liked that it was all in capitals, I think it contrasts nicely with the website.
Colourwise I prefer the pink and the purple layouts as I think these are neither too bright or too dark. I like the turquoise but I think the detailing is difficult to see because there isn't as much contrast. I don't like the lime green at all and will not be using this version of the layout.
Overall I really like my design, I think it say's something about the image I'm trying to creative, fun, girly, technical, creative and stylish. I don't think my layout is overcrowded and I think the grey with the other colours works well.
I usually make a lot of my websites dark even though I know a white page is best. I do this because I think bright colours stand out on a dark backgorund better. However, I've managed to make my site colourful and it will be easy to read at the same time.
This my layout how it would appear on the web. As you can see, I designed a logo for my site after all which is the image on the right. It says 'DD (dot)net' which stands for dolltronic-designs.net which will be the URL of my site when I register the domain name. It features the same font that is on the banner and the cherry blossom brushes I used.
Designmess.com is an online community of designers for the web. They hate Internet Explorer so much that they decided to re-sub and make a parody video from a scene of the movie 'Downfall'. They named this parody 'Hilter hates Internet Explorer too'.
The video is hilarious and is another example of Mozilla's large fanbase as advertising for Firefox has been added into the video.
Design Mess posted an article named 'Internet Explorer will be the downfall of man' along with this video. It is rather funny and they have created a few graphics and videos to support their statement. This article can be found at: http://designmess.com/article/internet-explorer-will-be-downfall-man
Over the last few days I have changed my mind about how I would like my website to look.
I have decided that I will no longer be using the logo I designed and instead I will have a graphical header image displaying the words "Dolltronic Designs". Using my research I will keep the theme the same, girly and technical. I have decided that the header image will incorporate a circuit board and brushes will be used to add cherry blossom flowers to it.
I have also decided that all pages will have the same colour scheme which is hot pink, white and grey for the home page then violet, turquoise and lime green for the others. I have chosen these colours because they are my favourite and represent me as a person and also for the symbolism of the colours.
The reason behind this change is because I want to keep the website simple and clean while still being creative and professional and I came to the conclusion that the logo I designed wouldn't work well with this theme. I feel I can still keep this website professional and creative (if not more so) using the new design.
The website is a web design portfolio to showcase my work under the name 'Dolltronic Designs'. The website is to contain:
Introduction to the website
Details and examples of past projects
About myself, my experience, skills and education
Different ways of contacting me
Who is the website aimed at?
The website is mainly aimed at businesses who are thinking of having a website to promote. However a small number of clients may request a personal site. I chose my colourful design to attract creative businesses rather than corporate because I enjoy making colourful and interesting sites.
Points to consider
Text needs to be clear, to the point and a reasonable size
Website needs a clean, simple but not boring layout. The website needs to easy to navigate but not boring to the eye.
Website needs to showcase my work in the best light
Software tools
Notepad for writing HTML and CSS
Corel Paint Shop Pro 9 and Adobe Photoshop CS4 for image editing
Internet Explorer and Mozilla Firefox browsers to test layout
Testing website in various browsers ensures that all types of potential clientèle can see the website properly. It is also a good idea to test the layout in various screen resolutions. I will be doing a liquid layout to combat resolution problems.
Navigation
Will be tabs to the left and vertical. Appropriate colours on hover. They will have a raised appearance on mouseover.
Colour scheme
The layout won't be too graphics intensive to increase performance. Each page will have a header image that changes colour on each page. The home page will be hot pink, the web design page will be violet, the about me page will be turquoise and the contact page will be lime green.
The header image will consist of the logo I designed as shown in a previous blog entry and a background of cherry blossom flowers with a circuitry design.
This is a page I scanned from my Visual Diary from Semester 1 in Visual Literacy and Imaging. This was created to represent my course and also the Internet.
I cut out a picture of a globe, with a zip and inside there are digital numbers. The picture was on a leaflet and I thought it represented the World Wide Web well. I painted the page black and navy blue with acrylic paint to give it a 'space' feel then glued in the globe. I added glitter to the background to symbolise stars and I put in some alien stickers to fit in with the space theme.
I think this image I created holds a lot of symbolism. Digital = technology, globe = World Wide Web, space = Cyberspace.
Hello Dolly Latex is a clothing company made by a friend. She has a website but she wants a more professional one. I will be redesigning her website this summer.
The image to the right is a screenprint of the current layout. My client likes the colour pink and this will remain the same in the redesign. As you can see the background is rather 'busy' and is distracting to the user. The font used for the logo and navigation is far too bright and the font face is also unprofessional.
The font for the content is a garish shade of magenta against a white background which strains the user's eyes. It would look better if it were darker. The client designed a anime-type girl to use as a logo, the previous web designer has resized this but the image has lost its quality.
I will keep the colour scheme pink when redesigning the site as that is what the client wants. I will chose a background that isn't so garish and there will be grey to contrast the pink. I would also like to improve the navigation and use a classier font both for the headings and a sans-serif font for the content.
There are many types of multimedia in web design. Music, video, animation, graphics even text. There are a number of web technologies available but the main ones are Flash, Shockwave, Real Media and Java.
Flash: One of the most widely used and effective multimedia tools on the market is Flash which, because it comes pre-installed on most browsers, has a very large user base and therefore accounts for a huge chunk of the market. A majority of web surfers already have the Flash plug-in installed on their browser so no download is necessary, providing another reason why this program is so popular. It is different to other multimedia design programs in that a whole website can be created using Flash instead of HTML, and the fact that is able to compress animations into extremely small files that look very impressive mean the end results and overall effects can be quite outstanding. The downside to developing an entire website using Flash technology is that it prevents effective optimisation, so for anyone hoping for high rankings in the search engines, the use of Flash in website development should be selective. [1]
Shockwave: This was the first multimedia website design program on the market and was brought out by Macromedia who then went on to develop Flash. It is a technology adapted from the most popular program used in traditional multimedia - Macromedia Director. Initially only really used by advertising agencies to create multimedia presentations and promotional CD's, Macromedia took the Shockwave program and adapted it for the web so they could harness a much wider and more diverse user base. While Shockwave is an excellent tool, it does not, however, have the same kind of usability or impressive capabilies of Flash, simply because Shockwave is merely the modification of an existing program created for an entirely different purpose - resulting in larger file sizes and a more complex development environment - and not designed specifically for a wide range of uses on the web.[1]
Real Media: This encompasses Real Video and Real Audio and allows videos, music and sound to be played on the web. What makes Real Media superior to many other similar products is its streaming technology, meaning that when a certain file is selected it will begin playing almost immediately, before the full file has downloaded. This makes Real Media a popular and useful tool for showing video presentations and is often more effective than Shockwave. [1]
Java: This is the exception to the usual rules of multimedia and unique in that it is the only website design technology that doesn't require a plug-in. It is a full cross platform programming language and as most browsers support the Java language, it can be viewed by anyone. Shockwave files also have the option of allowing you to save them in Java format, thereby avoiding the need for the Shockwave plug-in. The downside of Java is that it is slow to load. [1]
Multimedia makes a website interactive as well as interesting. If you really want your website to stand out from the rest, use multimedia. However, "Depending on the message you want to convey using a Multimedia web Design depends on the web site design you need. The very last thing you want is to distract your viewer from the key message on your web page through Multimedia web Design. Multimedia Design flying in from everywhere on your web site is most definitely a distraction." [2]
Multimedia should be used with caution, as with animation. Multimedia can distract and annoy the user. Multimedia can also badly affect loading times. Plugins need to be downloaded, especially with Flash sites. Always offer a HTML version of a Flash website as they take a long time to load and this will almost definitely put off the average user.
Multimedia should always be used as a tool to communicate. It should be used sparingly to improve a website and should not be used just for the 'sake of it.' Multimedia done well can impress a user, yes content is the most important factor but humans are visual creatures, we appreciate beauty and if a web designer does it right, you can have wonderful content with a wonderful layout which is far more attractive than a website that contains only one of those factors.
