Embed Size (px)
DESCRIPTION
Citation preview
WEBSITE CREATION PROCESS
FROM THE CONCEPT AND THE PROTOTYPE TO THE COMPLETED SOLUTION
WEBSITE CREATION PROCESS
FROM THE CONCEPT AND THE PROTOTYPE TO THE COMPLETED SOLUTION
PROJECTING, DESIGNING, DRAWING, FRONT-END DEVELOPMENT, PROGRAMMING, TESTING, FILLING WITH CONTENT, LAUNCHING OF
A
FROM THE CONCEPT AND THE PROTOTYPE TO THE COMPLETED SOLUTION
PROJECTING, DESIGNING, DRAWING, FRONT-END DEVELOPMENT, PROGRAMMING, TESTING, FILLING WITH CONTENT, LAUNCHING OF
A
RESPONSIVE WEBSITE
WEBSITE CREATION PROCESS
WHAT ISRESPONSIVE DESIGN?
MOBILE WEB
MOBILE WEB
HOW TO ALLOW EASY ACCESS TO THE CONTENT FROM MULTIPLE DEVICES?
RESPONSIVE DESIGN
RESPONSIVE DESIGN
1 Front-end
RESPONSIVE DESIGN
1 Front-end 1 Back-end
RESPONSIVE DESIGN
1 Front-endEasy access
to the content from any device
1 Back-end
ELEKS 4.0
ANALYSIS
DETERMINING
DETERMINING
Issues
DETERMINING
Issues
Tasks and goals
DETERMINING
Issues
Tasks and goals
User requirements
ELEKS’ OLD SITE
Issues:
ELEKS’ OLD SITE
Issues:Complex navigationCharacterless among the competitors’ websitesDifferent from the new corporate style
ELEKS’ OLD SITE
Issues:Complex navigationCharacterless among the competitors’ websitesDifferent from the new corporate style
Tasks and goals:
ELEKS’ OLD SITE
Issues:Complex navigationCharacterless among the competitors’ websitesDifferent from the new corporate style
Tasks and goals:Increase of the website conversion
ELEKS’ OLD SITE
Issues:Complex navigationCharacterless among the competitors’ websitesDifferent from the new corporate style
Tasks and goals:Increase of the website conversion
To present oneself as an innovative and progressive development companyTo demonstrate new products and services, etc.
ELEKS’ OLD SITE
Issues:Complex navigationCharacterless among the competitors’ websitesDifferent from the new corporate style
Tasks and goals:Increase of the website conversion
To present oneself as an innovative and progressive development companyTo demonstrate new products and services, etc.
User requirements:
ELEKS’ OLD SITE
Issues:Complex navigationCharacterless among the competitors’ websitesDifferent from the new corporate style
Tasks and goals:Increase of the website conversion
To present oneself as an innovative and progressive development companyTo demonstrate new products and services, etc.
User requirements:To find out about the solutions offered by the companyTo find out more about the companyTo find out about the experience in working with certain industriesTo have a look at the testimonials of other companiesTo have a look at the completed works (Case Studies)
STARTING THE WORK
INFORMATIONAL ARCHITECTURE
THE WEBSITE STRUCTURE
THE WEBSITE STRUCTURE
Descending approach
THE WEBSITE STRUCTURE
Descending approach
THE WEBSITE STRUCTURE
Descending approach
Ascending approach
THE WEBSITE STRUCTURE
Descending approach
Ascending approach
MIX IT UP
PROTOTYPING
IDEA
CONCEPT
PROTOTYPE
IDEA
CONCEPT
PROTOTYPE
Every division is a separate
subsite
IDEA
CONCEPT
PROTOTYPE
Every division is a separate
subsite
A LEGO-like construction set
website
IDEA
CONCEPT
PROTOTYPE
Every division is a separate
subsite
A LEGO-like construction set
website
RAPID PROTOTYPING
RAPID PROTOTYPINGNO DIGITAL! ONLY ANALOG! ONLY
HARDCORE!
RAPID PROTOTYPINGNO DIGITAL! ONLY ANALOG! ONLY
HARDCORE!
Pen and paper
RAPID PROTOTYPINGNO DIGITAL! ONLY ANALOG! ONLY
HARDCORE!
WhiteboardPen and paper
RAPID PROTOTYPINGNO DIGITAL! ONLY ANALOG! ONLY
HARDCORE!
WhiteboardPen and paper Stickers
DETAILING
PAPER PROTOTYPE
PAPER PROTOTYPE
DIGITAL PROTOTYPE
User testing
PAPER PROTOTYPE
DIGITAL PROTOTYPE
INTERACTIVE PROTOTYPE
User testing
User testing
PAPER PROTOTYPE
DIGITAL PROTOTYPE
INTERACTIVE PROTOTYPE
VISUAL DESIGN
User testing
User testing
User testing
PAPER PROTOTYPE
DIGITAL PROTOTYPE
INTERACTIVE PROTOTYPE
VISUAL DESIGN
User testing
PAPER PROTOTYPE
DIGITAL PROTOTYPE
INTERACTIVE PROTOTYPE
VISUAL DESIGN
DIGITAL PROTOTYPE
INTERACTIVE PROTOTYPE
VISUAL DESIGN
DIGITAL PROTOTYPE
VISUAL DESIGN
STARTING THE WORK
STARTING THE WORK
AGAIN...
REDESIGNING THE WEBSITE
AFTER 1,5 YEARS?
LET’S MAKE ITRESPONSIVE
ALL OVER AGAIN
TASKS AND DEMANDS
TASKS AND DEMANDS
Impression + Content
WOW
TASKS AND DEMANDS
Impression + Content
Content
WOW
PROTOTYPING
PROTOTYPINGAGAIN...
PROTOTYPINGAGAIN...
THIS TIME THRICE AS
MUCH!
DEVELOPMENT APPROACHES
DEVELOPMENT APPROACHES
MOBILE FIRST
DEVELOPMENT APPROACHES
MOBILE FIRST DESKTOP FIRST
PARALLEL PROTOTYPING
PARALLEL PROTOTYPINGTURNING ON THE 3D MODE OF THINKING
PARALLEL PROTOTYPINGTURNING ON THE 3D MODE OF THINKING
DESKTOP TABLET MOBILE
LET’S THINK IT THROUGH...
THINKING THROUGH
The responsiveness
THINKING THROUGH
The responsiveness
Transformation of the text
THINKING THROUGH
The responsiveness
Transformation of the text
Transformation of the graphics
THINKING THROUGH
The responsiveness
Transformation of the text
Transformation of the graphics
Degradation
DEFINING THE BREAKPOINTS
DEFINING THE BREAKPOINTS
DEFINING THE BREAKPOINTS
320px
480px
600px
950px
DEFINING THE BREAKPOINTS
320px
480px
600px
950px
DEFINING THE BREAKPOINTS
320px
480px
600px
950px
DEFINING THE BREAKPOINTS
320px
480px
600px
950px
DEFINING THE BREAKPOINTS
320px
480px
600px
950px
VISUAL DESIGN
BEFORE RUNNING PHOTOSHOP
BEFORE RUNNING PHOTOSHOPReviewing our tasks and goals
BEFORE RUNNING PHOTOSHOPReviewing our tasks and goals
Picturing the target audience
BEFORE RUNNING PHOTOSHOPReviewing our tasks and goals
Picturing the target audience
Examining the work of others
BEFORE RUNNING PHOTOSHOPReviewing our tasks and goals
Picturing the target audience
Examining the work of others
Determining the coloring of the
website
BEFORE RUNNING PHOTOSHOPReviewing our tasks and goals
Picturing the target audience
Examining the work of others
Determining the coloring of the
website
RUNNING PHOTOSHOP
MARKING UP THE GRID
MARKING UP THE GRID
Adjusting the grid to the content
MARKING UP THE GRID
Adjusting the grid to the content
NOT THE CONTENT TO THE GRID!
MARKING UP THE GRID
Adjusting the grid to the content
NOT THE CONTENT TO THE GRID!
MARKING UP THE GRID
Adjusting the grid to the content
NOT THE CONTENT TO THE GRID!
Modualrgrid.org
AND WHAT ABOUT THE
RESPONSIVENESS?
THERE ARE OPTIONS
THERE ARE OPTIONS
BUT IT ALL DEPENDS ON THE
CONTENT
950 – 24 col 620 – 16 col 460 – 12 col 310 – 8 col
COLORING
SKETCHING THE ELEMENTS
SKETCHING THE ELEMENTS
ADDING WEIGHT TO THE ELEMENTS
SKETCHING THE ELEMENTS
WORKING WITH THE TYPOGRAPHY
ADDING WEIGHT TO THE ELEMENTS
SKETCHING THE ELEMENTS
WORKING WITH THE TYPOGRAPHY
WORKING WITH THE GRAPHICS
ADDING WEIGHT TO THE ELEMENTS
SKETCHING THE ELEMENTS
WORKING WITH THE TYPOGRAPHY
WORKING WITH THE GRAPHICS
ADDING WEIGHT TO THE ELEMENTS
ELEMENTWISE APPROACH
CREATING A LIBRARY OF ELEMENTS
THAT’S NOT ENOUGH
NOW
FUNCTIONAL
FUNCTIONAL
RELIABLE
RELIABLE
CONVENIENT
FUNCTIONAL
PLEASING
FUNCTIONAL
RELIABLE
CONVENIENT
MAKING THE WEBSITE LIVELY
Feedback to every action
MAKING THE WEBSITE LIVELY
Feedback to every action
Hover/Active for all elements
MAKING THE WEBSITE LIVELY
Feedback to every action
Hover/Active for all elements
Animation of all elements
MAKING THE WEBSITE LIVELY
Feedback to every action
Hover/Active for all elements
Animation of all elements
Animation of the content when
needed
MAKING THE WEBSITE LIVELY
Feedback to every action
Hover/Active for all elements
Animation of all elements
Animation of the content when
needed
HTML5+CSS3
MAKING THE WEBSITE LIVELY
Feedback to every action
Hover/Active for all elements
Animation of all elements
Animation of the content when
needed
HTML5+CSS3
WATCH OUT NOT TO OVERDO IT
MAKING THE WEBSITE LIVELY
DEVELOPMENT
FRONT-END
BACK-END
FRONT-ENDStarting after the prototypes
Building HTML prototypes
Working with layers
BACK-END
FRONT-ENDStarting after the prototypes
Building HTML prototypes
Working with layers
BACK-ENDStarting the early development after the prototypes
Programming after the final design
Programming simultaneously with the front-end
development
TESTING
CONDUCTING
CONDUCTING
User testing
CONDUCTING
User testing
Browser testing
CONDUCTING
User testing
Browser testing
Back-end security testing
FILLING
WHAT WE NEEDForget Lorem Ipsum! Let’s write the filler text ourselves
Thinking through the adaptation of text and images already on the prototype stage
TAKING OFF AND FLYING HIGH
www.eleks.com
