Studio 1 – Week 5

Adobe, Culture, Graphic Design, Layout, Studio

The weeks seem to be going by quicker and quicker. The big news last week was the Gallery Walk we had on Tuesday. So, you might be wondering what a gallery walk is. This is where we let a whole bunch of people look at all our projects and then leave feedback (both positive AND negative), ask any questions they might have and let us know what they like and don’t like. Sounds like a blast, right? It was so much fun (please note the sarcasm).

We worked pretty hard to get mockups of each deliverable done so it could all be printed out and put on display – which was really good planning on our part because then we were able to get feedback for everything. Also, it showed that we were all on a similar wavelength – all of our collateral matched and went really well together (at least I think it does).

It was pretty nerve wracking at the start and we didn’t know if we should stand with our work or go and look at some of the other groups stuff (who, by the way, all had some really cool work as well). But what to do, what to do? Go and look at other work so we don’t have to see everyone looking at our work was the winner. And then it got better.

There was a number of notes that were helpful to us and a few good points were left for us to consider. And then the feedback was somewhere along the lines of was “I like the colour scheme” and “what’s up with the watermelon” (it’s a mystery). It was a good experience mostly just because it’s good to be able to get people to look at your project, give you feedback and realise that it’s not as daunting as you might think it would be and that it’s actually a good process to go through. Although it is quite possible that if we’d gotten more negative feedback my response could have been a little bit different.

Qlogo151020

We did make a few changes after we received our feedback. We changed up our logo a little bit – made it look like someone has cut a slice from the watermelon and now it also resembles a Q. We had to change the colour a little bit – we hadn’t really used enough yellow throughout all of our deliverables so we tried to integrate it a bit more.

Other than the gallery walk there’s not much else to talk about this week. I’ve just been working away on my projects (BQAF marketing project and House 47 logo). Quick update for House 47 – it’s been narrowed down to 2 options by the client so I’m working on the typography and looking into colour (although I do have a red and white colour scheme).

These are the 2 my client has chosen:

47 Logo Options_2 47 Logo Options_1

I have also been approached about 3 more possible projects (a logo and branding for a new style of church within The Salvation Army and a poster for a school program) so I’ll keep you updated about them in the next few weeks. I’m going to have to make sure I’m managing my time really well in the next few weeks so I don’t get behind and then do some rush jobs on my work.

As always, thanks for reading and feel free to comment on anything (feedback, questions or anything you’d like me to talk about).

– KH

Web: Responsive Layouts (and some of the other ones)

Graphic Design, Layout, Web Design

And the topic for this week is…..layouts for web design and their pros and cons.

Fixed* websites have a set width and using a different screen size won’t change the layout

Pros 

  • Exact known width to work with makes it easy to customise
  • Don’t need to use min-width or max-width
  • The website design won’t change no matter what size screen you are viewing it on

Cons

  • Doesn’t work on anything 1px smaller than the exact width
  • They don’t look good on large screens, creates white space on larger resolutions
  • Can need a horizontal scrolling bar
  • The website design won’t change no matter what size screen you are viewing it on (Won’t look good on tablets or smart phones)

*Fixed is not a good option for smart phones and tablets.

1. Fixed Layout

Fluid (Liquid) websites are built using relative values (such as percentages) to allow a scaling process to occur

Pros

  • Grows and shrinks with the page
  • It’s user friendly as it will adjust to whatever screen size the user is using
  • Can eliminate horizontal scrolling bars which will improve the visual aesthetics
  • Columns are relative to one another and can scale up and down fluidly

Cons

  • Can look ridiculous on super large or super small screen
  • Less control as to what the viewer sees on different screen sizes
  • May have to set multiple widths for images, videos, etc.

2. Fluid_Liquid Layout

Adaptive websites use media queries to target specific device sizes

The site will look different depending on the device being used and has ‘breakpoints’ – the point at which the layout changes.

Pros 

  • At set browser sizes the site looks good
  • Can control what the design (content and layout) looks like
  • Less work to build and maintain

Cons 

  • Does not perfectly encapsulate the in-between sizes
  • Have to create different layouts for the different screen sizes

3. Adaptive Layout

Responsive websites is a combination of both fluid and adaptive design. It uses the relative values of a fluid website with the media queries of an adaptive one.

Pros 

  • Less work to build and maintain
  • More fluid when changing the screen size
  • Pages are designed with all layouts in mind and uses media queries to adjust for varying resolution sizes

Cons

  • Less control
  • Longer development cycle
  • Loads slower

In a situation where you had to design a new webpage, it would be more beneficial to design a responsive webpage, whereas an adaptive design would be better when converting an existing webpage into a mobile friendly version.

4. Responsive Layout

This website lets you look at these four different options and see how they’re different so follow the link and see for yourself how it works:

Liquidapsive – Web Layouts

Hope you enjoyed the read, maybe learnt something new.

– KH

Images retrieved from:

http://blog.teamtreehouse.com/which-page-layout