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.
Yesterday, my friend James Jeremko created some pop art images of me. He took his influence from an artist named Patrick Nagal. James created the images using Photoshop CS3 from the photographs of myself that I had on Facebook.
The image of me with pink hair was chosen by me but the other image was picked by James as he liked the composition of that image. I also like James' chosen image best as I feel it reflects me using my favourite colours. The colours jump out because they are really bright. I think he did a really good job capturing the pop art style and Patrick Nagal's style.
Last week I decided I was bored of my desktop wallpaper and decided to find a new one. I wanted it to be pink to match my Vista theme but I couldn't find any that I liked. I came across a wallpaper of a disco ball and I loved how sparkly it was. The original image was grey and silver (see image on the right).
The image is from http://abstract.desktopnexus.com/wallpaper/51562/. I decided to use Adobe Photoshop CS4 to change the colour balance to pink on the midtones, shadows and highlights. I then changed the brightness and contrast to make my image stand out more. Below is my finished result:
Colour is very important in web design, and can be used to add spice to your website, relay the mood of a page, as well as to emphasize sections of a site. If you think about it, as soon as you look at a website, you can normally guess within seconds what that site is all about. Just like we all are quick to judge other people by their appearance, and surroundings by the way they smell, look, and feel, we also judge a website by its colour scheme and style of design. We can usually tell almost immediately, whether a website is corporate, personal, whether it is for kids, teens, or just for adults, etc. Most of this information is perceived solely by taking in colour and design elements. [1]
Colour relationships are how colours work together. There are different types of mixing and matching colours. I won't be mixing and matching colours for my portfolio but I will post the types of colour relationships for the purpose of this blog:
Adjacent or harmonizing colours appear next to each other on the color wheel. Harmonizing colours often work well together but if too close in value they can appear washed out or not have enough contrast. A harmonizing trio could be something like blue, light blue, and cyan or perhaps red, orange, and yellow.[2]
Contrasting colours are separated from each other by other colours -- they come from different segments of the colour wheel. The further apart, the more the contrast. Red (from the warm half of the colour wheel) contrasts with green and blue (from the cool half of the colour wheel). Shades of purple contrast with shades of green. Contrasting colours that are directly opposite each other on the colour wheel may be described as clashingcolours -- see the description for complementary. Despite the name, colours that clash are not always a bad combination if used carefully. They provide great contrast and high visibility. [2]
Complementary colours are on opposite sides of the colour wheel -- they are each half of a pair of contrasting colours. For example, blue is a complementary colour to yellow. Green is complementary to purple and magenta. A pair of complementary colours printed side by side can sometimes cause visual vibration (clash) making them a less than desirable combination. However, separate them on the page with other colours and they can work together. Note the spelling. These are not complimentary colours. They don't always flatter (compliment) one another but they do complete (complement) each other. [2]
What I will be concentrating on however is the psychology of colour and how it makes people feel. I am concentrating on this because each of my pages will have a different colour scheme.
Blue: Blue is first and foremost a calming colour, one that promotes physical and mental relaxation, inner security and confidence. Light blue promotes creativity. That is why it is recommended to decorate offices and studies. Ideally, it should be associated with yellow, which stimulates the mind and raises one's organizational capacity. Turquoise seems to facilitate communications between people who surround themselves in it. [3]
Yellow: Yellow is bright, happy and stimulating. It is associated with intellect and the expression of thoughts. [3]
Orange: Orange is the "happy" colour par excellence. It frees emotions, promotes self-esteem and the capacity to forgive. This stimulating colour fights depression and cultivates good humour. Lighter hues such as peach and apricot, help restore nervous energy. [3]
Red: Colour influences our emotions and psychological state too. Red is a very powerful colour, associated with a high level of energy and stimulation. It goes hand in hand with adjectives such as courageous, antidepressant, assertive, determined, friendly, warm, and sensual. On the other hand, too much of some reds can make people feel irritable, impatient and even angry.[3]
Green: Green stands as a symbol of life, growth and harmony. It brings us comfort, relaxation and wellness. When we think of green, we imagine many of nature's offerings such as forests, trees, grass, olives, apples, lichen, jade and emerald. Green's strong link with nature seems to bring us closer to nature and to one another. [3]
Violet: According to psychologists, violet contributes to mental equilibrium. In addition, it is associated with a sense of the artistic, music, intuition and spirituality. It promotes sensitivity and compassion. [3]
Black: Black creates diverse characteristics: it provides a feeling of protection, comfort, and yet, a sensation of mystery. It is associated to silence, infinity as well as to the feminine vital force. [3]
For my web portfolio I have decided to do the home page pink as it is my favourite colour and represents me. For the other pages, I will use lime green as it brings comfort to the user. I will use turquoise for the calming effect and because it promotes creativity. Lastly, I will use violet because it is associated with art.
The most creative portfolio I have ever seen has to be We Bleed Design by Bryan Katzel. While the website may not be entirely user friendly (getting back to the top of the page could be confusing for the user) it is certainly extremely creative.
I like the rainbow colours on a dark background, the layout really stands out. But what I like most about this website is the navigation. It is clearly located at the top of the page and has a brilliant effect when using the links, from the user being took underground, down a rope and finally through a storm.
The website is very difficult to define in words but I've never seen another site like it. To appreciate this site you really need to visit it. This portfolio has inspired me to always be creative and to not be scared of trying new things.
Navigation is the most important aspect of web design if a site is to be usable and accessible. Consistency cannot be negotiated here as the user doesn't like to 'learn' new navigation. Debra Bellmaine (2004) says, "a site that makes finding the order page a hunt for buried treasure, will urge the visitor to leave your site and buy elsewhere. Minimally, it sends a strong signal that your company is unprofessional, and purchasing from you could be risky." [1] Web designers should not confuse matters by using funky, intricate navigation no matter how cool it might be. [2]
However, I feel that navigation can look nice as well as being usable. I want my navigation to be eye catching and I plan to have a simple text navigation bar with some sort of underline effect on mouseover which I haven't fully decided on yet.
For this section of my blog I decided to use a photo of my cat Jezebel to create an ad for the cat shelter I got her from - The Sheffield Cats Abuse Treatment Society (C.A.T.S).
The photo on the right is the photograph I used for the advert in its original form.
I edited the image in Adobe Photoshop CS4 and added textures to the background, added image effects to make Jezebel look like a cartoon using a tutorial I found online. Then I added text, the name of the charity and the address and then finally using round brushes I added pawprint details.
I like the outcome of the image as it is bright and cheerful and the colours work together nicely. The photo of Jezebel made a really good cartoon and I edited the image to make it look green. I have always associated charities with the colour green because I associate green with peace. The colour green also symbolises life, nature and well being which I think works well with an animal charity.
Animation is used widely across the web, the main technologies web designers use to create animations are:
Animated GIFs
Dynamic HTML
Java and JavaScript
Shockwave and Flash
Web designers use animation in their websites to bring it to life, to create more interactivity. Many share the opinion that static websites are boring. I don't share this opinion but I believe a website can be improved if animation is used sparingly and correctly.
Animation is especially useful for drawing a user's attention to something. This is primarily used in online advertising. However, if there is no purpose for an animation then it holds little value despite it making the website 'cute'. [1]
Animation can also be entertaining for a user and can show creativity. [1] Although, too much is bad. Too much animation can result in slow loading time, can be an annoyance and a distraction to the user from the website's content. [1] Text marquee's are especially frowned upon in web design.
I conclude that animations should always improve a website's appearance and serve a purpose, they should never distract or annoy a user. I myself am using a little animation in my website's logo and on mouseover in the navigation as I think its important to draw a user to my logo (advertising) and to the navigation (usability).
What makes a website appealing? Content and usability are very important issues but I think the design of a website is just as important, if not more so. As humans, we tend to appreciate attractive things. This has led me to research the aesthetic psychology of humans and what makes a website look nice.
Aesthetic psychology
Even though the article describes human beauty, I agree with Daniella Berge when she says, "Most definitions associate beauty with "harmony of form and color" and with "pleasing the eye"." and, "Beauty is a matter of personal taste... some of your appreciation is also cultural."
Everybody knows the saying "beauty is in the eye of the beholder" and it's true whether it's in human attractiveness, art, fashion or even on the web. A web designer has got to be careful when designing a layout. Something might look attractive to one person but not to another. I think an important aspect to consider is colour palette. Colours on the web have to compliment each other, for usability and aesthetic reasons.
However, it is important to define your target audience. Using myself as an example, I want my portfolio to appeal to companies who want a creative website. For example; bands, children and movie websites. My worst nightmare is to be stuck creative boring corporate websites. And while it's important to appeal to a lot of different people, I also think it's important for a portfolio website to reflect its creator, to say something about that person.
Creating an appealing website
The most important aspect in creating an appealing website in my opinion is colour. Because this is so important I am later going to dedicate an entire blog entry on this subject. However, Dallas Hart says, "Users apparently know color when they see one. Your color preference is therefore very vital and you should be careful in picking a color motif that reflects your company or organization's identity, yet at the same time, makes the website text easy to read."
Simple layouts are effective. You don't want to distract a user from the content of a website. Statistics show that users spend less than 4 seconds on a website before deciding that a website is worth the read (Jakob Nielson, 2008) so it is important that the layout never conflicts with the information a website is trying to provide.
White space is also an important consideration to make as it makes the website look 'fresh' and not overcrowded. However, white space doesn't need to be white as long as there is space. White space is just a general term for not overcrowding the website and having a space of plain colour on the page. (webdesignfromscratch.com, 2009)
Soon I will be drawing up a design specification for the layout of my website. These are the things I feel I should pay the most consideration to and what makes a web layout appealing.
I liked the idea of something robotic and girly so I came up with the design below. It isn't coloured yet and the line art needs perfecting. The lipstick on the robot and her hair bow will change colour to match the background of the page. Her hair will be coloured blonde and her eyes blue-grey to reflect me.
Consistency is important in web design but so is appeal, and I don't want to make my website boring by having everything looking the same. So I am researching consistent layouts that are still unique and interesting, and I'm researching banner images and the composition.
I haven't decided how my website will be designed yet, whether the graphics will be the same on every page but different colours, or whether I will use different graphics with the same theme so that they are still consistent. However, hopefully I will decide which design to use by the end of this entry.
Consistent graphics in different colours I found the portfolio of a designer named Ed Hall (http://www.eddidit.com/) and found his site very interesting. It's clean and simple without being boring. The website uses a gradient effect background but it's only in one corner in a circle (like a spotlight) and I don't think it looks tacky at all.
At the top of the pages there is a pattern made out of curved lines overlapping each other. As I navigated through the pages, the design stayed consistent but each page was a different colour. I liked this effect as it made looking at the portfolio more interesting and gives it the 'creative vibe' which I think is important for designers to give off.
Because the graphics were the same except for the colour, the user wouldn't get confused or think they have accidently navigated away from the site, which is very important when trying to attract customers.
Consistent layouts with rotating graphics
A website that uses rotating graphics very well is the Taboon/Gold coast website (http://www.taboon.com.au/index.php). The layout is the same throughout the different pages, however the images at the top all rotate through the pages.
I like this effect, all the images are related to the website (food) but the rotation makes the pages far more interesting and slightly different each time without confusing the user.
The images use regular rhythm (see blog entry titled "Using graphics in web design") and unity. All the images are related to the restaurant in one form or another. From images to the outside view of the restaurant, to the inside and the food it serves. This is important so that the images don't distract the users from the website's purpose which in this case is advertising and promoting a restaurant.
Conclusion
For my web design portfolio I have decided that I would rather use consistent graphics in different colours as it's more unique and gives the website more edge. However I am also considering integrating rotating images. This is not definite but it will be applied if I can find a way to make it work effectively and professionally.
Mozilla's Firefox browser is so popular that many fans have created images, especially wallpapers to advertise and show their love for Firefox. Designs are everywhere, from buses in India to attractive women sporting Firefox t-shirts.
A desktop wallpaper made by a fan interested me the most. It is a photo of a beach that has been edited with surf boards that have parts of the design of the Firefox logo printed on them to create the full logo.
It also has a photo of a red fox added to the wallpaper and a ladies bikini. Even though the editing isn't very good and it's obvious it has been edited I like what the photo says.
The surf boards are progressive (see previous blog entry) and the image has the statement, "Firefox world class surf gear". The quote has a double meaning. Surf is associated with the beach, sea and surf boards. But you also 'surf' the internet. Surf gear is an object or objects used to surf, a browser is a tool to surf the net. I think the idea for the wallpaper is very clever and thought out.
Right now, on the web, there are some really fabulous experimental designers out there already doing this, often for personal sites and portfolios. However, for many designers (myself included), while using a CMS has made our jobs creating websites easier, they have also possibly stunted our growth. I used to build a lot of WordPress sites and while I’d spend a lot of time and enjoyed creating a “unique” design, that design would follow through the whole site. Every page pretty much looked the same. Each blog post looked the same. This could be considered consistency, and repetition is an important principle in design, but does it all become boring after a while? If you’re reading a magazine, does every single article look the same? No sir. (Farley, 2009)
The citation above explains what I want to do with my websites visually. I want the layouts to be creative and unique. I want consistency but I want each page to look a little different and these things will be taken into consideration when designing the layout of my web project.
I have researched the principles of design to help me with this and what I will be focusing on when designing my images. The principles I found most appropriate for web design are:
Balance - symmetrical or asymmetrical. Looking at images and making sure they make 'sense', for example size of foreground objects against backgrounds, gravity, composition.
Rhythm - Regular is when the images are equal sizes and lengths and the spaces between objects are equal. Flowing is when an image is given a sense of movement. Progressive is when a sequence of the same image (or similar in size) is shown, usually in a pattern.
Proportion - the relationship in scale between different objects, ties in with balance and composition.
Dominance - an object in the foreground may be dominant and the background sub-dominant, or even the other way round. This can be achieved with colour. Dominant objects tend to be brighter and more defined, sub-dominant will be faded and lighter colours would usually be used.
Unity - how different elements in graphics tie in to give an image a 'story' of sorts. Random images placed in a layout would confuse a user. A certain level of consistency should be used, but not be used so that the site is boring.
Alignment - our brains group together similar objects, colours, shapes and sizes. This should be used to an advantage so that an image makes 'sense' to our brains.
I also think it's important to have the graphics fit the content. Images of lipstick would not suit the content of a football website and would confuse users. The graphics should be appropriate but can still be creative.
Using this information is important to me for making a suitable layout for my web project so that it is visually appealing to the user and does also not confuse the user.
I created this layout for Myspace around two years ago and to this day it is one of my favourite layouts that I have made.
I wanted a layout to reflect me. The layout is simple even though my self image isn't. I do like very simple layouts though in simple colours. Turquoise is one of my favourite colours, the water reflects my starsign which is Aquarius. Water is also pure and clean which suits my layout and the quote at the top is one of my favourites which I think reflects that simple art is beautiful.
When I made this layout, I never planned for it to have a visual meaning. This was simply a piece of random, creative work and it was very interesting to analyse the symbolism of this layout and I was surprised how much sense it all made and how it fitted together even though I hadn't planned it that way.
I stumbled across this website a while ago and I loved the layout. The graphics are very cute and friendly and the colours compliment each other nicely.
I think the layout works well especially with the graphic of a film roll with the text 'eat my shorts' (from The Simpsons) and the image of two laughing 'smilies' with a speech bubble between them containing the text 'hah!'. These elements of the layout show the user just what the website is advertising and its obvious its comedy film.
The clouds, smilies and stars are all animated but it compliments the website as there isn't too much of the animation, it makes it interesting rather than annoying. It can be quite difficult to get animation right on the website layout so that it doesn't annoy the user.
The monster on the right hand side is animated on mouseover so that it appears to be biting down on the film roll and the logo on the left shakes on mouseover. It is a nice effect which isn't too much to annoy the user.
The gradient background works nicely, sometimes they look a bit amateur but the texture of the background makes it appealing. The colours work well with the theme which is the sky and clouds which is made obvious by the hot air balloon and the aeroplane.
Also if you scroll the the bottom of the site, graphics are used to make it look like the sky is hitting the land then the sea. There are some dolphin graphics for the sea and on the land there is a tent (works well with the theme of a festival) and a rainbow.
I think this website will appeal to adults as well as children of all ages. However, I find the website rather girly which may not appeal to adult males.
Overall I think the website is really appealing and it is quick to load. The graphics describe by themselves what the site is advertising which can be difficult when using the web.
Yesterday I decided that I would design a logo for my project. This would be for 'Dolltronic Designs' - an idea I had for a website to showcase my web design work, a web design portfolio if you will.
I've had the username 'Dolltronic' across many different sites over the past four years now. I chose it because many of my friends call me 'doll' and I like how girly it sounds as I am a girly girl. :) The 'tronic' part is derived from 'electronic' because I've always had an interest in technology and my favourite type of music is electronic.
I want the logo for this website to symbolise who I am and the word 'dolltronic', so I asked my three closest friends to tell me what they thought of when they hear my username. Their answers were:
Barbie
Cute
Girly
Computers
Electricity
Circuit boards
Using the opinions of my friends who are all novice computer users, I am going to create a logo which is girly and technical. I'm thinking of silhouettes of dolls and circuitry patterns.
I am analysing the logos of the two most popular browsers. They are; Microsoft's Internet Explorer and Mozilla's Firefox.
I will analyse the names picked for the browsers and the semiotics/symbolism of the logos and how these help their respective marketing campaigns.
Internet Explorer
The logo is designed to look like a planet. The 'E' which we can assume stands for 'Explorer' is blue (like the sea would be on an image of the Earth) and is perfectly circular.
The yellow ring around the 'E' is much like a Planetary Ring like the one around Saturn for example, which makes the logo look like it represents a planet, or rather, the world, as in the World Wide Web. I also think the ring could symbolise the communication that is offered via the Internet travelling around the planet.
The name for the browser, Internet Explorer is self-explanatory, it's a piece of software used to explore the Internet.
Microsoft's Internet Explorer is considered to be the most commonly used browser in the world but according to W3Schools, Internet Explorer had the usage share of 35.3% in February 2010 compared to 46.5% using Firefox. However, for most non-technical users, the Internet Explorer logo is recognised unlike Firefox's and many don't realise that there is more than one browser available to surf the Internet.
Firefox
The logo incorporates the globe and a fox with a flame-like tail embracing it. The globe represents the World Wide Web. The fox with the flaming tail is a representation of the browser's name, Firefox.
Analysing the name Firefox, its name doesn't explain what the software is unlike Internet Explorer, which may be detrimental to Mozilla's marketing campaign. However, the symbolism of the name of the browser and the logo is clear. A fox is a small, agile creature and the common red fox is flame coloured which fits in with the 'fire' part of the word Firefox. Fire also symbolises strength and power. Mozilla claims faster (a fox is fast) and more powerful (fire is a powerful element) browsing which I think is both incorporated into its name and logo.
Conclusion
Overall I think Firefox's logo is better than Internet Explorer's. I like what the Firefox's logo represents and Mozilla and its fan base have created many images that reflect the plus points of this popular browser, more of which I will analyse later in this diary.
