Before carrying out this CA my web designs were in my head and at the time I was proud of them but thankfully I learned the importance of wire framing and designing up the site in Photoshop. I'd be fairly comfortable coding from a PSD now.
I also really think the pseudo element I have been talking about so much is very useful. If you take a look at some websites source code it can be quite cluttered and the only person who understands what is going on is the guy who designed it. Which is not advised in case other people have to work on the project. With the before and after CSS it keeps the HTML clean and easy to understand.
Even though before this course I had experience with HTML and CSS, I have learned a huge amount about the design aspects associated with websites. I have a real interest in becoming a web designer and hopefully by the end of the course I will have the skills to back up my passion for web design.
~ Pete
Wednesday 12 December 2012
Integrated CA - Validation
I created two sites one with CSS2 and one with CSS3.
The CSS2 version validates but is not the design I like. It doesn't have border-radius and the transitions.
The CSS3 version is the design that I like. It has transitions, border - radius and a few other bits. On the advice page. (in my HTML AND CSS I misspelled it as advise incase you wondering) I followed this tutorial http://tympanus.net/codrops/2012/08/08/circle-hover-effects-with-css-transitions/ to create the roll over animation. It uses opacity which is not support by IE. It also scales some of the elements. I'm not 100% on the transition bit but after seeing what it can do I will definitely be using it a lot.
My html validates on every page except I get two errors on the contact form for using the placeholder=" " tag .
I took this out in the CSS 2 version so this fully validates.
Another problem I have is that the font I use which is from https://typekit.com does not work on a local machine. It has to be on a server for it to work. I ran this by Stefan and he said include the font in the folder which I have.
The CSS2 version validates but is not the design I like. It doesn't have border-radius and the transitions.
The CSS3 version is the design that I like. It has transitions, border - radius and a few other bits. On the advice page. (in my HTML AND CSS I misspelled it as advise incase you wondering) I followed this tutorial http://tympanus.net/codrops/2012/08/08/circle-hover-effects-with-css-transitions/ to create the roll over animation. It uses opacity which is not support by IE. It also scales some of the elements. I'm not 100% on the transition bit but after seeing what it can do I will definitely be using it a lot.
My html validates on every page except I get two errors on the contact form for using the placeholder=" " tag .
I took this out in the CSS 2 version so this fully validates.
Another problem I have is that the font I use which is from https://typekit.com does not work on a local machine. It has to be on a server for it to work. I ran this by Stefan and he said include the font in the folder which I have.
Integrated CA- site elements part 2
In the first part I talked about my footer and the pseudo before and after CSS snippet.
I also used this to style my h1 which appear as a ribbon going across the page.
The code is very similar to the footer except I only use the before as I only need one curl. I also added a box-shadow to give the ribbon the effect that it is hovering above the white background. fig.1
I wanted to create a stylish way of displaying quotes on the site fig.2 . I styled the quotation marks in photoshop using a different font. I didnt feel the quotation marks from museo sans had an impact so I used another font. I sliced them and saved them as a PNG image. I used the pseudo before and after to position the images. one to the left and right. I gave the original div a position of relative and the images absolute. One thing I forgot to mention earlier about the pseudo before and after is the CSS must have content: ' ' ; for it to work.
We needed a table in the site and I decided to display some statics. I wanted to use the overall style of the site so used my colour swatch and font. throughout the site I gave the type a line - height so the font is vertically spaced out. It makes it alot easier to read. fig.1
I also used this to style my h1 which appear as a ribbon going across the page.
The code is very similar to the footer except I only use the before as I only need one curl. I also added a box-shadow to give the ribbon the effect that it is hovering above the white background. fig.1
 |
| fig.1 |
I wanted to create a stylish way of displaying quotes on the site fig.2 . I styled the quotation marks in photoshop using a different font. I didnt feel the quotation marks from museo sans had an impact so I used another font. I sliced them and saved them as a PNG image. I used the pseudo before and after to position the images. one to the left and right. I gave the original div a position of relative and the images absolute. One thing I forgot to mention earlier about the pseudo before and after is the CSS must have content: ' ' ; for it to work.
 |
| fig.2 |
We needed a table in the site and I decided to display some statics. I wanted to use the overall style of the site so used my colour swatch and font. throughout the site I gave the type a line - height so the font is vertically spaced out. It makes it alot easier to read. fig.1
Most users scroll over what they are reading so I added a hover style to the table. fig.2 It just changes the background colour but I like the effect. I originally planned to have no border on the table but after try one I thought it looks much better.
 |
| fig.1 |
 |
| fig.2 |
Integrated CA - Form
If you browse the internet one thing that always have a similar style is the contact form. Its overlooked in the design process and therefore keeps to the regular style.
I got my inspiration for my form from http://victorerixon.dreamhosters.com . I really like it and it so easy to use.
I use floats to position the elements of the form. I used the blue from my swatch as the background colour. I also didnt want to use labels to tell the user what to input instead I used icons I got from the net. I gave the elements padding-left of 100px and then inserted the icons as a background image and positioned it using background-position.
I used a jQuery plugin to validate the form. A valid email must be entered or an error will come up. Also the message input must be filled in, other wise it will give an error "field is required". I styled the error label so it looks like a speech bubble. I used the dark berry colour from my swatch for the error label. The background image changes when a error to a icon with the dark berry colour. One thing I would like to implement but don't know how to is when a field is valid the icon goes to a green to give a user some feed back that the field is valid.
I had one problem with the validation. There is two error labels, one for each field. Unfortunately they over lap. In fig.1 you can see the problem. I found no way over fixing this. One thing I did was use inspect element in chrome. I then gave the second label its own class and positioned it above the the correct field. I thought I could give the field that class name but the jQuery generates the class and omitted my class. In fig.2 you can see how I wanted it to look.
I got my inspiration for my form from http://victorerixon.dreamhosters.com . I really like it and it so easy to use.
I use floats to position the elements of the form. I used the blue from my swatch as the background colour. I also didnt want to use labels to tell the user what to input instead I used icons I got from the net. I gave the elements padding-left of 100px and then inserted the icons as a background image and positioned it using background-position.
I used a jQuery plugin to validate the form. A valid email must be entered or an error will come up. Also the message input must be filled in, other wise it will give an error "field is required". I styled the error label so it looks like a speech bubble. I used the dark berry colour from my swatch for the error label. The background image changes when a error to a icon with the dark berry colour. One thing I would like to implement but don't know how to is when a field is valid the icon goes to a green to give a user some feed back that the field is valid.
I had one problem with the validation. There is two error labels, one for each field. Unfortunately they over lap. In fig.1 you can see the problem. I found no way over fixing this. One thing I did was use inspect element in chrome. I then gave the second label its own class and positioned it above the the correct field. I thought I could give the field that class name but the jQuery generates the class and omitted my class. In fig.2 you can see how I wanted it to look.
 |
| fig.1 |
 |
| fig.2 |
Integrated CA - Layout
Layout
For my PSD design I used the 960 grid system, even though there is a 960 CSS I wanted to attempt the layout myself.
To centre align my site I created a div class "wrapper". To align it to the centre of the page I set the margin left and right to auto. I also gave the wrapper a width of 980px. I had designed it for 960px but felt the design was cramped at either side. I gave it an extra 10 px margin on both sides.
Margin is used to space out elements of a web page. For example if I give a div a margin-left:20px it will push it to the right 20px.
Another handy bit of CSS is padding. Padding is like margin except it effects the elements within the div. One thing I noticed with padding is that it adds on width/ height on a div. for example if I set the width of a div to 900px and then add padding-left: 50px the div will appear as 950px. There is a hack to get around this but I was afraid it would not work in IE. so I used some maths and took the amount of padding from the width/height of the div to get the size I wanted.
A web page is displayed following the structure of the HTML to disrupt this we use floats to allow elements to sit side by side. When a float is used it breaks the normal flow of the page. Any elements below will appear out of place. To fix this we must clear the float using clear: both; , I use this
quite a bit on the site and set up a div. <div class ="clear"></div>
Below in fig 1 we see an example of where I use float.
.aboutText {
float: left; //positions the text on the left
margin-left: 20px; // pushes the div 20px to the right
min-height: 400px; //sets a min and max height the div can go.
max-height: 400px;
width: 500px;
}
.aboutContent img {
float: right; //positions the img on the right
margin-left: 20px; // pushes the div 20px to the left
margin-right: 20px;
}
 |
| fig 1 |
Tuesday 11 December 2012
Integrated CA - Site elements
All browsers apply default styling to tags. for example a ul > has some margin left. I used a CSS reset to over ride these. Essentially I was starting with a blank canvas.
Some the elements I designed Appear on all the pages. These are the Header/ Nav and the Footer.
Header/ Nav
I feel that sites try to reinvent the wheel when it comes to the navigation and forget the basics. One of the major things for me is to keep it consistent and easy to use. Some times the Nav changes on a site and the user gets confused.
I kept mine as simple as you can with just typography and colours as my Nav. I evenly positioned the words out to keep it clean. I styled the a:hoover with a dark grey. On my CSS3 version I added a transition of 1s, which fades it from light grey to dark grey over 1 second.
I also created an active class so the user knows what page they are on. The class is a top border with the orange from my swatch. I added some padding to align it with the top of my logo. I also used nth-child(1) to apply some styling to the first child of the parent in this case the first li of the ul. This is CSS3
Footer
For the footer I want to create some that I have seen on a few websites that I like but put my own twist on it. This is the ribbon. I thought of how I would create it and at first thought of using images I sliced from the PSD but I wanted to try it using CSS. I'm a firm believer in that if it can be done in CSS it should be to keep the HTTP request down. My first attempt was using three divs. Two positioned at the bottom to give it the effect of the curl.
In a new book I got on HTML and CSS it discussed the pseudo elements before and after. Pseudo is greek for "Lying". In simple terms these are like a div but the do not appear in the HTML. They apply what ever is applied to before and after the div. See my code below
.footer {
position: relative; //need to position the curls
left: -30px;
width: 1040px;
height: 150px;
background-color: #013440;
}
.footer:before,.footer:after {
position: absolute; // set the position of the curls absolutely to the div
border-width: 0;
border-style: solid;
border-color: #01242c;
border-top-width: 20px; // creates a triangle too the colour above.
content: '';
}
.footer:before {
bottom: -20px;
left: 0;
border-left: 30px solid transparent; // another triangle but this time transparent
}
.footer:after {
right: 0;
bottom: -20px;
border-right: 30px solid transparent;
}
This is my first time using the Pseudo elements before and after and I found them extremely useful for keeping my HTML clean and easy to understand. I also use them to style my block quotes.
Some the elements I designed Appear on all the pages. These are the Header/ Nav and the Footer.
Header/ Nav
I feel that sites try to reinvent the wheel when it comes to the navigation and forget the basics. One of the major things for me is to keep it consistent and easy to use. Some times the Nav changes on a site and the user gets confused.
I kept mine as simple as you can with just typography and colours as my Nav. I evenly positioned the words out to keep it clean. I styled the a:hoover with a dark grey. On my CSS3 version I added a transition of 1s, which fades it from light grey to dark grey over 1 second.
I also created an active class so the user knows what page they are on. The class is a top border with the orange from my swatch. I added some padding to align it with the top of my logo. I also used nth-child(1) to apply some styling to the first child of the parent in this case the first li of the ul. This is CSS3
Footer
For the footer I want to create some that I have seen on a few websites that I like but put my own twist on it. This is the ribbon. I thought of how I would create it and at first thought of using images I sliced from the PSD but I wanted to try it using CSS. I'm a firm believer in that if it can be done in CSS it should be to keep the HTTP request down. My first attempt was using three divs. Two positioned at the bottom to give it the effect of the curl.
In a new book I got on HTML and CSS it discussed the pseudo elements before and after. Pseudo is greek for "Lying". In simple terms these are like a div but the do not appear in the HTML. They apply what ever is applied to before and after the div. See my code below
.footer {
position: relative; //need to position the curls
left: -30px;
width: 1040px;
height: 150px;
background-color: #013440;
}
.footer:before,.footer:after {
position: absolute; // set the position of the curls absolutely to the div
border-width: 0;
border-style: solid;
border-color: #01242c;
border-top-width: 20px; // creates a triangle too the colour above.
content: '';
}
.footer:before {
bottom: -20px;
left: 0;
border-left: 30px solid transparent; // another triangle but this time transparent
}
.footer:after {
right: 0;
bottom: -20px;
border-right: 30px solid transparent;
}
This is my first time using the Pseudo elements before and after and I found them extremely useful for keeping my HTML clean and easy to understand. I also use them to style my block quotes.
Intergrated CA - Wire framing / Sketches
This is my first Web Page since I completed first year in SCD. One thing I did then was when I had an idea I coded it up hoping it would work. Most of the time it was wrong and usually took a lot of time.
Since starting this course I have realised the importance of wire framing and sketching any ideas I have (I'm a terrible drawer). When I like the ideas I have sketched, I then design it in photoshop with the exact dimensions I am going to use in the site (apart from the height). Since doing this not only am I creating web pages quicker but I feel I am creating better web pages. I have also discovered the ruler tool in photoshop which is extremely handy for giving exact measurements between points. Another tool I use is the slice tool to cut any images I need.
For the layout of the site I used the 960 grid PSD. It is extremely useful to ensure a well laid out web site.
Below is an example of one of the sketches I did for the site and the design I did in photoshop.
 |
| Sketch |
 |
| Design |
Integrated CA - Introduction
Our first major CA in first year is to design a website based on a topic from the Contemporary Issues in Multimedia class. The topic is of human development and I choose to base my website on cyber bullying. In recent months it has got a lot of publicity from various deaths of young females relating to being bullied on social networks. I researched various sites about cyber bullying and found them badly designed and the information extremely hard to follow especially for kids. I want to create a clean and stylish website that presents it information in a way that is easy to understand.
Creating a web page is inexpensive so every one attempts it. This has created a wave of web pages that are badly designed and follow no structure. I wanted to a consistent site so I picked a colour scheme to use (fig 1) and also I found a font that I really liked and would suit the site (fig 2)
Having come from SCD I have experience with HTML and CSS but I have very little with the design principles of web design. In recent months I have grown a strong interest in web design and daily check out some sites for inspiration.
Creating a web page is inexpensive so every one attempts it. This has created a wave of web pages that are badly designed and follow no structure. I wanted to a consistent site so I picked a colour scheme to use (fig 1) and also I found a font that I really liked and would suit the site (fig 2)
Having come from SCD I have experience with HTML and CSS but I have very little with the design principles of web design. In recent months I have grown a strong interest in web design and daily check out some sites for inspiration.
 |
| fig1 |
 |
| fig 2 |
Subscribe to:
Posts (Atom)