Further conundrums on my website

 Uncategorized  Comments Off on Further conundrums on my website
Oct 312011
 

Well… I have updated my website, (www.priscillawdesign.com) but there are two problems with it. They both seem so trivial, but I just can’t find the answers. So I decided to bite the bullet and upload it anyway, relying on your willingness to help. Any ideas welcome – these are the problems:

  1. If you view it in Firefox, the widths work fine, but in IE it goes all over the place. I have set the widths of the divs, but I remember reading some time ago that you can set widths to be a percentage of the screen width rather than a specified width. I need reminding how this works. (The info got buried under loads more info in my brain.)
  2. On the home page, the main div contains the <h2>, <img>, <p> and a <ul>. I managed to float the <p> to the right next to the photo, but the <ul> just will not do the same thing. I’ve tried several things but no joy.

Sighhhhh. Does this get any easier or quicker? It should be so simple but gets so fiddly.

 

Good & Bad Colour Schemes

 coursework  Comments Off on Good & Bad Colour Schemes
Oct 312011
 

The Good:

http://www.vodafone.ie

Nice subtle use of colours with matching colours in the images. Red to re-inforce the branding. East to read contrasting text.

http://www.apple.com

Aplle website image

Again this website uses good subtle contrasting colours which are simple yet work well.

http://www.facebook.com

Facebook website image

Good use of blues and contrasting colours with shadows. Branding is subtle yet distinct.

The Bad:

http://milliondollarhomepage.com/

Million dollar homepage

I’ve included this because although the website itself has an OK colour scheme the pixels that have been purchased by the various companies are a mad wash of different colours which makes the website very difficult to look at.

http://www.johntitor.com/

Bad colour schemes

This website is very difficult to read. Although the white text on black background gives good contrast this is too much for the body text and the blue headings are terrible.

http://www.stevenlim.net/

The highlighted yellow text is difficult to read and the red text on the white background is also an eyesore and then the text colours change to blue and then black so it’s confusing for the reader.

10/1/2012: found another one here:
http://www.fabricland.co.uk/

Sources:
http://www.webmaster-designs.com/bad-website-designs/
http://www.webpagesthatsuck.com/

 

 

 Posted by at 10:38 pm

Three bad colour scheme websites

 Uncategorized  Comments Off on Three bad colour scheme websites
Oct 312011
 

http://www-cs-faculty.stanford.edu/~eroberts/cs181/projects/2010-11/PsychologyOfTrust/ui3.html#0

This is a perfect example of a terrible colour scheme. The first thing the user sees when opening this page is the over exuberant background which not only distracts from the content, but also tires the eyes and confuses the user. This background appears like one of those optical illusions where the lines are moving when in fact they are not. The blue typography on top of a pink background does not provide a high contrast so would be difficult for partially sighted people to see.

 

http://www.lingscars.com/

A web page on which every element is a different color looks chaotic. With all these different colours on the page, a user would not know where to start looking for content. The website contains an over use of GIF animations which just serve to distract and annoy the user.

 

http://msy.com.au/

This website only uses three colours, red, white and blue. However the colour red seems to overwhelm the page. This should be used to emphasize important parts of a site and not everything. From studies conducted on restaurants, fast food chains use red colour schemes to heighten people’s emotions and therefore make them eat quickly and get out so the next customer can sit. In this case, the red colour scheme serves the same purpose and encourages a user to want to leave as soon as possible rather than stay and appreciate the content.

 Posted by at 7:51 pm

Three good color scheme websites

 Uncategorized  Comments Off on Three good color scheme websites
Oct 312011
 

http://daguia.com.br/

This flashy web site looks very nice in the use of colors. The purple back ground is match with the color of the cake and also the purple raspberry. A monochromatic color scheme is being used with each color being a variation of previous. As the photograph of the cakes “the products” changes, so does the background color. For example, when the minty cheese cake is displayed, the background color changes to shades of green. This indirectly makes you think about the flavor and therefore promotes the product.

 

http://www.lightcms.com/

Choosing orange and blue color which is 2 complement colors in color wheel is giving a good look to this website. The use of blue color for the “sign up” baton in the orange background it is eye catching. Using shades of orange gives a warm fill and makes the site welcoming to users. In addition it does look professional. The typography has a high contrast against the background so is clear and easy to see making the site more user-friendly. A white stripe is appropriately used to ensure the brand name/logo sticks out and is clearly visible.

 

http://www.urbanfonts.com/

Choosing colors from the logo is always a safe choice for a color scheme. The use of blues and green together complement each other, a cool color scheme is used which makes the website looks professional and sophisticated. Furthermore, the white background provides a high contrast for the text so it can easily be read. The website intentionally uses a simple theme so as not to confuse and distract the user away from the typography styles. In addition, the text colour for the ‘featured font’ is one of the only black objects on the page so the users’ attention is automatically drawn to this.

 

 

 

 

 

 

 Posted by at 7:46 pm

Three good color scheme websites

 Coursework  Comments Off on Three good color scheme websites
Oct 312011
 

Coringa

This website only uses 2 main colors (background-navigation bars) and three secondary. The balance achieved between those two main colors is great, relaxing to the eye and the content is instantly identifiable. Hovering over the links, a blink effect is used, but not annoying at all. A cool color effect is also used as a dithering one (or close to this effect) for making the visual illustration of earth’s continents. Secondary colors used supplements the overall experience but they are used in such small doses that they are barely apprehensible.

  • links: #B3C943
  • containers/bars: #DB0067
  • background: #F3F1E1

Exile Designs

This is the online portfolio of a propitious French digital artist. She made a good monochromatic use of the color. The background is a warm relaxing color that matches with fonts, titles, logo and header. A careful use of white color was made for the links which also use a hover effect with a good matching color as well. Regarding color scheme structure, the webpage elements are used wisely and carefully, so that all of them tie well each other.

Some of the colors used:

  • #3D2121
  • #4C2B33
  • #E2BFC8
  • #E52B57

Cloud9

cloud9 websiteCloud9 is an online IDE for development of JavaScript and HTML5 applications. Apart for other functions, s it is obvious that their success depends on correct choice regarding color schemes. Designers couldn’t leave out this without considerable thought and they have done a very good job. Color choice and positioning is really good, making a relaxing experience and it succeeds on usability and accessibility issues.

The dark background used helps viewers focus on the content which is distinctive and classifiable. Green headings are helping to classify each topic separating it from different ones. A light tinted blue is used on the heading grasping the attention of the viewer. As a general impression, watching this this website at my viewport is pleasant and satisfying.

  • #0092EF
  • #009900
  • #505050
  • #BF0202
 Posted by at 5:35 pm

Three examples of websites with poor colour schemes

 Coursework, Webpage design  Comments Off on Three examples of websites with poor colour schemes
Oct 312011
 

http://www.yvettesbridalformal.com/

In this website is impossible to identify what kind of colour scheme is used because it contains a huge number of colours. All of them are very saturated and when they get together, it becomes unpleasant. The background consists of an image that is repeated horizontally with photos and multicolored text on the top. It makes the website unclean and disorganized.

 

http://www.spaceistheplace.ca/

This website uses bright blue for the background and light blue for the text. These two colours are part of the Analogous Color Scheme that uses colours adjacents to each other on the colour wheel. However, the use of these two colours in this way is incorrect because due to the brightness it is difficult to read the text. The links are in yellow and quotes white. This creates a lack of visual harmony on the page. This website requires a re-design with a more appropriate colour scheme. This way it seems very unprofessional.

 

http://www.hosanna1.com/

The main colours on this website are blue and white although the text appears with pink, red, yellow and even green. The background is blue with an image that repeats vertically. The website has too many animations at the same time which makes difficult to focus the attention on the content. The aim is to make the website dynamic but it does the opposite. It looks messy.

 Posted by at 5:28 pm

week 5 – what I learned this week

 Webpage design, What I learned this week  Comments Off on week 5 – what I learned this week
Oct 312011
 
  • Class names should describe the exact content and not the rule but this is not always possible.
  • Keep markup as simple as possible. Don’t add <div> if it isn’t necessary. Other block elements like <p>, <h1>, (…), <h6>, <ul>, <ol> can be styled in the CSS.
  • <em> is for emphasizing.
  • Background repeat-x, images are repeated horizontally. Background repeat-y, images are repeated vertically.
  • Display: block; makes inline elements (<span>, <em>, <img>, <a>) in block elements. Display: inline; can also be used for the reverse process.
  • Hex values can be abbreviated, #DD99AA can be written #D9A.
  • The background can be positioned by using percentages.
  • For create rollovers, instead of using different images in different files to make the hover state, use sprites. The download is faster because the two images are in the same file and there is no delays. What changes is only the background position.
 Posted by at 2:54 pm

My Coursework site

 Uncategorized  Comments Off on My Coursework site
Oct 312011
 

Hi Guys,
Here is link of my Coursework site.

http://www.rehmanbookdepot.com/imran.html

 Posted by at 12:11 pm

Three bad color scheme websites

 Coursework  Comments Off on Three bad color scheme websites
Oct 312011
 

.argh! { those sites : suck;  they lack: harmony;  they fail: to deliver a satisfying color scheme; }

www.kritikokonaki.gr   class=”argh!”

"to konaki" websiteFirst in list (in no particular order) is the site of a greek tavern/entertainment center. The color scheme not only does not compromises with any color theory, but also is rather outrageous. More specifically, the color that was chosen for the main text is white, but it contradicts the color of secondary text such as the google ad links or the rolling text.

The background seems as it was chosen out of luck and it is more than obvious that no deep analysis or a logical conclusion was done in relation with the color influence it may have to viewers.

However, the most horrible of all, still not obvious to any user who visits the site for first time, is the false overuse of pseudo-classes; hovering your pointer over the links, you will discover that the navigation’s background changes to  a repulsive combination of colors. I have to warn you that if you visit the site  out of curiosity, you should be prepared of a piercing noise when you hover your mouse over the navigation’s links.  Some of the colors used are:

  • google ad fonts: #f9ed41
  • background: #9b3500
  • navigation bar: #8d0800
  • visitor count: #1220ae

www.clubblueroom.com  class=”argh!”

While someone may think that there is no bad use of colors at this site, I would have to say that there really is; probably this site’s designer tried unsuccessfully to cover his weakness regarding his color choice ability. A very big blue logo and very small red links constitute the homepage. Exploring the site further, one can discover that a similar color choice pattern is followed. Now, specifically speaking, the combination of that blue and red (and white), may not be obviously annoying or a failing one, however the color design and the absence of a main color make it poor and shoddy, thus downgrading the site’s value.

  • font: #cf1000
  • logo: #00146d

idea.gr  class=”argh!”

idea.gr websiteYet another Greek horrid website. What first caught my eye, was the terrible combination on the header of the site; tints of blue color and red logo on the left that shouts ‘ I am a failure ‘. Not only that, but an orange icon which represents a Greek column capital on the right gives a cheap feeling regarding the site. Color choice following a certain method was probably an unknown method to the designer. Inspecting colors further, the designer mainly used blue and red shade color falsely and he also failed to arrange them so they could match better rather than confuse viewers. Last but not least, the background is really bad.

  • navigation bar: #840600
  • navigation tab bar: #002476
  • logo color 1:#e31300
  • logo color 2: #00a8d6
  • background: #d9cfd0
 Posted by at 2:07 am