Digital design workshop

5.  To Responsive Web Design (RWD) δεν είναι απλά μια τάση,
είναι η πραγματικότητα του ‘design expression’.
 Mε τα screens & τα resolutions να αυξάνουν συνεχώς,
τα web sites πρέπει να παρέχουν μια εξαιρετική εμπειρία
για διαφορετικές αναλύσεις.
 Fluid Grids | Fluid Images | Media Queries

9.  Metro User Interface (design)
 ‘Windows 8-style UI” όπως έλεγε η Microsoft
αλλά ο κόσμος του design δεν το υιοθέτησε.
 Το το metro grid μαζί με τα Pinterest-like grids,
έγιναν τα πιο δημοφιλή από το 2013.
 Appealing, simple aesthetics
σχεδόν κατέκλεισε όλο το Internet.

11.  Ρίζες θα βρούμε στο Swiss style design, κατα τις δεκαετίες
40-50 όπως και στη τάση του ‘minimalist design’και του
μινιμαλισμού.
 Σαν επιρροή στα δρώμενα του design
ήρθε με την Microsoft και το Metro Design (Windows 8)
και συνεχίστηκε με την Apple και το Flat design του iOs 7
το καλοκαίρι του 2013 & την Google.
 Πλακάτα χρώματα
Kαθαρή &εντυπωσιακή τυπογραφία
‘Ελειψη φωτορεαλισμού & μινιμαλιστικό στήσιμο.

14.  Parallax scrolling in web design
(previously popular in cartoons and video games)
 Play with moving backgrounds
 The parallax effect is the difference in the apparent position
of an object viewed along different lines of sight.
 Creates an engaging environment for presenting content.

16.  Με την βοήθεια της HTML 5 (12-20 Sec & backup image bg)
 Δυναμική στο όλο experience
 Ενισχύει το user engagement
and βοηθάει στην ‘επικοινωνία’ ενός
αξέχαστου & emotional μηνύματος.

17.  Emphasis on simplicity, minimalism, and intelligibility.
 Choosing fonts that are easy to read, use clean lines
and even strokes.
 Sans Serif Fonts
 Serif Fonts

18.  Clean lines, and that often have irregularly sized letters
and weights
 Coming directly from a person

19.  Mixing and matching several styles of fonts.
 The complex art of choosing the right font
is stretched to the extreme in this trend.

22.  Eνσωμάτωση των τεχνικών, μηχανισμών game
σε μια διαδικασία, μια εμπειρία
με σκοπό να την καταστήσει πιο ευχάριστη
& πιο ενδιαφέρουσα για το κοινό.
 Build Brand Loyalty
Engagement & interactivity
Emotional connection
Brand communication
Create experience - pleasure
 Μέσα από interactive εφαρμογές/μηχανισμούς:
- συγκέντρωση πόντων με κάποια ανταμοιβή
- η κατάκτηση levels
- η κατάκτηση μια θέσης στο Top 10 (score board)
- ένα badge για τη συλλογή μας (badge system)

23.  NΑ βρεις τον καλύτερο τρόπο, ώστε να κάνεις τους users
που κάνουν engage με το ‘μέσο’, να ζήσουν μία εμπειρία που
θα τους μείνει αξέχαστη & θα τους κάνει να επανέλθουν.
 Touch points:
Οποιοδήποτε σημείο δημιουργεί διασύνδεση virtual και
πραγματικού κόσμου μπορεί να είναι ένα interface για
gamification. Μια οθόνη, ένα κινητό.
Οτιδήποτε συνδεδεμένο με ένα arduino αρκεί για να δώσει
gamification στοιχεία σε μια ενέργεια.
 Online:
- Eφαρμογή σε corporate sites, e-shops, microsites
- Αλλά κυρίως στο Facebook!

24. Μarketing Gamification Cases/examples
My Starbucks Reward
- The brand used gamification tactics
to enhance the Starbuck’s experience
and to boost sales as well.
- Everytime they purchase a Starbucks product
they accumulate stars.
- There are 3 “levels” depending
on the degree of user loyalty.
Magnum Pleasure Hunt
- Gamification tactics & online game that is
reminiscent of Super Mario
- Users accumulate scores and build their rankings
as they collected bon bons.
- The game is finished as the players return back to
Magnum’s main site.
- Their bon bons turn into a Magnum Temptation bar.

25. Case: NIVEA Daily Face Care Challenge

27. > ‘virtual’ περιποίηση προσώπου
> Personalized experience
> Scoreboard & notification reminder
> 6.000 app users
> To 75%, από 3 φορές & πάνω την εβδομάδα.

28. Case: LIPOSAN Girls

30. > Γίνε 100% liposan Girl της εβδομάδας (120 πόντοι)
> 4 tasks & points (point system)
> engaging experience
> 5.000 app users
> To 80%, από 2 έως 4 εβδομάδες

31. Case: NIVEA MEN Manager

34.  Launch activation
 Εκπαίδευση / ενημέρωση
 Brand engagement
 Contests / exclusive offers
 Personalized user experience
Facebook canvas & διαστάσεις…

37. < news feed:
394x394px
best:
470 x394px

38.  Tab applications
 Full Applications
 Facebook connected microsite

39. Tab applications

40. Inspiration.Links.

42. Static Ads
Static display ads – Images.
No movement or user interaction.
Animated Ads
Flash formats with Gif backup file.
Usually limited file size & loop.
Interactive Ads
these ads include video, audio, games or even elements
that allow consumers to engage with the ad.
Expanding Ads
expanding ads increase in size when moused over or clicked.
Mobile Ads
most common are mobile banners and interstitial ads,
full-screen during the loading of a mobile page.

44. Formats:
Billboard Banner 970x250px
[ flash, rich media format, closable ]
Prestetial format 960x530px
[ flash, rich media format, closable ]
expandable > microsite
300x250px expandable
[ flash, rich media format, closable ]

45. Engagement. Creativity.
audi
[rich media format, closable ]
expandable > game
expandable > interactive

46. Inspiration.Links.

47. Video advertising.
Tο Online Video Advertising αυξάνετε πολλές φορές περισσότερο
από την TV, το Search και άλλα Digital Ad Markets.
Με μέση ανάπτυξη για τα επόμενα 5 χρόνια άνω του 30%.
Σύμφωνα με πρόσφατη μελέτη της Cisco,
μέχρι το 2017 το video θα αντιστοιχεί στο 69%
όλου του διαδικτυακού consumer traffic.
Το YouTube δέχεται πάνω από 1 δισ. μοναδικούς
επισκέπτες κάθε μήνα.

48. YouTube. Η Δυναμική του Video
Mε πάνω από 1 δισεκατομμύριο εμφανίσεις ανά ημέρα
Διαφημίσεις σε ροή Βίντεο
(In-Stream video ads)
15-30 sec. video
16:9 format
(1920x1080px ,
640x360px etc)
(In-Stream video ads)
Πάνω ή δεξιά στα results
Bid σε λέξεις-κλειδιά
In-Display Video Ads
Video που ταιριάζουν με
τις επιλογές στόχευσης

49. YouTube. Creative examples.