Oc2

Yiannis Konstantakopoulos
Yiannis KonstantakopoulosDesigner, Developer, Author at porcupine colors
Σχεδιάζοντας το Web:
Web design, εφαρµογές και διαφηµίσεις
          Δίψα για λιγότερα



         Γιάννης Κωνσταντακόπουλος
            http://el.porcupine.gr/
Web design
Web design




             Web = περιεχόµενο (content)
Oc2
Web design




   Content precedes design. Design in the
   absence of content is not design, it’s
   decoration.

                                Jeffrey Zeldman
Oc2
Oc2
Web design




             Design = επικοινωνία + χρήση
Web design




Design is about communication and about use.
If something doesn't communicate it's message or is
unusable, for whatever reason, then it can benefit from
design.

                                            Mark Boulton
Oc2
Web design




      Design = οι λεπτοµέρειες που κάνουν τη διαφορά
Web design




             Grid Design
Web design




             Τυπογραφία
Web design




             Negative space
Web design




             Flash is a killer app
Web design



                   - Flash kills user’s needs
              - Flash kills usability & accessibility
                        - Flash kills SEO
             - Flash is hard to be tamed = expensive


                           Tip: Try AJAX instead
Web development
Web development




- Εφαρµογές που µπορούν να χρησιµοποιηθούν απ’ όλους
- Εφαρµογές που µπορούν να χρησιµοποιηθούν αµέσως
- Εφαρµογές που είναι δύσκολο να κάνεις λάθος
Web development




- Εφαρµογές που µπορούν να χρησιµοποιηθούν απ’ όλους
- Εφαρµογές που µπορούν να χρησιµοποιηθούν αµέσως
- Εφαρµογές που είναι δύσκολο να κάνεις λάθος
Web development




                  Your browser or OS
                   is not supported

                   (Browser: Safari
                     OS: MacOS)
Web development




                  Your browser or OS
                   is not supported

                    (Browser: IE7
                   OS: Windows XP)
Web development




Stick to what's truly essential. Good ideas can be tabled.
Take whatever you think your product should be and cut it in
half. Pare features down until you're left with only the most
essential ones. Then do it again.

                                      Getting real: The book
Web development




         Instapaper   laterloop
Oc2
Web development




                  Twitterific
Διαφηµίσεις στο Web
Διαφηµίσεις στο Web

                      Google Adwords
Διαφηµίσεις στο Web



                      Αυτό είναι όλο;




                            Όχι
Διαφηµίσεις στο Web




                      7 διαφηµίσεις
                            =
                        >50% του
                       διαθέσιµου
                          χώρου
Διαφηµίσεις στο Web




The reason why most online advertising fails is that web
users see it as little better than spam.


                                          Publishing 2.0
Διαφηµίσεις στο Web


                  Καλές Διαφηµίσεις
                                 =
                      Content (περιεχόµενο)
                                 +
            Context (ευρύτερο νοηµατικό πλαίσιο website)
Oc2
Oc2
Διαφηµίσεις στο Web

                The Deck
                A buy in The Deck reaches the
                creative community on the web in
                an uncluttered, controlled
                environment, far more valuable
                than a standard banner or a single
                text ad among dozens of others.

                The current rate for ads is $6400
                USD per ad per month and this rate
                is valid through July 31, 2008.
Σχεδιάζοντας το Web


              Design γύρω από το περιεχόµενο
                            +
           Development γύρω από τον επισκέπτη
                            +
         Διαφηµίσεις γύρω από το context & content
                            =
                       Χρήσιµο Web
Ερωτήσεις;
1 of 36

Recommended

Design sto Wordpress: Κλέβοντας λίγη από τη χάρη του Expression Engine by
Design sto Wordpress: Κλέβοντας λίγη από τη χάρη του Expression Engine Design sto Wordpress: Κλέβοντας λίγη από τη χάρη του Expression Engine
Design sto Wordpress: Κλέβοντας λίγη από τη χάρη του Expression Engine Yiannis Konstantakopoulos
1.8K views51 slides
How to use canva by
How to use canvaHow to use canva
How to use canvaRonald Rivera
118 views111 slides
Glory margareth tarongoy_rafflecopter by
Glory margareth tarongoy_rafflecopterGlory margareth tarongoy_rafflecopter
Glory margareth tarongoy_rafflecopterGlory Margareth Tarongoy
173 views113 slides
Developer Summit 2009 Your Success. Our Cloud. by
Developer Summit 2009 Your Success. Our Cloud.Developer Summit 2009 Your Success. Our Cloud.
Developer Summit 2009 Your Success. Our Cloud.Mitch Okamoto
610 views7 slides
How to set a page as home page in share point online site by
How to set a page as home page in share point online siteHow to set a page as home page in share point online site
How to set a page as home page in share point online sitePrashant Kumar Singh
124 views3 slides
How to add “add ins” on share point online or project online by
How to add “add ins” on share point online or project onlineHow to add “add ins” on share point online or project online
How to add “add ins” on share point online or project onlinePrashant Kumar Singh
130 views3 slides

More Related Content

Viewers also liked

Portfolio by
PortfolioPortfolio
Portfoliop2da4th
169 views39 slides
아름다움 by
아름다움아름다움
아름다움umiilu
200 views5 slides
PISCÓPATAS Y ASESINOS MÚLTIPLES by
PISCÓPATAS Y ASESINOS MÚLTIPLESPISCÓPATAS Y ASESINOS MÚLTIPLES
PISCÓPATAS Y ASESINOS MÚLTIPLESguestab36a16a3
258 views8 slides
圖書館利用2 by
圖書館利用2圖書館利用2
圖書館利用2guestb0727c
206 views23 slides
ValentinesBundleOrderForm by
ValentinesBundleOrderFormValentinesBundleOrderForm
ValentinesBundleOrderFormDanielle Gortsema
156 views2 slides
ESTUDIO CONTABLE by
ESTUDIO CONTABLEESTUDIO CONTABLE
ESTUDIO CONTABLEyessica
280 views5 slides

Viewers also liked(19)

Portfolio by p2da4th
PortfolioPortfolio
Portfolio
p2da4th169 views
아름다움 by umiilu
아름다움아름다움
아름다움
umiilu200 views
PISCÓPATAS Y ASESINOS MÚLTIPLES by guestab36a16a3
PISCÓPATAS Y ASESINOS MÚLTIPLESPISCÓPATAS Y ASESINOS MÚLTIPLES
PISCÓPATAS Y ASESINOS MÚLTIPLES
guestab36a16a3258 views
圖書館利用2 by guestb0727c
圖書館利用2圖書館利用2
圖書館利用2
guestb0727c206 views
ESTUDIO CONTABLE by yessica
ESTUDIO CONTABLEESTUDIO CONTABLE
ESTUDIO CONTABLE
yessica280 views
Nuevo presentación de microsoft power point by dorakamojacar
Nuevo presentación de microsoft power pointNuevo presentación de microsoft power point
Nuevo presentación de microsoft power point
dorakamojacar104 views
Estadisticas by voxdeilex
EstadisticasEstadisticas
Estadisticas
voxdeilex118 views
Migraine and its homeopathic treatment in Chembur, Mumbai, India by Shewta shetty
Migraine and its homeopathic treatment in Chembur, Mumbai, IndiaMigraine and its homeopathic treatment in Chembur, Mumbai, India
Migraine and its homeopathic treatment in Chembur, Mumbai, India
Shewta shetty115 views
Accellion TechEd - Social Media by Ryan Swindall
Accellion TechEd - Social Media Accellion TechEd - Social Media
Accellion TechEd - Social Media
Ryan Swindall354 views
BestHome_digital marketing plan 2015 [final] by Spring Bùi
BestHome_digital marketing plan 2015 [final]BestHome_digital marketing plan 2015 [final]
BestHome_digital marketing plan 2015 [final]
Spring Bùi1.5K views
YTON_Digital marketing plan by Spring Bùi
YTON_Digital marketing planYTON_Digital marketing plan
YTON_Digital marketing plan
Spring Bùi1.3K views

Similar to Oc2

Ribbit by
RibbitRibbit
RibbitYoshihito Kuranuki
568 views13 slides
20081123-web2.0class by
20081123-web2.0class20081123-web2.0class
20081123-web2.0classCharles Chuang
308 views25 slides
【12-D-6】 Silverlight によるハイグレードなLOB/BI実現のためのコンポーネント活用法 by
【12-D-6】 Silverlight によるハイグレードなLOB/BI実現のためのコンポーネント活用法【12-D-6】 Silverlight によるハイグレードなLOB/BI実現のためのコンポーネント活用法
【12-D-6】 Silverlight によるハイグレードなLOB/BI実現のためのコンポーネント活用法devsumi2009
579 views33 slides
Opencoffee VIII Grebooca by
Opencoffee VIII GreboocaOpencoffee VIII Grebooca
Opencoffee VIII Greboocadth
378 views53 slides
FOSS Business IUT by
FOSS Business IUTFOSS Business IUT
FOSS Business IUTNasser Ghanemzadeh
844 views52 slides
Revolutions Side B by
Revolutions Side BRevolutions Side B
Revolutions Side BShunsaku Kudo
512 views69 slides

Similar to Oc2(20)

【12-D-6】 Silverlight によるハイグレードなLOB/BI実現のためのコンポーネント活用法 by devsumi2009
【12-D-6】 Silverlight によるハイグレードなLOB/BI実現のためのコンポーネント活用法【12-D-6】 Silverlight によるハイグレードなLOB/BI実現のためのコンポーネント活用法
【12-D-6】 Silverlight によるハイグレードなLOB/BI実現のためのコンポーネント活用法
devsumi2009579 views
Opencoffee VIII Grebooca by dth
Opencoffee VIII GreboocaOpencoffee VIII Grebooca
Opencoffee VIII Grebooca
dth378 views
Webken 03: Project Design for Optimaizing User Experience by Nobuya Sato
Webken 03: Project Design for Optimaizing User ExperienceWebken 03: Project Design for Optimaizing User Experience
Webken 03: Project Design for Optimaizing User Experience
Nobuya Sato1.2K views
다양한 업무에 적합한 AWS의 스토리지 서비스 알아보기 – 김상현, AWS 솔루션즈 아키텍트:: AWS Builders Online Ser... by Amazon Web Services Korea
다양한 업무에 적합한 AWS의 스토리지 서비스 알아보기 – 김상현, AWS 솔루션즈 아키텍트:: AWS Builders Online Ser...다양한 업무에 적합한 AWS의 스토리지 서비스 알아보기 – 김상현, AWS 솔루션즈 아키텍트:: AWS Builders Online Ser...
다양한 업무에 적합한 AWS의 스토리지 서비스 알아보기 – 김상현, AWS 솔루션즈 아키텍트:: AWS Builders Online Ser...
웹사이트 벤치마킹의 9가지 패턴 by shannonsi
웹사이트 벤치마킹의 9가지 패턴웹사이트 벤치마킹의 9가지 패턴
웹사이트 벤치마킹의 9가지 패턴
shannonsi487 views
웹사이트 벤치마킹의 9가지 패턴 by shannonsi
웹사이트 벤치마킹의 9가지 패턴웹사이트 벤치마킹의 9가지 패턴
웹사이트 벤치마킹의 9가지 패턴
shannonsi617 views
웹사이트 벤치마킹의 9가지 패턴Pptx by shannonsi
웹사이트 벤치마킹의 9가지 패턴Pptx웹사이트 벤치마킹의 9가지 패턴Pptx
웹사이트 벤치마킹의 9가지 패턴Pptx
shannonsi1.3K views
Internet Marketing Strategy With Chris Jaeger by Chris Jaeger
Internet Marketing Strategy With Chris JaegerInternet Marketing Strategy With Chris Jaeger
Internet Marketing Strategy With Chris Jaeger
Chris Jaeger369 views
Understanding Web Services by aru85
Understanding Web ServicesUnderstanding Web Services
Understanding Web Services
aru85301 views
Understanding Web Services by aru85
Understanding Web ServicesUnderstanding Web Services
Understanding Web Services
aru85236 views
커리어특강자료_글로벌커리어 및 인공지능 커리어 by IBM HongKong
커리어특강자료_글로벌커리어 및 인공지능 커리어커리어특강자료_글로벌커리어 및 인공지능 커리어
커리어특강자료_글로벌커리어 및 인공지능 커리어
IBM HongKong359 views
網絡宣教與牧養教牧講座 by Charles Mok
網絡宣教與牧養教牧講座網絡宣教與牧養教牧講座
網絡宣教與牧養教牧講座
Charles Mok410 views
스타트업에서 데이터 분석 시작하기 – 박진우, AWS 솔루션즈 아키텍트:: AWS Builders Online Series by Amazon Web Services Korea
스타트업에서 데이터 분석 시작하기 – 박진우, AWS 솔루션즈 아키텍트:: AWS Builders Online Series 스타트업에서 데이터 분석 시작하기 – 박진우, AWS 솔루션즈 아키텍트:: AWS Builders Online Series
스타트업에서 데이터 분석 시작하기 – 박진우, AWS 솔루션즈 아키텍트:: AWS Builders Online Series
P2P Bug Tracking with SD by Jesse Vincent
P2P Bug Tracking with SDP2P Bug Tracking with SD
P2P Bug Tracking with SD
Jesse Vincent3.1K views

Recently uploaded

Sudden Deafness Design Document by
Sudden Deafness Design DocumentSudden Deafness Design Document
Sudden Deafness Design Documentwyfangherman
38 views19 slides
Benzodiazepines--Medicinal Chemistry by
Benzodiazepines--Medicinal ChemistryBenzodiazepines--Medicinal Chemistry
Benzodiazepines--Medicinal ChemistryNarminHamaaminHussen
6 views32 slides
Anti -Parkinsonian Drugs-Medicinal Chemistry by
Anti -Parkinsonian Drugs-Medicinal ChemistryAnti -Parkinsonian Drugs-Medicinal Chemistry
Anti -Parkinsonian Drugs-Medicinal ChemistryNarminHamaaminHussen
12 views36 slides
My Creative Resume DIAPOS.pptx by
My Creative Resume DIAPOS.pptxMy Creative Resume DIAPOS.pptx
My Creative Resume DIAPOS.pptxBrayanQuispe23
15 views82 slides
Antifungal agents-Medicinal Chemistry by
Antifungal agents-Medicinal Chemistry Antifungal agents-Medicinal Chemistry
Antifungal agents-Medicinal Chemistry NarminHamaaminHussen
6 views27 slides
FIESTAS DE QUITO.pdf by
FIESTAS DE QUITO.pdfFIESTAS DE QUITO.pdf
FIESTAS DE QUITO.pdfeluniversocom
11 views8 slides

Recently uploaded(20)

Sudden Deafness Design Document by wyfangherman
Sudden Deafness Design DocumentSudden Deafness Design Document
Sudden Deafness Design Document
wyfangherman38 views
StratPlanning Manual 220713.pdf by Lakewalk Media
StratPlanning Manual 220713.pdfStratPlanning Manual 220713.pdf
StratPlanning Manual 220713.pdf
Lakewalk Media15 views
217 Drive - All on upper.pptx by vidstor282
217 Drive - All on upper.pptx217 Drive - All on upper.pptx
217 Drive - All on upper.pptx
vidstor28214 views
Presentation (1).pdf by hjksa
Presentation (1).pdfPresentation (1).pdf
Presentation (1).pdf
hjksa17 views
IEC 600068-2-39 ENVIROMENT TESTING COMBINED TEMPERATURE LOW HUMIDTY.pdf by NirmalanGanapathy1
IEC 600068-2-39 ENVIROMENT TESTING COMBINED TEMPERATURE LOW HUMIDTY.pdfIEC 600068-2-39 ENVIROMENT TESTING COMBINED TEMPERATURE LOW HUMIDTY.pdf
IEC 600068-2-39 ENVIROMENT TESTING COMBINED TEMPERATURE LOW HUMIDTY.pdf
TISFLEET WEB DESIGN PROJECT by Rabius Sany
TISFLEET WEB DESIGN PROJECTTISFLEET WEB DESIGN PROJECT
TISFLEET WEB DESIGN PROJECT
Rabius Sany38 views
Scopic UX Design Test Task.pdf by Atiqur Rahaman
Scopic UX Design Test Task.pdfScopic UX Design Test Task.pdf
Scopic UX Design Test Task.pdf
Atiqur Rahaman283 views
Design System in Figma A to Z.pdf by Atiqur Rahaman
Design System in Figma A to Z.pdfDesign System in Figma A to Z.pdf
Design System in Figma A to Z.pdf
Atiqur Rahaman18 views
Designing Effective AR Experiences by Kumar Ahir
Designing Effective AR ExperiencesDesigning Effective AR Experiences
Designing Effective AR Experiences
Kumar Ahir5 views
Big Deal Curmel Moton Shirt by brandshop1
Big Deal Curmel Moton ShirtBig Deal Curmel Moton Shirt
Big Deal Curmel Moton Shirt
brandshop18 views

Oc2

  • 1. Σχεδιάζοντας το Web: Web design, εφαρµογές και διαφηµίσεις Δίψα για λιγότερα Γιάννης Κωνσταντακόπουλος http://el.porcupine.gr/
  • 3. Web design Web = περιεχόµενο (content)
  • 5. Web design Content precedes design. Design in the absence of content is not design, it’s decoration. Jeffrey Zeldman
  • 8. Web design Design = επικοινωνία + χρήση
  • 9. Web design Design is about communication and about use. If something doesn't communicate it's message or is unusable, for whatever reason, then it can benefit from design. Mark Boulton
  • 11. Web design Design = οι λεπτοµέρειες που κάνουν τη διαφορά
  • 12. Web design Grid Design
  • 13. Web design Τυπογραφία
  • 14. Web design Negative space
  • 15. Web design Flash is a killer app
  • 16. Web design - Flash kills user’s needs - Flash kills usability & accessibility - Flash kills SEO - Flash is hard to be tamed = expensive Tip: Try AJAX instead
  • 18. Web development - Εφαρµογές που µπορούν να χρησιµοποιηθούν απ’ όλους - Εφαρµογές που µπορούν να χρησιµοποιηθούν αµέσως - Εφαρµογές που είναι δύσκολο να κάνεις λάθος
  • 19. Web development - Εφαρµογές που µπορούν να χρησιµοποιηθούν απ’ όλους - Εφαρµογές που µπορούν να χρησιµοποιηθούν αµέσως - Εφαρµογές που είναι δύσκολο να κάνεις λάθος
  • 20. Web development Your browser or OS is not supported (Browser: Safari OS: MacOS)
  • 21. Web development Your browser or OS is not supported (Browser: IE7 OS: Windows XP)
  • 22. Web development Stick to what's truly essential. Good ideas can be tabled. Take whatever you think your product should be and cut it in half. Pare features down until you're left with only the most essential ones. Then do it again. Getting real: The book
  • 23. Web development Instapaper laterloop
  • 25. Web development Twitterific
  • 28. Διαφηµίσεις στο Web Αυτό είναι όλο; Όχι
  • 29. Διαφηµίσεις στο Web 7 διαφηµίσεις = >50% του διαθέσιµου χώρου
  • 30. Διαφηµίσεις στο Web The reason why most online advertising fails is that web users see it as little better than spam. Publishing 2.0
  • 31. Διαφηµίσεις στο Web Καλές Διαφηµίσεις = Content (περιεχόµενο) + Context (ευρύτερο νοηµατικό πλαίσιο website)
  • 34. Διαφηµίσεις στο Web The Deck A buy in The Deck reaches the creative community on the web in an uncluttered, controlled environment, far more valuable than a standard banner or a single text ad among dozens of others. The current rate for ads is $6400 USD per ad per month and this rate is valid through July 31, 2008.
  • 35. Σχεδιάζοντας το Web Design γύρω από το περιεχόµενο + Development γύρω από τον επισκέπτη + Διαφηµίσεις γύρω από το context & content = Χρήσιµο Web