The document discusses how designers can start learning basic coding skills by doing design sign-offs directly in browsers using HTML and CSS. It suggests this approach will force designers to learn arguments, HTML, CSS, and possibly some JavaScript. Doing sign-offs this way shows clients the real browser experience and allows designers to take advantage of CSS features like responsive design. CSS frameworks and preprocessors can help but designers should learn real CSS first before using them.
This workshop will walk you through the design thinking process in the context of presentations. The attendees will leave with knowledge of tools and processes that they can use when creating presentations or other visual communication tools to make sure they are looking their best.
Eileen Walsh, the facilitator, has a degree in Graphic Design and a masters in Digital Media. She has worked in the area of design and digital media for the last seven years and will be sharing some of the knowledge and tools she uses when going through the design process.
This document discusses how emojis, emoticons, and text speak can be used to teach students. It provides background on the origins of emoticons in 1982 as ways to convey tone and feelings in text communications. It then suggests that with text speak and emojis, students can translate, decode, summarize, play with language, and add emotion to language. A number of websites and apps that can be used for emoji-related activities, lessons, and discussions are also listed.
Artificial intelligence (AI) is everywhere, promising self-driving cars, medical breakthroughs, and new ways of working. But how do you separate hype from reality? How can your company apply AI to solve real business problems?
Here’s what AI learnings your business should keep in mind for 2017.
"The Cutting Edge" - Palletways Business Club Presentationgeorge_edwards
George Edwards gave a talk on applying cutting-edge web development practices to the transportation and distribution industries. He discussed how his background led him to see opportunities for innovation by applying an outside perspective. At Speed Welshpool, he created all-in-house software called Transpire to put them at the forefront technologically and handle their operations. He explained concepts like web development, frameworks as tools, and why industries should utilize existing resources from the vibrant web development community instead of reinventing the wheel.
The document discusses important questions to consider before designing a website, such as the goal of the site, intended audience, how often the site will need to be updated, and accessibility requirements. Key questions include what outcomes the site aims to achieve, who it is trying to please or reach, how people will find and interact with the site, and what level of maintenance can be afforded. Understanding limitations is also important to setting appropriate expectations for the site design.
The document discusses a company called Philosophy and its approach to hiring and projects. It states that everyone at Philosophy has a desire to create amazing user experiences. The most important criteria for hiring is how well a person will fit with the existing team as talented people who fit well together produce impressive work. The company strives to assign the right people with the right skills to the right projects.
Touch Screens | The Very Expensive MistakeCasey Dubbs
With more and more companies adopting this technology, It is no doubt that touch screens are here to . But when the novelty wears off, how does your interactive application stack up? Find our from interactive experts, Horizon Display, what makes or breaks a compelling interactive customer experience. www.horizondisplay.com
--------
Horizon Display is the market leader in interactive hardware. After years of deploying some of the best interactive displays in the industry, it was only a matter of time before our repertoire expanded to include software. On a quest to find the best solution for our customers, we started developing custom applications including projects for Chevron and Yamaha. Seeing what value these successful rollouts had for our customers, Horizon made a platform that everyone could enjoy, even without the expansive budget or software programmers. Find out how fuse can make an impact for your organization.
The document discusses trends and challenges facing web designers in 2016. It identifies three "villains" to beware of: templates that lead to lack of differentiation, overwhelming content that slows down sites, and lack of accessibility. It argues instead for focusing on custom content tailored to audiences, prioritizing speed, and making sites fully inclusive and accessible. The presentation aims to help designers stand out and create better user experiences online.
This workshop will walk you through the design thinking process in the context of presentations. The attendees will leave with knowledge of tools and processes that they can use when creating presentations or other visual communication tools to make sure they are looking their best.
Eileen Walsh, the facilitator, has a degree in Graphic Design and a masters in Digital Media. She has worked in the area of design and digital media for the last seven years and will be sharing some of the knowledge and tools she uses when going through the design process.
This document discusses how emojis, emoticons, and text speak can be used to teach students. It provides background on the origins of emoticons in 1982 as ways to convey tone and feelings in text communications. It then suggests that with text speak and emojis, students can translate, decode, summarize, play with language, and add emotion to language. A number of websites and apps that can be used for emoji-related activities, lessons, and discussions are also listed.
Artificial intelligence (AI) is everywhere, promising self-driving cars, medical breakthroughs, and new ways of working. But how do you separate hype from reality? How can your company apply AI to solve real business problems?
Here’s what AI learnings your business should keep in mind for 2017.
"The Cutting Edge" - Palletways Business Club Presentationgeorge_edwards
George Edwards gave a talk on applying cutting-edge web development practices to the transportation and distribution industries. He discussed how his background led him to see opportunities for innovation by applying an outside perspective. At Speed Welshpool, he created all-in-house software called Transpire to put them at the forefront technologically and handle their operations. He explained concepts like web development, frameworks as tools, and why industries should utilize existing resources from the vibrant web development community instead of reinventing the wheel.
The document discusses important questions to consider before designing a website, such as the goal of the site, intended audience, how often the site will need to be updated, and accessibility requirements. Key questions include what outcomes the site aims to achieve, who it is trying to please or reach, how people will find and interact with the site, and what level of maintenance can be afforded. Understanding limitations is also important to setting appropriate expectations for the site design.
The document discusses a company called Philosophy and its approach to hiring and projects. It states that everyone at Philosophy has a desire to create amazing user experiences. The most important criteria for hiring is how well a person will fit with the existing team as talented people who fit well together produce impressive work. The company strives to assign the right people with the right skills to the right projects.
Touch Screens | The Very Expensive MistakeCasey Dubbs
With more and more companies adopting this technology, It is no doubt that touch screens are here to . But when the novelty wears off, how does your interactive application stack up? Find our from interactive experts, Horizon Display, what makes or breaks a compelling interactive customer experience. www.horizondisplay.com
--------
Horizon Display is the market leader in interactive hardware. After years of deploying some of the best interactive displays in the industry, it was only a matter of time before our repertoire expanded to include software. On a quest to find the best solution for our customers, we started developing custom applications including projects for Chevron and Yamaha. Seeing what value these successful rollouts had for our customers, Horizon made a platform that everyone could enjoy, even without the expansive budget or software programmers. Find out how fuse can make an impact for your organization.
The document discusses trends and challenges facing web designers in 2016. It identifies three "villains" to beware of: templates that lead to lack of differentiation, overwhelming content that slows down sites, and lack of accessibility. It argues instead for focusing on custom content tailored to audiences, prioritizing speed, and making sites fully inclusive and accessible. The presentation aims to help designers stand out and create better user experiences online.
Touch Screens | The very expensive mistakeCasey Dubbs
That seems like an odd thing to say for the leader in interactive hardware, but too often we find companies whose interactive deployments are nothing more than an expensive mistake.
Learn from the experts what makes or breaks a successful interactive touch screen experience.
Cultivating Lean Startup Teams When People Don't Know What Lean IsEmily Holmes
The document discusses simple Lean techniques that can be used to gradually shift a team's focus to users and cultivate a Lean approach when people are unfamiliar or hostile to Lean. It recommends getting out of the building to do quick user research, hosting persona and design studios to generate ideas and foster collaboration, and writing scenarios to humanize the software development process. The overall goal is to introduce Lean concepts in an interactive and relatable way to change perspectives.
This document contains the transcript from a presentation on UX in South Africa. It discusses:
1) The current state of UX in South Africa, with some organizations not understanding user needs or how to handle complexity.
2) How companies that use design strategically grow faster, and the need for growth in South Africa.
3) How the 684 attendees can help drive positive change through understanding what UX is and what needs to change.
4) Various aspects of UX like vision, strategy, interaction design and more. It emphasizes the importance of user research, prototyping and getting products in front of users.
Design, the Importance of Research, and a Call to ArmsDesignMap
Presentation for Allscripts Developer Partner conference -- Jared Spool's story about the $300m button, a baseline understanding of the difference between interaction and visual design, the importance of feed-back and feed-forward research, and some practical tools to get folks started.
Tools and Resources for Transition from Libraries to Wider Community Use Cent...CILIP
Leon Cruickshank's (Professor of Design and Creative Exchange, Lancaster University) presentation to the CILIP 2017 Conference in Manchester #CILIPConf17
This is an interactive session to introduce a collection of freely available tools and resources enabling the transition from libraries into wider community use centres. These tools were co-designed by a group of 20 librarians in Lancashire this co-design process brought together expertise from junior staff to Julie Bell, the head of libraries for Lancashire. They worked in close collaboration with design researchers from Lancaster University, funded by the Leapfrog project (www.Leapfrog.tools). Leapfrog is a £1.2million project that seeks to transform public engagement by design.
The document provides an overview of Ryo's background and career in design and prototyping. It then discusses what design and prototyping are, how they are used to develop ideas into products, and how prototypes with varying levels of fidelity can be created using tools like Figma to test ideas with users and iterate on designs. The document emphasizes that early prototypes do not need to be perfect and getting feedback is more important than the tools used.
Norville Barnes gets a chance to shine when he is promoted to CEO of his company despite only being able to poorly pitch his idea for a children's toy. His invention, the hula hoop, becomes wildly popular not through marketing but by other children seeing one child enjoying it. The speaker argues that new web technologies are like the hula hoop - they don't need marketing and will succeed if developers embrace them to build fun and engaging experiences that others will want to use. Developers should use HTML5, CSS, JavaScript and other open technologies to make the web better for all.
Future web developer, you are going to be tremendously valuablePolcode
The document discusses the large and growing field of web development. It estimates there are around 18.5 million software developers worldwide, including 11 million professionals and 7.5 million hobbyists. While this number seems large, the demand for new software development jobs each year outstrips the number of computer science graduates, leading to high salaries and demand for web developers. The document encourages the reader to consider a career in web development and provides an overview of front-end and back-end development roles as well as free learning resources for getting started.
This document summarizes a failed attempt to create an online marketplace for drugs using an Old English theme. The team tried to design a website and app called OESL that would help users order ecstasy online but realized drug dealing was illegal. They then pivoted to focus on promoting Old English language revival instead but usability testing found little interest unless combined with partying. The summary provides an overview of the project timeline, challenges faced, user research conducted, prototype designs created, and lessons learned from the experience.
This document provides information on the role and responsibilities of a Digital Marketing Manager position. The role will be responsible for managing and executing the digital marketing strategy across Europe, Middle East and Africa (EMEA). Key responsibilities include leading digital growth, delivering marketing campaigns through digital channels, managing websites and digital assets. Successful candidates will have extensive experience in digital marketing channels like search engine optimization, paid search, display advertising and email marketing. The role requires a strategic thinker who is results-driven and passionate about digital marketing and analytics.
Who is Listening, and Why? Audience, Purpose, & Presentation SkillsSarah Glova
Presentation delivered to senior design students in The Fitts Department of Industrial and Systems Engineering at NC State.
Topic: Why is it important to adapt your presentation message to fit your audience, and how can you craft a message that communicates your purpose?
6 Things to Think About Before Building Your WebsiteFloown
Building a website can be a daunting task. Without preparation even more so. Thinking about the following 6 actionable and practical topics will however make the task much easier to digest. In this Floown Slideshare we will be handling goals, design, technical solutions, styleguides, coding and debugging. 6 topics that are truly worth thinking about before building.
Get your screen together - design skills for frontend peopleSílvia Otto Sequeira
The document provides guidance for frontend developers on acquiring design skills. It emphasizes that design decisions must be made throughout product development. It encourages developers to fight perceptions that design is only the designer's job by learning basic design principles and processes. This includes conducting user research, creating mockups, implementing designs, and validating designs through usability testing to improve products based on direct user feedback.
The document describes a company's process and culture. It states that everyone at the company works directly with clients and enjoys their work. The company strives to put the right people on the right projects to produce impressive work. It aims to exceed client expectations by combining effective practices with creative problem solving.
Tomasz Urbaszek discusses lessons learned from one year of contributing to open source software projects. The presentation outlines 10 key lessons: 1) You can be young, as most open source contributors are over 40; 2) You don't need experience, as open source welcomes contributors of all backgrounds; 3) You don't need to know how to code, as there are many non-coding roles; 4) Open source is a great place to learn through feedback and without judgment of mistakes; 5) Community is more important than code, as code relies on community support; 6) Value people over code contributions, which may change; 7) Consider the big picture of stakeholders, decisions, and asking questions; 8)
The document provides information about the UK gaming industry and careers in game development. Some key points:
- The UK gaming industry generates over £4.5 million per day and employs more than 19,000 people.
- Women made up only 6% of game developers last year, despite comprising 50% of UK gamers.
- Game developer roles like concept artists can earn salaries ranging from £56,000 to over £223,000 depending on seniority and employer.
- Training and experience requirements for careers in game development include degrees in art, design or graphics and portfolio work showcasing relevant skills.
International Upcycling Research Network advisory board meeting 4Kyungeun Sung
Slides used for the International Upcycling Research Network advisory board 4 (last one). The project is based at De Montfort University in Leicester, UK, and funded by the Arts and Humanities Research Council.
Touch Screens | The very expensive mistakeCasey Dubbs
That seems like an odd thing to say for the leader in interactive hardware, but too often we find companies whose interactive deployments are nothing more than an expensive mistake.
Learn from the experts what makes or breaks a successful interactive touch screen experience.
Cultivating Lean Startup Teams When People Don't Know What Lean IsEmily Holmes
The document discusses simple Lean techniques that can be used to gradually shift a team's focus to users and cultivate a Lean approach when people are unfamiliar or hostile to Lean. It recommends getting out of the building to do quick user research, hosting persona and design studios to generate ideas and foster collaboration, and writing scenarios to humanize the software development process. The overall goal is to introduce Lean concepts in an interactive and relatable way to change perspectives.
This document contains the transcript from a presentation on UX in South Africa. It discusses:
1) The current state of UX in South Africa, with some organizations not understanding user needs or how to handle complexity.
2) How companies that use design strategically grow faster, and the need for growth in South Africa.
3) How the 684 attendees can help drive positive change through understanding what UX is and what needs to change.
4) Various aspects of UX like vision, strategy, interaction design and more. It emphasizes the importance of user research, prototyping and getting products in front of users.
Design, the Importance of Research, and a Call to ArmsDesignMap
Presentation for Allscripts Developer Partner conference -- Jared Spool's story about the $300m button, a baseline understanding of the difference between interaction and visual design, the importance of feed-back and feed-forward research, and some practical tools to get folks started.
Tools and Resources for Transition from Libraries to Wider Community Use Cent...CILIP
Leon Cruickshank's (Professor of Design and Creative Exchange, Lancaster University) presentation to the CILIP 2017 Conference in Manchester #CILIPConf17
This is an interactive session to introduce a collection of freely available tools and resources enabling the transition from libraries into wider community use centres. These tools were co-designed by a group of 20 librarians in Lancashire this co-design process brought together expertise from junior staff to Julie Bell, the head of libraries for Lancashire. They worked in close collaboration with design researchers from Lancaster University, funded by the Leapfrog project (www.Leapfrog.tools). Leapfrog is a £1.2million project that seeks to transform public engagement by design.
The document provides an overview of Ryo's background and career in design and prototyping. It then discusses what design and prototyping are, how they are used to develop ideas into products, and how prototypes with varying levels of fidelity can be created using tools like Figma to test ideas with users and iterate on designs. The document emphasizes that early prototypes do not need to be perfect and getting feedback is more important than the tools used.
Norville Barnes gets a chance to shine when he is promoted to CEO of his company despite only being able to poorly pitch his idea for a children's toy. His invention, the hula hoop, becomes wildly popular not through marketing but by other children seeing one child enjoying it. The speaker argues that new web technologies are like the hula hoop - they don't need marketing and will succeed if developers embrace them to build fun and engaging experiences that others will want to use. Developers should use HTML5, CSS, JavaScript and other open technologies to make the web better for all.
Future web developer, you are going to be tremendously valuablePolcode
The document discusses the large and growing field of web development. It estimates there are around 18.5 million software developers worldwide, including 11 million professionals and 7.5 million hobbyists. While this number seems large, the demand for new software development jobs each year outstrips the number of computer science graduates, leading to high salaries and demand for web developers. The document encourages the reader to consider a career in web development and provides an overview of front-end and back-end development roles as well as free learning resources for getting started.
This document summarizes a failed attempt to create an online marketplace for drugs using an Old English theme. The team tried to design a website and app called OESL that would help users order ecstasy online but realized drug dealing was illegal. They then pivoted to focus on promoting Old English language revival instead but usability testing found little interest unless combined with partying. The summary provides an overview of the project timeline, challenges faced, user research conducted, prototype designs created, and lessons learned from the experience.
This document provides information on the role and responsibilities of a Digital Marketing Manager position. The role will be responsible for managing and executing the digital marketing strategy across Europe, Middle East and Africa (EMEA). Key responsibilities include leading digital growth, delivering marketing campaigns through digital channels, managing websites and digital assets. Successful candidates will have extensive experience in digital marketing channels like search engine optimization, paid search, display advertising and email marketing. The role requires a strategic thinker who is results-driven and passionate about digital marketing and analytics.
Who is Listening, and Why? Audience, Purpose, & Presentation SkillsSarah Glova
Presentation delivered to senior design students in The Fitts Department of Industrial and Systems Engineering at NC State.
Topic: Why is it important to adapt your presentation message to fit your audience, and how can you craft a message that communicates your purpose?
6 Things to Think About Before Building Your WebsiteFloown
Building a website can be a daunting task. Without preparation even more so. Thinking about the following 6 actionable and practical topics will however make the task much easier to digest. In this Floown Slideshare we will be handling goals, design, technical solutions, styleguides, coding and debugging. 6 topics that are truly worth thinking about before building.
Get your screen together - design skills for frontend peopleSílvia Otto Sequeira
The document provides guidance for frontend developers on acquiring design skills. It emphasizes that design decisions must be made throughout product development. It encourages developers to fight perceptions that design is only the designer's job by learning basic design principles and processes. This includes conducting user research, creating mockups, implementing designs, and validating designs through usability testing to improve products based on direct user feedback.
The document describes a company's process and culture. It states that everyone at the company works directly with clients and enjoys their work. The company strives to put the right people on the right projects to produce impressive work. It aims to exceed client expectations by combining effective practices with creative problem solving.
Tomasz Urbaszek discusses lessons learned from one year of contributing to open source software projects. The presentation outlines 10 key lessons: 1) You can be young, as most open source contributors are over 40; 2) You don't need experience, as open source welcomes contributors of all backgrounds; 3) You don't need to know how to code, as there are many non-coding roles; 4) Open source is a great place to learn through feedback and without judgment of mistakes; 5) Community is more important than code, as code relies on community support; 6) Value people over code contributions, which may change; 7) Consider the big picture of stakeholders, decisions, and asking questions; 8)
The document provides information about the UK gaming industry and careers in game development. Some key points:
- The UK gaming industry generates over £4.5 million per day and employs more than 19,000 people.
- Women made up only 6% of game developers last year, despite comprising 50% of UK gamers.
- Game developer roles like concept artists can earn salaries ranging from £56,000 to over £223,000 depending on seniority and employer.
- Training and experience requirements for careers in game development include degrees in art, design or graphics and portfolio work showcasing relevant skills.
Similar to Designers shouldn't code - The wrong answer to the right question (20)
International Upcycling Research Network advisory board meeting 4Kyungeun Sung
Slides used for the International Upcycling Research Network advisory board 4 (last one). The project is based at De Montfort University in Leicester, UK, and funded by the Arts and Humanities Research Council.
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page pmgdscunsri
Figma is a cloud-based design tool widely used by designers for prototyping, UI/UX design, and real-time collaboration. With features such as precision pen tools, grid system, and reusable components, Figma makes it easy for teams to work together on design projects. Its flexibility and accessibility make Figma a top choice in the digital age.
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANEFebless Hernane
CapCut is an easy-to-use video editing app perfect for beginners. To start, download and open CapCut on your phone. Tap "New Project" and select the videos or photos you want to edit. You can trim clips by dragging the edges, add text by tapping "Text," and include music by selecting "Audio." Enhance your video with filters and effects from the "Effects" menu. When you're happy with your video, tap the export button to save and share it. CapCut makes video editing simple and fun for everyone!
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...Designforuminternational
India’s architectural landscape is a vibrant tapestry that weaves together the country's rich cultural heritage and its modern aspirations. From majestic historical structures to cutting-edge contemporary designs, the work of Indian architects is celebrated worldwide. Among the many firms shaping this dynamic field, Design Forum International stands out as a leader in innovative and sustainable architecture. This blog explores some of the best Indian architects, highlighting their contributions and showcasing the most famous architects in India.
Architectural and constructions management experience since 2003 including 18 years located in UAE.
Coordinate and oversee all technical activities relating to architectural and construction projects,
including directing the design team, reviewing drafts and computer models, and approving design
changes.
Organize and typically develop, and review building plans, ensuring that a project meets all safety and
environmental standards.
Prepare feasibility studies, construction contracts, and tender documents with specifications and
tender analyses.
Consulting with clients, work on formulating equipment and labor cost estimates, ensuring a project
meets environmental, safety, structural, zoning, and aesthetic standards.
Monitoring the progress of a project to assess whether or not it is in compliance with building plans
and project deadlines.
Attention to detail, exceptional time management, and strong problem-solving and communication
skills are required for this role.
Fonts play a crucial role in both User Interface (UI) and User Experience (UX) design. They affect readability, accessibility, aesthetics, and overall user perception.
11. ie d
r
ar ds
M
ki
2 Freelance Creative Technology Director
Mathias Hellquist
Background:
12. ie d
r
ar ds
M
ki
2 Freelance Creative Technology Director
Mathias Hellquist
Halo
ge
n
Background:Active online (professionally)
Pro
since -93, working in several
fer
re
o web agencies in Stockholm, Hamburg and
Da
a
I-D Me d i
London (where I lived 11 years, 1999-2010)
Projecto
r
lk E
Catwa
do
13. ie d
r
ar ds
M
ki
2 Freelance Creative Technology Director
Mathias Hellquist
Halo
ge
n
Background:Active online (professionally)
Pro
since -93, working in several
fer
re
o web agencies in Stockholm, Hamburg and
Da
a
I-D Me d i
London (where I lived 11 years, 1999-2010)
Projecto
r
lk E
Catwa
do
In London I worked with solutions and
strategy for clients like Apple, Microsoft,
SonyEricsson, Unilever, Barclays, RBS etc.
Mem
ber o
co m
f
pany
boar
d
s
than 30 project
More
r
UK Public Secto
for the
14. ie d
r
ar ds
M
ki
2 Freelance Creative Technology Director
Mathias Hellquist
Halo
ge
n
Background:Active online (professionally)
Pro
since -93, working in several
fer
re
o web agencies in Stockholm, Hamburg and
Da
a
I-D Me d i
London (where I lived 11 years, 1999-2010)
Projecto
r
lk E
Catwa
do
Ag e
ncy
Of
The
Year
4 ti
mes
os t
m
on
l
ve w
Ha
ona
nati
nter
i
s at
d
war
a
e
onc
ea s t
l
In London I worked with solutions and
strategy for clients like Apple, Microsoft,
SonyEricsson, Unilever, Barclays, RBS etc.
Two of the projects I’ve worked on were
judged Top10 Campaigns Of The Decade.
Mem
ber o
co m
f
pany
boar
d
s
than 30 project
More
r
UK Public Secto
for the
15. ie d
r
ar ds
M
ki
2 Freelance Creative Technology Director
Mathias Hellquist
Halo
ge
n
Background:Active online (professionally)
Pro
since -93, working in several
fer
re
o web agencies in Stockholm, Hamburg and
Da
a
I-D Me d i
London (where I lived 11 years, 1999-2010)
Projecto
r
lk E
Catwa
do
Ag e
ncy
Of
The
Year
4 ti
mes
In London I worked with solutions and
strategy for clients like Apple, Microsoft,
SonyEricsson, Unilever, Barclays, RBS etc.
Two of the projects I’ve worked on were
judged Top10 Campaigns Of The Decade.
os t
m
on
l Those were for Mini Cooper and Axe/Lynx.
e w
Hav
iona
rnat
Mem
inte
at
ber o
s
ds
r
co m
f
than 30 project
More
awa
pany
e
r
onc
boar
t
UK Public Secto
d
for the
leas
19. Mathias Hellquist
Freelance Creative Technology Director
Background: Back in Sweden I worked for
Tieto 3 years and later for Society46
At Tieto I was running a department
called Service Design & User Experience
Clients like SVT, Entercard, Fortum etc
20. Mathias Hellquist
Freelance Creative Technology Director
Background: Back in Sweden I worked for
Tieto 3 years and later for Society46
At Tieto I was running a department
called Service Design & User Experience
Clients like SVT, Entercard, Fortum etc
At Society46 we worked with clients like
Duracell, Red Bull and Pepsi
21. Mathias Hellquist
Freelance Creative Technology Director
Background: Back in Sweden I worked for
Tieto 3 years and later for Society46
At Tieto I was running a department
called Service Design & User Experience
Clients like SVT, Entercard, Fortum etc
At Society46 we worked with clients like
Duracell, Red Bull and Pepsi
Loves:
22. Mathias Hellquist
Freelance Creative Technology Director
Dr
aw
in
g
Background: Back in Sweden I worked for
Tieto 3 years and later for Society46
on
s w M
At Tieto I was running a department
S
Ha
kcalled Service Design & User Experience
oc
R
Clients like SVT, Entercard, Fortum etc
Deat
h Me
tal At Society46 we worked with clients like
Duracell, Red Bull and Pepsi
rs
ita
u
Loves: Technology, amazing end user experiences,
G
Social Media (used right), Accessibility,
Photog
rap hy
API’s, Open Source and visionary thinking.
My family
Fo
o
d
G
am
ng
i
RP
G
’s
33. How to eat an elephant
one bite at the time
No one knows ALL that stuff!
34. How to eat an elephant
one bite at the time
No one knows ALL that stuff!
Start with what is close to you
35. How to eat an elephant
one bite at the time
No one knows ALL that stuff!
Start with what is close to you
Having an understanding of and
knowing it isn’t the same thing
36. How to eat an elephant
one bite at the time
No one knows ALL that stuff!
Start with what is close to you
Having an understanding of and
knowing it isn’t the same thing
Remember:
37. How to eat an elephant
one bite at the time
No one knows ALL that stuff!
Start with what is close to you
Having an understanding of and
knowing it isn’t the same thing
Remember:
“Good Design”
is soft and
subjective
38. How to eat an elephant
one bite at the time
No one knows ALL that stuff!
Start with what is close to you
Having an understanding of and
knowing it isn’t the same thing
Remember:
“Good Design”
is soft and
subjective
Code is
hard and
binary
39. How to eat an elephant
one bite at the time
No one knows ALL that stuff!
Start with what is close to you
Having an understanding of and
knowing it isn’t the same thing
Remember:
“Good Design”
is soft and
subjective
Code is
hard and
binary
You CAN
design with
code!
42. How to eat an elephant
one bite at the time
Suggested Goal:
43. How to eat an elephant
one bite at the time
Suggested Goal:
Do the design sign-offs with
your clients in a browser
44. How to eat an elephant
one bite at the time
Suggested Goal:
Do the design sign-offs with
your clients in a browser
This should mean it probably looks
different in the different browsers
on the different platforms…
45. How to eat an elephant
one bite at the time
Suggested Goal:
Do the design sign-offs with
your clients in a browser
This should mean it probably looks
different in the different browsers
on the different platforms…
…but as that fact is the reality
already today, it should be fine.
46. How to eat an elephant
one bite at the time
Suggested Goal:
Do the design sign-offs with
your clients in a browser
This should mean it probably looks
different in the different browsers
on the different platforms…
…but as that fact is the reality
already today, it should be fine.
Only now it will be sold in right!
47. How to eat an elephant
one bite at the time
Suggested Goal:
Do the design sign-offs with
your clients in a browser
48. How to eat an elephant
one bite at the time
Suggested Goal:
Do the design sign-offs with
your clients in a browser
49. How to eat an elephant
one bite at the time
Suggested Goal:
Do the design sign-offs with
your clients in a browser
It will force you to learn:
50. How to eat an elephant
one bite at the time
Suggested Goal:
Do the design sign-offs with
your clients in a browser
It will force you to learn:
ents
rgum
les a
Sa
51. How to eat an elephant
one bite at the time
Suggested Goal:
Do the design sign-offs with
your clients in a browser
It will force you to learn:
ents
rgum
les a
Sa
HTML
52. How to eat an elephant
one bite at the time
Suggested Goal:
Do the design sign-offs with
your clients in a browser
It will force you to learn:
ents
rgum
les a
Sa
HTML
CS S
53. How to eat an elephant
one bite at the time
Suggested Goal:
Do the design sign-offs with
your clients in a browser
It will force you to learn:
ents
HTML
rgum
CS S
es a
Sal
Possibly even a little JavaScript!
54. How to eat an elephant
one bite at the time
Suggested Goal:
Do the design sign-offs with
your clients in a browser
It will force you to learn:
ents
HTML
rgum
CS S
es a
Sal
Possibly even a little JavaScript!
The main thing we are after is CSS
…and HTML
57. Benefits with HTML/CSS sign-off
“Graphic design tools are
bringing a knife to a gun fight”
- Andy Clarke
58. Benefits with HTML/CSS sign-off
“Graphic design tools are
bringing a knife to a gun fight”
- Andy Clarke
Percentage-based layouts
Media Queries
Native form element styling
Font rendering (and web fonts)
Flexible leading and measure
Browsers CSS capabilities
Pseudo-classes
CSS3 ligatures and swashes
CSS3 animations
CSS3 transitions
59. Benefits with HTML/CSS sign-off
“Graphic design tools are
bringing a knife to a gun fight”
- Andy Clarke
Photos
Percentage-based layouts
hop
where
Media Queries
the
live w
Native form element styling
hen
Font rendering (and web fonts)
Flexible leading and measure
Browsers CSS capabilities
Pseudo-classes
CSS3 ligatures and swashes
CSS3 animations
CSS3 transitions
probab
ly isn’t
pro du
ct w il
l
yo u go
live
60. Benefits with HTML/CSS sign-off
“Graphic design tools are
bringing a knife to a gun fight”
- Andy Clarke
Photos
Percentage-based layouts
hop
where
Media Queries
the
live w
Native form element styling
hen
probab
ly isn’t
pro du
ct w il
l
yo u go
live
Font rendering (and web fonts)
Flexible leading and measure
drive
Browsers CSS capabilities
o tes t ing.
ant t e buy
o u w efor
Y
Pseudo-classes
car b
a
CSS3 ligatures and swashes
thes
r y clo
ally t uying
CSS3 animations
usu
Yo u
ore b
n bef
CSS3 transitions
o
93. CSS Frameworks
Go ahead, use them (carefully)
Bootstrap
LESS
Foundation
SASS
CSS Pre-Processors
PureCSS
SMACSS
94. CSS Frameworks
Go ahead, use them (carefully)
Bootstrap
LESS
Foundation
SASS
PureCSS
SMACSS
CSS Pre-Processors
Basically CSS but handles variables
95. CSS Frameworks
Go ahead, use them (carefully)
Bootstrap
LESS
Foundation
SASS
PureCSS
SMACSS
CSS Pre-Processors
Basically CSS but handles variables
You should learn “real” CSS first
96. CSS Frameworks
Go ahead, use them (carefully)
Bootstrap
LESS
Foundation
SASS
PureCSS
SMACSS
CSS Pre-Processors
Basically CSS but handles variables
You should learn “real” CSS first
JavaScript & jQuery
97. CSS Frameworks
Go ahead, use them (carefully)
Bootstrap
LESS
Foundation
SASS
PureCSS
SMACSS
CSS Pre-Processors
Basically CSS but handles variables
You should learn “real” CSS first
JavaScript & jQuery
jQuery is awesome. Include it.
98. CSS Frameworks
Go ahead, use them (carefully)
Bootstrap
LESS
Foundation
SASS
PureCSS
SMACSS
CSS Pre-Processors
Basically CSS but handles variables
You should learn “real” CSS first
JavaScript & jQuery
jQuery is awesome. Include it.
To use it fully you need
to learn more JavaScript
102. More Good links
CSS Zen Garden
1 HTML file, 100’s of CSS designs
GistBox
Save your code snippets centrally
103. More Good links
CSS Zen Garden
1 HTML file, 100’s of CSS designs
GistBox
Save your code snippets centrally
CloudCannon
Dropbox based CMS (no database)
104. More Good links
CSS Zen Garden
1 HTML file, 100’s of CSS designs
GistBox
Save your code snippets centrally
CloudCannon
Dropbox based CMS (no database)
Kirby
Excellent PHP based CMS (no database)
105. More Good links
CSS Zen Garden
1 HTML file, 100’s of CSS designs
GistBox
Save your code snippets centrally
CloudCannon
Dropbox based CMS (no database)
Kirby
Excellent PHP based CMS (no database)
Hammer for Mac
Link HTML pages together as in a CMS (no database)
106. More Good links
CSS Zen Garden
1 HTML file, 100’s of CSS designs
GistBox
Save your code snippets centrally
CloudCannon
Dropbox based CMS (no database)
Kirby
Excellent PHP based CMS (no database)
Hammer for Mac
Link HTML pages together as in a CMS (no database)
YQL
For the adventurous - anything on Internet as a database
107. More Good links
CSS Zen Garden
1 HTML file, 100’s of CSS designs
GistBox
Save your code snippets centrally
CloudCannon
Dropbox based CMS (no database)
Kirby
Excellent PHP based CMS (no database)
Hammer for Mac
Link HTML pages together as in a CMS (no database)
YQL
For the adventurous - anything on Internet as a database
BugHerd
Visual bug tracking (for your browser based creation)
108. More Good links
CSS Zen Garden
1 HTML file, 100’s of CSS designs
GistBox
Save your code snippets centrally
CloudCannon
Dropbox based CMS (no database)
Kirby
Excellent PHP based CMS (no database)
Hammer for Mac
Link HTML pages together as in a CMS (no database)
YQL
For the adventurous - anything on Internet as a database
BugHerd
Visual bug tracking (for your browser based creation)
Marvel
Create prototypes from PSD’s via DropBox
113. Fittext
More Good links
jQuery plug-in - Excellent for headlines
BigText
jQuery plug-in - Excellent for headlines
Lettering
jQuery plug-in - Excellent for radical typography
114. Fittext
More Good links
jQuery plug-in - Excellent for headlines
BigText
jQuery plug-in - Excellent for headlines
Lettering
jQuery plug-in - Excellent for radical typography
KernJs
Bookmarklet - Plug-in to Lettering (above)
115. Fittext
More Good links
jQuery plug-in - Excellent for headlines
BigText
jQuery plug-in - Excellent for headlines
Lettering
jQuery plug-in - Excellent for radical typography
KernJs
Bookmarklet - Plug-in to Lettering (above)
Responsive IMG
jQuery plug-in (needs PHP) - for resizing images
116. Fittext
More Good links
jQuery plug-in - Excellent for headlines
BigText
jQuery plug-in - Excellent for headlines
Lettering
jQuery plug-in - Excellent for radical typography
KernJs
Bookmarklet - Plug-in to Lettering (above)
Responsive IMG
jQuery plug-in (needs PHP) - for resizing images
HTML5
Dictionary of all HTML5 elements and how to use them
117. Fittext
More Good links
jQuery plug-in - Excellent for headlines
BigText
jQuery plug-in - Excellent for headlines
Lettering
jQuery plug-in - Excellent for radical typography
KernJs
Bookmarklet - Plug-in to Lettering (above)
Responsive IMG
jQuery plug-in (needs PHP) - for resizing images
HTML5
Dictionary of all HTML5 elements and how to use them
Strut
Make HTML5/CSS3 Prezi like presentations
118. Fittext
More Good links
jQuery plug-in - Excellent for headlines
BigText
jQuery plug-in - Excellent for headlines
Lettering
jQuery plug-in - Excellent for radical typography
KernJs
Bookmarklet - Plug-in to Lettering (above)
Responsive IMG
jQuery plug-in (needs PHP) - for resizing images
HTML5
Dictionary of all HTML5 elements and how to use them
Strut
Make HTML5/CSS3 Prezi like presentations
Trent Waltons blog
Clever use of Lettering, Fittext and CSS. Good read too.
121. …but wait, there is more!
A List Apart
THE online magazine for web design/development
122. …but wait, there is more!
A List Apart
THE online magazine for web design/development
Zeldman
The man, the myth, the legend, the concept. ALA founder.
123. …but wait, there is more!
A List Apart
THE online magazine for web design/development
Zeldman
The man, the myth, the legend, the concept. ALA founder.
Sidebar
5 daily links of excellence for designers/developers
124. …but wait, there is more!
A List Apart
THE online magazine for web design/development
Zeldman
The man, the myth, the legend, the concept. ALA founder.
Sidebar
5 daily links of excellence for designers/developers
CSS Mac Plus
How-to on building a Mac Plus in CSS
127. Mathias Hellquist
Freelance Creative Technology Director
Email: mathias@imakethingswork.com
Twitter: @hellquist
About me: http:/
/about.me/hellquist
128. Mathias Hellquist
Freelance Creative Technology Director
Email: mathias@imakethingswork.com
Twitter: @hellquist
About me: http:/
/about.me/hellquist
Final Thought
I have yet to meet someone who
became less good at what they do
from gaining more knowledge.
!
The opposite I have seen many times though.
Try learning (at least) one new thing every day.