Eleks' Website Creation Process
description
Transcript of Eleks' Website Creation Process
![Page 1: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/1.jpg)
WEBSITE CREATION PROCESS
FROM THE CONCEPT AND THE PROTOTYPE TO THE COMPLETED SOLUTION
![Page 2: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/2.jpg)
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
![Page 3: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/3.jpg)
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
![Page 4: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/4.jpg)
WHAT ISRESPONSIVE DESIGN?
![Page 5: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/5.jpg)
![Page 6: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/6.jpg)
![Page 7: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/7.jpg)
![Page 8: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/8.jpg)
![Page 9: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/9.jpg)
MOBILE WEB
![Page 10: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/10.jpg)
MOBILE WEB
HOW TO ALLOW EASY ACCESS TO THE CONTENT FROM MULTIPLE DEVICES?
![Page 11: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/11.jpg)
RESPONSIVE DESIGN
![Page 12: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/12.jpg)
RESPONSIVE DESIGN
1 Front-end
![Page 13: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/13.jpg)
RESPONSIVE DESIGN
1 Front-end 1 Back-end
![Page 14: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/14.jpg)
RESPONSIVE DESIGN
1 Front-endEasy access
to the content from any device
1 Back-end
![Page 15: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/15.jpg)
ELEKS 4.0
![Page 16: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/16.jpg)
ANALYSIS
![Page 17: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/17.jpg)
DETERMINING
![Page 18: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/18.jpg)
DETERMINING
Issues
![Page 19: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/19.jpg)
DETERMINING
Issues
Tasks and goals
![Page 20: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/20.jpg)
DETERMINING
Issues
Tasks and goals
User requirements
![Page 21: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/21.jpg)
ELEKS’ OLD SITE
Issues:
![Page 22: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/22.jpg)
ELEKS’ OLD SITE
Issues:Complex navigationCharacterless among the competitors’ websitesDifferent from the new corporate style
![Page 23: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/23.jpg)
ELEKS’ OLD SITE
Issues:Complex navigationCharacterless among the competitors’ websitesDifferent from the new corporate style
Tasks and goals:
![Page 24: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/24.jpg)
ELEKS’ OLD SITE
Issues:Complex navigationCharacterless among the competitors’ websitesDifferent from the new corporate style
Tasks and goals:Increase of the website conversion
![Page 25: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/25.jpg)
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.
![Page 26: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/26.jpg)
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:
![Page 27: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/27.jpg)
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)
![Page 28: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/28.jpg)
STARTING THE WORK
![Page 29: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/29.jpg)
INFORMATIONAL ARCHITECTURE
![Page 30: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/30.jpg)
THE WEBSITE STRUCTURE
![Page 31: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/31.jpg)
THE WEBSITE STRUCTURE
Descending approach
![Page 32: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/32.jpg)
THE WEBSITE STRUCTURE
Descending approach
![Page 33: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/33.jpg)
THE WEBSITE STRUCTURE
Descending approach
Ascending approach
![Page 34: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/34.jpg)
THE WEBSITE STRUCTURE
Descending approach
Ascending approach
![Page 35: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/35.jpg)
MIX IT UP
![Page 36: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/36.jpg)
![Page 37: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/37.jpg)
PROTOTYPING
![Page 38: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/38.jpg)
IDEA
CONCEPT
PROTOTYPE
![Page 39: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/39.jpg)
IDEA
CONCEPT
PROTOTYPE
Every division is a separate
subsite
![Page 40: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/40.jpg)
IDEA
CONCEPT
PROTOTYPE
Every division is a separate
subsite
A LEGO-like construction set
website
![Page 41: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/41.jpg)
IDEA
CONCEPT
PROTOTYPE
Every division is a separate
subsite
A LEGO-like construction set
website
![Page 42: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/42.jpg)
RAPID PROTOTYPING
![Page 43: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/43.jpg)
RAPID PROTOTYPINGNO DIGITAL! ONLY ANALOG! ONLY
HARDCORE!
![Page 44: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/44.jpg)
RAPID PROTOTYPINGNO DIGITAL! ONLY ANALOG! ONLY
HARDCORE!
Pen and paper
![Page 45: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/45.jpg)
RAPID PROTOTYPINGNO DIGITAL! ONLY ANALOG! ONLY
HARDCORE!
WhiteboardPen and paper
![Page 46: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/46.jpg)
RAPID PROTOTYPINGNO DIGITAL! ONLY ANALOG! ONLY
HARDCORE!
WhiteboardPen and paper Stickers
![Page 47: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/47.jpg)
![Page 48: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/48.jpg)
DETAILING
![Page 49: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/49.jpg)
PAPER PROTOTYPE
![Page 50: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/50.jpg)
PAPER PROTOTYPE
DIGITAL PROTOTYPE
User testing
![Page 51: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/51.jpg)
PAPER PROTOTYPE
DIGITAL PROTOTYPE
INTERACTIVE PROTOTYPE
User testing
User testing
![Page 52: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/52.jpg)
PAPER PROTOTYPE
DIGITAL PROTOTYPE
INTERACTIVE PROTOTYPE
VISUAL DESIGN
User testing
User testing
User testing
![Page 53: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/53.jpg)
PAPER PROTOTYPE
DIGITAL PROTOTYPE
INTERACTIVE PROTOTYPE
VISUAL DESIGN
User testing
![Page 54: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/54.jpg)
PAPER PROTOTYPE
DIGITAL PROTOTYPE
INTERACTIVE PROTOTYPE
VISUAL DESIGN
![Page 55: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/55.jpg)
DIGITAL PROTOTYPE
INTERACTIVE PROTOTYPE
VISUAL DESIGN
![Page 56: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/56.jpg)
DIGITAL PROTOTYPE
VISUAL DESIGN
![Page 57: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/57.jpg)
![Page 58: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/58.jpg)
![Page 59: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/59.jpg)
![Page 60: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/60.jpg)
STARTING THE WORK
![Page 61: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/61.jpg)
STARTING THE WORK
AGAIN...
![Page 62: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/62.jpg)
![Page 63: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/63.jpg)
REDESIGNING THE WEBSITE
AFTER 1,5 YEARS?
![Page 64: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/64.jpg)
![Page 65: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/65.jpg)
LET’S MAKE ITRESPONSIVE
![Page 66: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/66.jpg)
ALL OVER AGAIN
![Page 67: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/67.jpg)
TASKS AND DEMANDS
![Page 68: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/68.jpg)
TASKS AND DEMANDS
Impression + Content
WOW
![Page 69: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/69.jpg)
TASKS AND DEMANDS
Impression + Content
Content
WOW
![Page 70: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/70.jpg)
PROTOTYPING
![Page 71: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/71.jpg)
PROTOTYPINGAGAIN...
![Page 72: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/72.jpg)
PROTOTYPINGAGAIN...
THIS TIME THRICE AS
MUCH!
![Page 73: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/73.jpg)
DEVELOPMENT APPROACHES
![Page 74: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/74.jpg)
DEVELOPMENT APPROACHES
MOBILE FIRST
![Page 75: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/75.jpg)
DEVELOPMENT APPROACHES
MOBILE FIRST DESKTOP FIRST
![Page 76: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/76.jpg)
PARALLEL PROTOTYPING
![Page 77: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/77.jpg)
PARALLEL PROTOTYPINGTURNING ON THE 3D MODE OF THINKING
![Page 78: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/78.jpg)
PARALLEL PROTOTYPINGTURNING ON THE 3D MODE OF THINKING
DESKTOP TABLET MOBILE
![Page 79: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/79.jpg)
LET’S THINK IT THROUGH...
![Page 80: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/80.jpg)
THINKING THROUGH
The responsiveness
![Page 81: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/81.jpg)
THINKING THROUGH
The responsiveness
Transformation of the text
![Page 82: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/82.jpg)
THINKING THROUGH
The responsiveness
Transformation of the text
Transformation of the graphics
![Page 83: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/83.jpg)
THINKING THROUGH
The responsiveness
Transformation of the text
Transformation of the graphics
Degradation
![Page 84: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/84.jpg)
![Page 85: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/85.jpg)
DEFINING THE BREAKPOINTS
![Page 86: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/86.jpg)
DEFINING THE BREAKPOINTS
![Page 87: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/87.jpg)
DEFINING THE BREAKPOINTS
320px
480px
600px
950px
![Page 88: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/88.jpg)
DEFINING THE BREAKPOINTS
320px
480px
600px
950px
![Page 89: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/89.jpg)
DEFINING THE BREAKPOINTS
320px
480px
600px
950px
![Page 90: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/90.jpg)
DEFINING THE BREAKPOINTS
320px
480px
600px
950px
![Page 91: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/91.jpg)
DEFINING THE BREAKPOINTS
320px
480px
600px
950px
![Page 92: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/92.jpg)
VISUAL DESIGN
![Page 93: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/93.jpg)
BEFORE RUNNING PHOTOSHOP
![Page 94: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/94.jpg)
BEFORE RUNNING PHOTOSHOPReviewing our tasks and goals
![Page 95: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/95.jpg)
BEFORE RUNNING PHOTOSHOPReviewing our tasks and goals
Picturing the target audience
![Page 96: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/96.jpg)
BEFORE RUNNING PHOTOSHOPReviewing our tasks and goals
Picturing the target audience
Examining the work of others
![Page 97: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/97.jpg)
BEFORE RUNNING PHOTOSHOPReviewing our tasks and goals
Picturing the target audience
Examining the work of others
Determining the coloring of the
website
![Page 98: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/98.jpg)
BEFORE RUNNING PHOTOSHOPReviewing our tasks and goals
Picturing the target audience
Examining the work of others
Determining the coloring of the
website
RUNNING PHOTOSHOP
![Page 99: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/99.jpg)
MARKING UP THE GRID
![Page 100: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/100.jpg)
MARKING UP THE GRID
Adjusting the grid to the content
![Page 101: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/101.jpg)
MARKING UP THE GRID
Adjusting the grid to the content
NOT THE CONTENT TO THE GRID!
![Page 102: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/102.jpg)
MARKING UP THE GRID
Adjusting the grid to the content
NOT THE CONTENT TO THE GRID!
![Page 103: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/103.jpg)
MARKING UP THE GRID
Adjusting the grid to the content
NOT THE CONTENT TO THE GRID!
Modualrgrid.org
![Page 104: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/104.jpg)
AND WHAT ABOUT THE
RESPONSIVENESS?
![Page 105: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/105.jpg)
THERE ARE OPTIONS
![Page 106: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/106.jpg)
THERE ARE OPTIONS
BUT IT ALL DEPENDS ON THE
CONTENT
![Page 107: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/107.jpg)
![Page 108: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/108.jpg)
950 – 24 col 620 – 16 col 460 – 12 col 310 – 8 col
![Page 109: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/109.jpg)
COLORING
![Page 110: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/110.jpg)
SKETCHING THE ELEMENTS
![Page 111: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/111.jpg)
SKETCHING THE ELEMENTS
ADDING WEIGHT TO THE ELEMENTS
![Page 112: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/112.jpg)
SKETCHING THE ELEMENTS
WORKING WITH THE TYPOGRAPHY
ADDING WEIGHT TO THE ELEMENTS
![Page 113: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/113.jpg)
SKETCHING THE ELEMENTS
WORKING WITH THE TYPOGRAPHY
WORKING WITH THE GRAPHICS
ADDING WEIGHT TO THE ELEMENTS
![Page 114: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/114.jpg)
SKETCHING THE ELEMENTS
WORKING WITH THE TYPOGRAPHY
WORKING WITH THE GRAPHICS
ADDING WEIGHT TO THE ELEMENTS
![Page 115: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/115.jpg)
ELEMENTWISE APPROACH
![Page 116: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/116.jpg)
CREATING A LIBRARY OF ELEMENTS
![Page 117: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/117.jpg)
![Page 118: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/118.jpg)
THAT’S NOT ENOUGH
NOW
![Page 119: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/119.jpg)
FUNCTIONAL
![Page 120: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/120.jpg)
FUNCTIONAL
RELIABLE
![Page 121: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/121.jpg)
RELIABLE
CONVENIENT
FUNCTIONAL
![Page 122: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/122.jpg)
PLEASING
FUNCTIONAL
RELIABLE
CONVENIENT
![Page 123: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/123.jpg)
MAKING THE WEBSITE LIVELY
![Page 124: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/124.jpg)
Feedback to every action
MAKING THE WEBSITE LIVELY
![Page 125: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/125.jpg)
Feedback to every action
Hover/Active for all elements
MAKING THE WEBSITE LIVELY
![Page 126: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/126.jpg)
Feedback to every action
Hover/Active for all elements
Animation of all elements
MAKING THE WEBSITE LIVELY
![Page 127: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/127.jpg)
Feedback to every action
Hover/Active for all elements
Animation of all elements
Animation of the content when
needed
MAKING THE WEBSITE LIVELY
![Page 128: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/128.jpg)
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
![Page 129: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/129.jpg)
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
![Page 130: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/130.jpg)
DEVELOPMENT
![Page 131: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/131.jpg)
FRONT-END
BACK-END
![Page 132: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/132.jpg)
FRONT-ENDStarting after the prototypes
Building HTML prototypes
Working with layers
BACK-END
![Page 133: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/133.jpg)
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
![Page 134: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/134.jpg)
TESTING
![Page 135: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/135.jpg)
CONDUCTING
![Page 136: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/136.jpg)
CONDUCTING
User testing
![Page 137: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/137.jpg)
CONDUCTING
User testing
Browser testing
![Page 138: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/138.jpg)
CONDUCTING
User testing
Browser testing
Back-end security testing
![Page 139: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/139.jpg)
![Page 140: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/140.jpg)
![Page 141: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/141.jpg)
![Page 142: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/142.jpg)
![Page 143: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/143.jpg)
![Page 144: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/144.jpg)
![Page 145: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/145.jpg)
FILLING
![Page 146: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/146.jpg)
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
![Page 147: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/147.jpg)
TAKING OFF AND FLYING HIGH
![Page 148: Eleks' Website Creation Process](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7fbd54a7959d93f8b45fe/html5/thumbnails/148.jpg)
www.eleks.com