Project 2:

From tuesday I started planning the design of the site.  From looking at sites my sister liked the look of appassionata.ie, I had a fair idea of the kind of look I wanted.  I did a sketch in my folder for the desktop and then brought that into photoshop. 

 Before I started designing every part I wanted to see How the liquid style works and what problems I might come across, so I started on the header of the site as I knew how this would look, and also this would give me a better understanding of liquid and what problems I might face.  Over the weekend I made my header and the main image div underneath.  Some of this was tricker than I thought as with percentages instead of pixels there is allot more that can go wrong and more elements can be affected.

Understanding how CSS inherits for me is the key part for making a site like this, and soon into making my site I flipped my CSS upside down so the phone media query is hit first.  The reason for this was for  any CSS3 transitions or effects.  It will be easier to add them to the bottom of my CSS in the desktop media query then to remove them from the tablet and phone.

I am currently working on a separate file testing a CSS3 transition view here, which I hope to use for the desktop version.  So in the image above instead of each "occasion div" having a footer of text, when hovered over the card will flip a display the text.

Screenshots of Proposal examples:

Ca2 Project Proposals:

Proposal 1:  My first Proposal is for a florist site for my sister.  She hasn't got a site as yet but is thinking of setting one up.  As she will use this site to get work this is probably the best choice as it is a "real" site.  My sister will also work with me on colors and content so it will be more like a real-life job.  The site will be very clean with images used with some text, as images will be a better experience for the user and give a better grasp of the work she does.  As she does weddings etc.  this site has to be professional or it will defeat the purpose, so for me this site will be great experience for me.
A site my sister likes, and one which Is most like the site I plan to design is  http://www.appassionata.ie/
This site though is very dark and I plan to use brighter colors

Proposal 2:  Guitar website for complete beginners.  As a guitar player myself I found it annoying trying to find a site that actually was directed at beginners without having to sign up to lessons.  For someone not sure if guitar is for them guitar basics should be available for users to experience learning guitar, and then maybe sign up for further lessons.  allot of guitar site are very clogged up, and even though they say for beginners they seem to skim over the very basics, like parts of a guitar, and instead jump into chords and songs straight away.


Proposal 3:  Redo of Dun laoghaire town website.  Considering the amount of work done to the seafront in Dun Laoghaire, with redevelopment of the harbour, the pier, marine and the town centre itself, to try bring in tourism and promote dun laoghaire, this site is very poor.  I was shocked at this site and feel it was not designed with a target audience in mind.  The site is very messy and congested, and allot of text is hard to read.  This site could and should of made use of images of Dun Laoghaire but instead hid images behind text, and being from Dun Laoghaire I felt they missed a great and ready made solution to a good site.  I would use allot of images as viewers maybe planning a holiday or weekend away would befit more from images.

TERM 2:
Week 12 - 13

The last few weeks we started looking at responsive web design.  Responsive web design is when the site responds to the screen size and displays the webpage in a format that best suits the screen.  This is looking to take over from separate web pages for each device.  This is a better way as the web designer does not have to update separate sites, therefore the information is always the same no matter where the user views it.

We looked at two ways of  doing this in class, one was a "semi-responsive" site, where the page uses media queries and when the browser window is reduced the next CSS properties are loaded and the page"jumps" to a new style layout.

The other kind was a new Liquid style.  The liquid style uses percentage for most of its sizes and this way the site constantly changes as the window is reduced.  This way of doing it is allot trickier that the first method but the site is Fully responsive and therefore is arguably the better way to go about a responsive site.  If this method is achieved correctly it will cut down on the amount of CSS within each media query, making changes easier and a less chance of overlapping CSS or any hierarchy issues the CSS follow.

Either way responsive sites are soon to be the norm and not understanding, or not looking into this method could be a huge disadvantage going forward, and as students its up to us to be at the top of modern ways when we leave here, as this is our best chance at making it as web designers in the future.

An example I like is http://www.tilde.io/  This is a good example of a responsive site.  The key to designing a site like this is how the menu changes as the screen is reduced, and how the content changes, eg the image changes to a small circle and the text flows under it.  Parts like this are the real idea behind responsive sites and where a good design is becomes a great design.  Knowing what information to keep and what to discard, but at the same time making sure the user feels "at home" in every window size.