Embed Size (px)
DESCRIPTION
My name is Jonas Fredin, and I work as a Front-end Developer at Creuna where my hearthstone have been the creation of Creuna’s "User Experience Process", also referred to as the "UX-process". An agile work methodology unlike the more established “Waterfall-method”. I’ve also spent the past three years challenging the very definition of what to be expected from a creative team. This talk was first held at the makingWeb_2.14 conference (http://makingweb.no) on September 25th 2014 in Oslo, Norway. It covers the collaboration between design and technology, a Graphic Designer and a Front-end Developer, and how this has become one of the strongest and most promising compositions since William Bernbach combined Copywriters and Art Directors. It's about how good chemistry can achieve minimal waste, and how fast progression and high quality is the result of working in parallels.
Citation preview
1. Click on slide2. Choose Format Background ,
3. Select Fill and choose your colour
Design and technology. A creative team on steroids.Jonas Fredin
linkedin.com/in/jonasfredin hellofredin
1. Click on slide2. Choose Format Background
3. Select Fill and choose your colour Key takeaways from last year: • Scope down • Team structure • Get a basic understanding of code • UX-process • Internal marketing • Don’t outrun your client
3
Designing in the browserDeciding
1. Click on slide2. Choose Format Background
3. Select Fill and choose your colour
Team chemistry and working in parallels
Bill Bernbach
http://pubenstock.files.wordpress.com/2011/08/billbernbach2.jpg
THE MOON?
http://i1.kym-cdn.com/photos/images/original/000/408/602/5d6.jpg
OH, YOU MEAN THAT PEACEFUL PLACE WHERE I RELAX ON WEEKENDS?
8
Idea Product
9
A B
http://imgur.com/X17puIB
Q&A 24/7
http://www.creuna.no/static/media/sizes/1000/uploads/Om-oss/Kontor/creuna_norge_6.jpg
12
EarningsWaste
13
!?z
The quick brown fox jumps over the lazy dogLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse bibendum rhoncus varius.
• Hello world • This is a list • Awesome
z
1. Click on slide2. Choose Format Background
3. Select Fill and choose your colour
Dear developers and designers: • iPhone 6: 375x667 px • iPhone 6 Plus: 414x738 px
https://twitter.com/aardrian/status/509706419143458816
• If you care about this, you’re probably doing it wrong
1. Click on slide2. Choose Format Background
3. Select Fill and choose your colour
Performance must be treated as an essential design feature. — Addy Osmani
16
10%
1. Click on slide2. Choose Format Background
3. Select Fill and choose your colour
Production philosophies
Brad Frost
https://s3.amazonaws.com/creativemornings-com/uploads/video/image/1441/banner_small_BradFrosta.jpg
19
Button @hellofredin+ =@hellofredin
Button
1. Click on slide2. Choose Format Background
3. Select Fill and choose your colour
A pattern library is a comprehensive component library which gives you total control, an excellent overview over every atom, molecule and organism in your project.
1. Click on slide2. Choose Format Background
3. Select Fill and choose your colour .article .article-header .article-header-img .article-main .article-body .article-aside .article-footer
[Add .whole to make it 100%]
22
WWACMSWYSIWYGEDWhat would a CMS WYSIWYG editor do
1. Click on slide2. Choose Format Background
3. Select Fill and choose your colour
<h3><a><span><strong>Hello world.</strong></span></a></h3> <strong><p>This is a paragraph</p></strong>
1. Click on slide2. Choose Format Background
3. Select Fill and choose your colour
@function em($target, $context: 16) { @return ($target / $context) * 1em; }
font-size: em(24);
1. Click on slide2. Choose Format Background
3. Select Fill and choose your colour
Style hierarchy: A. colors.scss, spacing.scss and
type.scss B. layout.scss C. /atoms, /molecules
https://incident57.com/codekit/images/[email protected]
1. Click on slide2. Choose Format Background
3. Select Fill and choose your colour
Final thoughts
1. Click on slide2. Choose Format Background
3. Select Fill and choose your colour
Problem solving
1. Click on slide2. Choose Format Background
3. Select Fill and choose your colour
We have to be willing to fail, to be wrong, to start over again with lessons learned. — Angela Lee Duckworth
1. Click on slide2. Choose Format Background
3. Select Fill and choose your colour
A creative team with good chemistry is far more important than every method or process available to mankind.It is here the magic happens. — Jonas Fredin / Jørn-Tore Sande
1. Click on slide2. Choose Format Background
Our five basic colours Yellow, Blue, Red, Green and Grey
Jonas Fredin
linkedin.com/in/jonasfredin hellofredin
Thank you!
