Friday 20 February 2015

New Blood Event

Event D&AD New Blood

Create a digital experience that demystify household energy efficiency and savings. 

Note- For me it was more a chance to discuss user experience with industry professionals.

Speaker Andy Gott - Field Works

They are creatives for good - social entrepreneurs, donate by doing, do good for business/ uni.

Good for nothing event - creatives lend their skills

There is an importance with the ever changing pace of business that companies become more agile with their digital presence, they have to be able to relate and adapt to their consumers needs and wants.

Fields works focuses their work on human behaviour. This doesn't just mean creating digital that is intuitive but also understand what human barrier are in place and how to over come them.

Reactant to change
The users issues - weather/ money/ complexities of modern life. By noticing these you can spot opportunities. 
Existing patterns of behaviour

Then design interventions to alleviate and understand.

Users experience

People should want to interact with what you offer.
1. context- orginisation / purpose 2. Project Context - how does the project fit 3. Project Goals 4. Research the user - target audience and competition 5. Barriers - existing behaviours

Work with the users needs and wants: 

Can you make it worthwhile for the user?
Can we build the audience with them?

Design Principles
What's important:
- Let the principles evolve over time. ???? Ask about this?
- Scope out the possibilities, there are, figure out how to implement them.
- Distill the message, refine the outcome, make an environment users enjoy being in.
- Create inspirational design but make sure it's realistic and usable:
- Must have |  Should have | Nice to have
- Frame the principles in a human way.

Test real scenarios

Stucture and workflow.
Site map, user journey, check back on the user story, wireframe(use it for learning not designing), priorities elements over other elements ( ask about this), look and feel ( be playful, shake off research, process)

Research - user / client. Planning - structure / Design principles. Design - Scope / Structure / Wire Framing Look and feel

I asked him why there has been very little research done to look at creating responsive principles.

“The industry is heavily split between designers and developers, even if your both you are generally more of one than another, that divide between development and design might be a cause but I have no doubt the insurge of new tech will make sure new principle are explored”

You mentioned before that you should priorities some elements over others why is that? 

" that way you know what can be lost across less content rich viewports. It also helps you realise what's actually important"

From a design perpective, in terms of creating responsive mock ups do you think there is a better way do design? 

"I can only tel you what we do which is design in the browser, usually mobile first and then create alternate versions for larger viewports. But, to be honest that's just our way not the right way."


Andy - Love Digital

At love our prime concern is creating stories that are well told, no matter whether hat online or off. Each campaign should act as one. We try to find the most interesting story and tell them in the most interesting ways.

Don't search for executions, search for solutions.

Disconnect with the physical, tech is intangible.

Make it feel real to the audience, a digital space or landscape for the user to be emerged in.

Need to have a genuine impact not just for the sake of it. What ever you design must have a purpose.

Don't settle, interrogate your ideas.

Story telling is a difficult process but when you do it right is the best way to capture your audience:

Engage with the audience

Facts - are your ingredients

Stories - are your meal.

Create a brand story. Make it the truth of the brand. What's the unique selling point or the hero? 

Create multiple touch points. The more an audience is involved the more the buy into what your telling them.










Tuesday 3 February 2015

Antiphonal Geometry





"In fleshing out his new canon of web design Mark pointed out that “[c]reating layouts on the web has to be different because there are no edges. There are no ‘pages’. We’ve made them up.”

But this gives me pause. Because there are always edges. Do you scroll online? Of course you do. That’s edges for you. Don’t get me wrong. I understand what Mark’s getting at – that when we design for the web, we can’t rely on where those edges are, like a print designer can, because we don’t know what device the user has or what size their browser window will be."



"In his book The Elements of Typographic Style, Robert Bringhurst touches on how proportions in print might be considered to work:


The page is a piece of paper. It is also a visible and tangible proportion, silently sounding the thoroughbass of the book. On it lies the textblock, which must answer to the page. The two together – page and textblock – produce an antiphonal geometry.

So what does Bringhurst mean by antiphonal geometry, a phrase, as I’ve already mentioned, that marries the musical (antiphony) to the spatial (geometry)? By stating that the textblock “must answer to the page”, the implication is that the relationship between the proportions of the page and the shape of the textblock printed on it embodies a spatial call-and-response, antiphonal geometry, that can be appealing or not."



"Screens may come in many different sizes but, at least for now, they share some geometrical characteristics independent of size. Not only are they all rectangles, but those rectangles, those frames, conform to only a very few sets of proportions or aspect ratios.


  • The first of them, 2:3, shared by the iPhone up to version 4 and older iPod touches, but also devices like the Nook HD+.

  • Then there’s 3:4 (or 4:3 in landscape orientation) which covers devices like BlackBerrys, incarnations of the Kindle and, of course, the iPad and iPad mini. 4:3 is also the aspect ratio of older CRT monitors, and it’s the old PAL and NTSC TV standard.

  • At 3:5 there are many more smartphones, like the BlackBerry Z10, the Nexus 4 and the Nokia Lumia.

  • At 5:8 we’re definitely in tablet and small laptop territory, with Nexus 7 and 10 tablets, the Kindle Fire HD and MacBooks Air and Pro.

  • And finally with 9:16 we find the latest widescreen devices: iPhone 5; the Galaxy S III and Note II; many smartphones; while in landscape orientation are Microsoft’s Surface; iMacs and the Thunderbolt display; plus the Galaxy Tab and Kindle Fire. This is also the HDTV standard aspect ratio."
"Back in September last year, Paul Robert Lloyd argued very eloquently in his A List Apart article for an approach to web design based in empathy for the medium, what it is and how it works. Such an approach might yield a true web aesthetic, developing organically from the web’s unique characteristics. I hope that my ideas about antiphonal geometry partake of that spirit."

Monday 2 February 2015

Notes responsive design principle

The mediaqueri.es website offers lots of inspiration for some top-notch responsive web designs.
The mediaqueri.es website offers lots of inspiration for some top-notch responsive web designs.
Element 1 (base element) 100%

Element 2 / 3 / 4 80% of the base element

Element 5 / 6 55% of the base element

Next problem is the shift positions between portrait and landscape layout / how the elements work as a whole.

Give up control of the overall design and focus on the elements and the relationship between them.

That way no matter the size/ format of the canvas you still have rule in place that the design adhere to

https://m.youtube.com/watch?v=Epv2AYSrEhc

When passing mock ups off to developers


The idea of a style guide might work, the ability to clearly explain the importance of each element in a hierarchy, how they react to one another and how they alter dependant on canvas orientation.

There would need to be a clear, percentage based, labelling system worked out where you had a base element that set the ratios of all the other elements. 


"The Challenges a Responsive Web Brings

Working with responsive design isn’t without its challenges. First of all, there are such a multitude of devices and screen sizes that we have to cater for. From extra-large to large screens, from small to mid (and everything in between) there’s a lot to think about. And, as I’m sure you already know being a developer, working with responsive design from the technical side of things can also turn nightmare-ish and be extremely difficult to handle."
"Like with any project, the main things you need to think about with responsive web design are the content of the website, how this content fits into the design and how the content flows from page to page. You need to look at how the different design elements you have work together and ensure that everything feels cohesive and consistent.

The difference with responsive web design is that you also need to think about how all of this works from one size to another, whether that is width or height based. You need to think carefully about how all of this translates to a smaller or larger screen and how all of your design elements, your content flow and everything else works. You need to keep the experience consistent, no matter the size of the website.Maybe you could modularise the design and try and create a base element that is pertinent to the other elements"