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.

1. Design and technology.
A creative team on steroids.
Jonas Fredin
linkedin.com/in/jonasfredin hellofredin

2. 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. 3
Deciding
Designing in the browser

4. Team chemistry
and working in
parallels

6. Bill Bernbach
http://pubenstock.files.wordpress.com/2011/08/billbernbach2.jpg

7. THE MOON?
OH, YOU MEAN THAT PEACEFUL PLACE
WHERE I RELAX ON WEEKENDS?
http://i1.kym-cdn.com/photos/images/original/000/408/602/5d6.jpg

8. 8
Idea Product

9. 9
A B

10. http://imgur.com/X17puIB

11. Q&A 24/7
http://www.creuna.no/static/media/sizes/1000/uploads/Om-oss/Kontor/creuna_norge_6.jpg

12. 12
Earnings
Waste

13. 13
!?
z
The quick brown
fox jumps over
the lazy dog
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Suspendisse bibendum
rhoncus varius.
• Hello world
• This is a list
• Awesome
z

14. Dear developers and designers:
• iPhone 6: 375x667 px
• iPhone 6 Plus: 414x738 px
• If you care about this, you’re probably
doing it wrong
https://twitter.com/aardrian/status/509706419143458816

15. Performance must be treated as
an essential design feature.
— Addy Osmani

16. 16
10%

17. Production
philosophies

18. Brad Frost
https://s3.amazonaws.com/creativemornings-com/uploads/video/image/1441/banner_small_BradFrosta.jpg

19. 19
Button + @hellofredin = @hellofredin
Button

20. 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.

21. [Add .whole to make it 100%]
.article
.article-header
.article-header-img
.article-main
.article-body
.article-aside
.article-footer

22. 22
WWACMSWYSIWYGED
What would a CMS WYSIWYG editor do

23. <h3><a><span><strong>Hello world.</strong></span></a></h3>
<strong><p>This is a paragraph</p></strong>

25. @function em($target, $context: 16) {
@return ($target / $context) * 1em;
}
font-size: em(24);

27. Style hierarchy:
A. colors.scss, spacing.scss and
type.scss
B. layout.scss
C. /atoms, /molecules

28. https://incident57.com/codekit/images/codekit-icon@2x.png

31. Final thoughts

32. Problem solving

33. We have to be willing to fail, to
be wrong, to start over again
with lessons learned.
— Angela Lee Duckworth

34. 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

35. Thank you!
Jonas Fredin
linkedin.com/in/jonasfredin hellofredin