Website Colour Scheme

Thanks to Holly Harre (check out the link to her blog) for these two sites. There are a couple of good sites to help come up with colour ideas and schemes for a website. In this one you can select a few different modes of how it picks the colour, then you select your main colour and it automatically chooses other colours to complement it. It even has a button you can click to see an example of a webpage using those colours. It can display a ‘light’ or ‘dark’ version of the page using these colours. This website is: http://colorschemedesigner.com/

 

The problem with the above site is that is has no option for sites that use alot of grey. So I used a different site for mine. Again this came from looking at Holly’s blog. This site is called Kuler and can be found at: http://kuler.adobe.com/#themes/mostpopular?time=30  On this site various people post examples of colour schemes that they like, or have used. Of course it is important to be aware that some of these people may have no idea what they are doing. The schemes are fully available for people to rate and comment on and its well worth having a look around to find anything you are interested in. Once you have found what you are looking for it is simple to get the hex codes for the numbers to use in dreamweaver to add the colours to your site. Unfortunately it doesn’t have the example website that you can view to see the possible finished result, so you’ll just have to use your imagination and hope for the best. This is the colour scheme that I decided to go with. It has the greys that I was after, with a bit of bright spot colour to really bring it out.

Project 2: Design of a site

For project 2 we were asked to design a site using the theme of a online magazine dealing with design. We talked about various ways to design including the use of a ‘cork board’. Essentially this means that anything that inspires, or interests us we cut out and pin onto a board. Straight away I thought about using the board itself as the basis for the page design, but decided to make it a bit more ‘manly’ and covered it in sheet metal textures instead. I also liked the idea that it could also be viewed as a kind of master plate for a printing press for an actual printed newspaper. So I decided to go for the old fashioned gothic style script for the title. I put together a quick mock up of the page in photoshop to see what it would look like and this is what I came up with.

Then interestingly as I was browsing around on the internet one day I just happened to come across another website which immediately made me think of mine. As you can see they have used a very similar style of font for the main title. I just thought it was kind of cool to find that someone else is doing the same kind of thing (although this online newspaper is not about design) as I am doing with my one. Although the two sites do look very different. I do like how the ‘New York Syndicate’ site has used that red for a bit of spot colour to help it stand out a bit. I think that my site is a bit grey and needs a bit of extra colour.

Week 4: Footers

And now the logical conclusion to looking at Headers is to look at their counterparts, the Footer. The footer usually contains navigation around the site for more fringe areas, not the main sites purpose i.e. selling shoes, but all the admin things, like contact details, company info, site map, technical support etc. Of course this is by no means a hard and fast rule, so anyway, i’ve taken a look at a few footers and found some I liked.

While a lot of footers are just a bunch of text and links at the bottom of the page, designed to be functional, but not to draw your attention away from everything else, I like this one because it is exactly the opposite. Its just as big and bold as most Headers, its got a great eye catching graphic and all the essential links and information is contained around it. It is interesting to note with this one that they have a contact form you can fill in, this is the first time I’ve seen that in a Footer before.

Week 4: Headers

One of the visual components that makes up a typical website is the Header. This can be a large image across the top of the page, but also typically contains the title of the website and often menu navigation. So I had a look around the net to find some headers that really appealed to me.

This one uses a large image to dominate the page. The theme is obvious, the designer works at their workstation which is depicted in a top down view, complete with coffee cup. Clicking on various items will load different pages. I had a look at these and found them to be very limited. For the amount of clutter on the desk I was expecting alot more things to be able to select. Apparently this style was quite popular for awhile, but has now become outdated and cliche. Still I think its a lovely image and quite nicely done. As well as having the graphical navigation of clicking on various objects also included is a text based menu system. This is very important as many people will not bother, or be interesting in ‘playing’ with the navigation system and prefer direct, easy to understand words. Interesting to note there is no search bar in the navigation menu. Although, being a design firm there possibly isn’t a lot of content to need a search bar.

Week 4: Site Layout

This week we looked at the layout of websites and different components that make up a typical website. So first off we looked at a few examples of websites and broke them down to their fundamental parts.

So first up was the website for Amcal pharmacies. I chose this one to look at first because it is perhaps the most basic of the sites that we looked at and as such is easy to break down to sections. Not much to it really, you have a large Header image, menus, body text, links, a disclaimer and the footer. A nice addition to this one that doesn’t always show up is the print page button. Often sites have graphics and ads that you really don’t care about printing, but using this button it will give you a printed page with just the body text information saving you ink, paper and time. But unfortunately thats about the best thing about this website. The design looks old, its just one square in the middle of the screen so was probably designed awhile ago to accommodate people with smaller monitors with lower resolutions. Also the square shape reminds me of websites created solely in Flash but in this case without all the fancy bells and whistles. However the information you need is there, there is a handy site map to help you find pages if you are lost, one thing missing though is a search bar, these are a very handy tool and most websites should seriously consider including one.

Week 3: Part 1 HTML

This week we looked at how to set up a basic website, including creating a pages in dreamweaver for HTML and CSS coding. Since this is very note intensive I have separated it out into two parts. Part one being HTML and Part two CSS.

First step is to set up your filing system. Create folders to store all your working files, images, videos etc that will be used for reference, but not included as such in the actual site itself. Then below that set up the remaining folders inside a single folder typically named something like, website. These folders will contain the files that are required to load the website itself.

Now onto Dreamweaver. Select a new file and check to make sure you are in the HTML file code view. The parts of the code are as follows:

<head> this is the code to signify the  beginning of the head tag.  </head> signifies the end of the code. Everything in between these 2 brackets are considered to be a part of the head portion of the website. From now on when explaining code the </> closing part of the code will be implied…… Never Forget It Though!!

<title> This is the title of your site which will show up on the tab, and title bar in your browser. Also it will be displayed as the name of your site when searched for in search engines such as Google. Just type what you want between the beginning and end codes and thats the name of your site.

<body> This section contains the actual content of your site.

Week 3: Part 2 CSS

Alrighty, part 2 of my rambling coverage of week 3. CSS (Cascading Style Sheets) is the style that is applied to your HTML file. No content is actually located in this file, it is only used to affect the overall look of your content.

REMEMBER: It will only work if you actually link it to your HTML page.

Ok, now the top of your page should say something like: charset “utf-8″;    Utf-8 is the english characterset, so basically it is just saying that you are using English characters. Yay!

To effect the way your paragraphs look you simply use the p{ opener and then } to close. All commands between the brackets will effect your paragraphs. eg.

p{

color:#F6C;

font-family:”comic sans MS”, cursive;

font-size:12px;

}

The first command sets the colour of the text, now don’t panic you don’t need to learn all the Hex codes for the colours, the program lets you pick from a colour wheel…. you do however have to spell colour wrong.

Week 2: Raising Your Sites Profile

Ok, the focus of this week was to raise my blog sites profile so that when people type my name into a search engine mine is the first to come up. One of the ways to do this is to use existing sites to post links to my blog site. Social network sites such as Facebook and Twitter and particularly effective in this area. So I went through and registered for some that I wasn’t a member of, and updated my profile to include a link in those I already was. The sites I have so far linked in include:

Facebook

Twitter

Steam (Online gaming community)

Linkedin

Youtube

In total I know have 6 links connected to my blog (I also added a link in my wife’s Facebook account). This should help somewhat to increasing my web presence.

My First Week of Studying Web Work

My first week of study was basically an introduction to the Web and some of the possibilities that exist. We were given the usual information, course outlines etc and the brief for our first assignment. That assignment being…. well, this. Assignment 1 is to create and maintain a blog on the wordpress site. This site is free so gives you limited control over what your site will look like so the first step is to pick a theme which they have made available. So I had a quick look through and found a couple which at first glance I really liked.

This theme is titled Spectrum

This theme is titled Greyzed

Greyzed I really liked the look of, but it is very stylized and i’m not so sure that i could make that style work for me, or even if I really would want to. Spectrum really stood out to me so I decided to give it a go. I’m not so sure if its the fact that its so colourful or not, but I instantly liked it so decided to give it a go. I particularly like the background image how it fades behind the main screen. I like the idea of a banner image, but I think this works as a banner image much better. So I decided to pick an image that really stands out and also shows off some of what I do. I instantly knew just the image. It is a photo that I (or my wife if you believe her stories) took at night time at Pukekura park while on a boat in the middle of the lake.