SlideShare a Scribd company logo

Web UI Design Project-01

Web UI Design - Brand id, User Interface, and Interation Design. The Colors and Design convey a warm, natural, and outdoorsy feel with a touch of subtle sophistication – effectively communicating the Brand and Content to the Target Audience. The Prototype created using HTML and CSS is Online at: https://happysebbe.github.io/web-portfolio-01/bofftrak/index.html

1 of 10
Download to read offline
01© Sebbe Isaac Kurian
Web UI Design
The site design is a 5 page, Fixed Width Layout. The Brand Identity,
Logo, Buttons, Icons, etc. were created using Adobe Illustrator, and
the Website Template in Adobe Photoshop.
Acknowledgments
The Nature and Landscape pictures are CC0 licensed images from
www.pexels.com, and the People pictures are from the Free Stock
Photos collection provided by www.hubspot.com
Brand Identity Design
Fonts
Roboto 400, 400 italic, 700
Nova Square
Colors
#FFFFCC Light Yellow 255, 255, 204.
#F0E6AA Dark Yellow 240, 230, 170.
#CCFFCC Light Green 204, 255, 204.
#009966 Dark Green 0, 153, 102.
#A52A2A Brown 165, 42, 42.
#555555 Dk-Grey (75%) 85, 85, 85.
#707070 Md-Grey (65%) 112, 112, 112.
#B7B7B7 Lt-Grey (35%) 183, 183, 183.
25K 25K
780 780
123 123
3.0K 3.0K
Web UI Design Project-01
Web UI Design Project-01

Recommended

New York City Real Estate Rules - The Priciest Places This Year
New York City Real Estate Rules - The Priciest Places This YearNew York City Real Estate Rules - The Priciest Places This Year
New York City Real Estate Rules - The Priciest Places This YearAvraham Glattman
 
Carla naragon cv 2016 (2)
Carla naragon cv 2016 (2)Carla naragon cv 2016 (2)
Carla naragon cv 2016 (2)Carla Naragon.
 
1 Year Product Development With A Distributed Team - Michele Franzin - Codemo...
1 Year Product Development With A Distributed Team - Michele Franzin - Codemo...1 Year Product Development With A Distributed Team - Michele Franzin - Codemo...
1 Year Product Development With A Distributed Team - Michele Franzin - Codemo...Codemotion
 
Moti 구연
Moti 구연Moti 구연
Moti 구연JUAN2571
 

More Related Content

Viewers also liked

Real Estate Success: Diverse Investments
Real Estate Success: Diverse InvestmentsReal Estate Success: Diverse Investments
Real Estate Success: Diverse InvestmentsAvraham Glattman
 
Group photo analysis
Group photo analysisGroup photo analysis
Group photo analysisdrmuffin77
 
Delayed Financing - Avraham Glattman
Delayed Financing - Avraham GlattmanDelayed Financing - Avraham Glattman
Delayed Financing - Avraham GlattmanAvraham Glattman
 
Denta scans in endodontics /certified fixed orthodontic courses by Indian de...
Denta scans in endodontics  /certified fixed orthodontic courses by Indian de...Denta scans in endodontics  /certified fixed orthodontic courses by Indian de...
Denta scans in endodontics /certified fixed orthodontic courses by Indian de...Indian dental academy
 
The Coordinated Function of Nervous System
The Coordinated Function of Nervous SystemThe Coordinated Function of Nervous System
The Coordinated Function of Nervous SystemPaula Marie Llido
 
Oil Conflict - The Political Dilemma
Oil Conflict - The Political DilemmaOil Conflict - The Political Dilemma
Oil Conflict - The Political DilemmaJuan Pablo Poch
 
Bombas para incendio
Bombas para incendioBombas para incendio
Bombas para incendioleandroeara
 
Filipino el fili- to be edit quiz
Filipino  el fili- to be edit quizFilipino  el fili- to be edit quiz
Filipino el fili- to be edit quizEemlliuq Agalalan
 

Viewers also liked (9)

Real Estate Success: Diverse Investments
Real Estate Success: Diverse InvestmentsReal Estate Success: Diverse Investments
Real Estate Success: Diverse Investments
 
Group photo analysis
Group photo analysisGroup photo analysis
Group photo analysis
 
Delayed Financing - Avraham Glattman
Delayed Financing - Avraham GlattmanDelayed Financing - Avraham Glattman
Delayed Financing - Avraham Glattman
 
Perfecxus Profile
Perfecxus ProfilePerfecxus Profile
Perfecxus Profile
 
Denta scans in endodontics /certified fixed orthodontic courses by Indian de...
Denta scans in endodontics  /certified fixed orthodontic courses by Indian de...Denta scans in endodontics  /certified fixed orthodontic courses by Indian de...
Denta scans in endodontics /certified fixed orthodontic courses by Indian de...
 
The Coordinated Function of Nervous System
The Coordinated Function of Nervous SystemThe Coordinated Function of Nervous System
The Coordinated Function of Nervous System
 
Oil Conflict - The Political Dilemma
Oil Conflict - The Political DilemmaOil Conflict - The Political Dilemma
Oil Conflict - The Political Dilemma
 
Bombas para incendio
Bombas para incendioBombas para incendio
Bombas para incendio
 
Filipino el fili- to be edit quiz
Filipino  el fili- to be edit quizFilipino  el fili- to be edit quiz
Filipino el fili- to be edit quiz
 

Similar to Web UI Design Project-01

Google PageSpeed: 5 Steps to 100% (Mobile) Success
Google PageSpeed: 5 Steps to 100% (Mobile) SuccessGoogle PageSpeed: 5 Steps to 100% (Mobile) Success
Google PageSpeed: 5 Steps to 100% (Mobile) SuccessJoe Williams
 
Www snapdeal com-report
Www snapdeal com-reportWww snapdeal com-report
Www snapdeal com-reportMahipSingh13
 
Imagesandvideo tallinn
Imagesandvideo tallinnImagesandvideo tallinn
Imagesandvideo tallinnDoug Sillars
 
Imagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetupImagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetupDoug Sillars
 
High Performance Web Design
High Performance Web DesignHigh Performance Web Design
High Performance Web DesignKoji Ishimoto
 

Similar to Web UI Design Project-01 (6)

Google PageSpeed: 5 Steps to 100% (Mobile) Success
Google PageSpeed: 5 Steps to 100% (Mobile) SuccessGoogle PageSpeed: 5 Steps to 100% (Mobile) Success
Google PageSpeed: 5 Steps to 100% (Mobile) Success
 
A new look for e4
A new look for e4A new look for e4
A new look for e4
 
Www snapdeal com-report
Www snapdeal com-reportWww snapdeal com-report
Www snapdeal com-report
 
Imagesandvideo tallinn
Imagesandvideo tallinnImagesandvideo tallinn
Imagesandvideo tallinn
 
Imagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetupImagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetup
 
High Performance Web Design
High Performance Web DesignHigh Performance Web Design
High Performance Web Design
 

Recently uploaded

October 2023 Issue - Fnewsmagazine SAIC.
October 2023 Issue - Fnewsmagazine SAIC.October 2023 Issue - Fnewsmagazine SAIC.
October 2023 Issue - Fnewsmagazine SAIC.aditisingh523288
 
Options for Making Housing Affordable a distinct Reality
Options for Making Housing Affordable a distinct RealityOptions for Making Housing Affordable a distinct Reality
Options for Making Housing Affordable a distinct RealityJIT KUMAR GUPTA
 
homescreen revamp homescreen revamphomescreen revamp
homescreen revamp homescreen revamphomescreen revamphomescreen revamp homescreen revamphomescreen revamp
homescreen revamp homescreen revamphomescreen revampvidya934261
 
new Principle of design and the elements of design
new Principle of design and the elements of designnew Principle of design and the elements of design
new Principle of design and the elements of designbhamshu738
 
Apparel Portfolio draft: Cayden Ingman |
Apparel Portfolio draft: Cayden Ingman |Apparel Portfolio draft: Cayden Ingman |
Apparel Portfolio draft: Cayden Ingman |CaydenIngman
 
December 2023 Issue - Fnewsmagazine SAIC
December 2023 Issue - Fnewsmagazine SAICDecember 2023 Issue - Fnewsmagazine SAIC
December 2023 Issue - Fnewsmagazine SAICaditisingh523288
 
acervus process book no cover--character
acervus process book no cover--characteracervus process book no cover--character
acervus process book no cover--characterschell
 
Presentation on "Gothic Architecher".pptx
Presentation on "Gothic Architecher".pptxPresentation on "Gothic Architecher".pptx
Presentation on "Gothic Architecher".pptxASHIQUR RAHMAN
 
impact of packaging on consumer buying behaviour project report pdf.pdf
impact of packaging on consumer buying behaviour project  report pdf.pdfimpact of packaging on consumer buying behaviour project  report pdf.pdf
impact of packaging on consumer buying behaviour project report pdf.pdfSanjivanisShirodkar
 
AWS-Architecture-Icons-Deck_For-Dark-BG_02062024.pptx
AWS-Architecture-Icons-Deck_For-Dark-BG_02062024.pptxAWS-Architecture-Icons-Deck_For-Dark-BG_02062024.pptx
AWS-Architecture-Icons-Deck_For-Dark-BG_02062024.pptxGopiNarahari1
 
Gerald Freedman Theatre Rep Re-Circuit.pdf
Gerald Freedman Theatre Rep Re-Circuit.pdfGerald Freedman Theatre Rep Re-Circuit.pdf
Gerald Freedman Theatre Rep Re-Circuit.pdfLizShek
 
urban design case study of old city Jodhpur
urban design case study of  old city Jodhpururban design case study of  old city Jodhpur
urban design case study of old city JodhpurSreyaseeNath1
 
Spoleto Festival23 Hang and Cable Layouts.pdf
Spoleto Festival23 Hang and Cable Layouts.pdfSpoleto Festival23 Hang and Cable Layouts.pdf
Spoleto Festival23 Hang and Cable Layouts.pdfLizShek
 
Mother Courage and Her Children Shop Order.pdf
Mother Courage and Her Children Shop Order.pdfMother Courage and Her Children Shop Order.pdf
Mother Courage and Her Children Shop Order.pdfLizShek
 
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdf
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdfPAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdf
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdfssuser799b33
 
Before and After Wheelchair Accessible Whole Home Remodel.pptx
Before and After Wheelchair Accessible Whole Home Remodel.pptxBefore and After Wheelchair Accessible Whole Home Remodel.pptx
Before and After Wheelchair Accessible Whole Home Remodel.pptxleahlareaupci
 
Preposition for grade 12th Vietnamese student
Preposition for grade 12th Vietnamese studentPreposition for grade 12th Vietnamese student
Preposition for grade 12th Vietnamese studentThaoNguyenDang4
 
Passing Strange Lighting Plot AS BUILT).pdf
Passing Strange Lighting Plot AS BUILT).pdfPassing Strange Lighting Plot AS BUILT).pdf
Passing Strange Lighting Plot AS BUILT).pdfLizShek
 
ASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdf
ASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdfASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdf
ASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdfaekhan1019
 

Recently uploaded (20)

October 2023 Issue - Fnewsmagazine SAIC.
October 2023 Issue - Fnewsmagazine SAIC.October 2023 Issue - Fnewsmagazine SAIC.
October 2023 Issue - Fnewsmagazine SAIC.
 
Options for Making Housing Affordable a distinct Reality
Options for Making Housing Affordable a distinct RealityOptions for Making Housing Affordable a distinct Reality
Options for Making Housing Affordable a distinct Reality
 
homescreen revamp homescreen revamphomescreen revamp
homescreen revamp homescreen revamphomescreen revamphomescreen revamp homescreen revamphomescreen revamp
homescreen revamp homescreen revamphomescreen revamp
 
new Principle of design and the elements of design
new Principle of design and the elements of designnew Principle of design and the elements of design
new Principle of design and the elements of design
 
Apparel Portfolio draft: Cayden Ingman |
Apparel Portfolio draft: Cayden Ingman |Apparel Portfolio draft: Cayden Ingman |
Apparel Portfolio draft: Cayden Ingman |
 
December 2023 Issue - Fnewsmagazine SAIC
December 2023 Issue - Fnewsmagazine SAICDecember 2023 Issue - Fnewsmagazine SAIC
December 2023 Issue - Fnewsmagazine SAIC
 
acervus process book no cover--character
acervus process book no cover--characteracervus process book no cover--character
acervus process book no cover--character
 
Presentation on "Gothic Architecher".pptx
Presentation on "Gothic Architecher".pptxPresentation on "Gothic Architecher".pptx
Presentation on "Gothic Architecher".pptx
 
impact of packaging on consumer buying behaviour project report pdf.pdf
impact of packaging on consumer buying behaviour project  report pdf.pdfimpact of packaging on consumer buying behaviour project  report pdf.pdf
impact of packaging on consumer buying behaviour project report pdf.pdf
 
AWS-Architecture-Icons-Deck_For-Dark-BG_02062024.pptx
AWS-Architecture-Icons-Deck_For-Dark-BG_02062024.pptxAWS-Architecture-Icons-Deck_For-Dark-BG_02062024.pptx
AWS-Architecture-Icons-Deck_For-Dark-BG_02062024.pptx
 
Gerald Freedman Theatre Rep Re-Circuit.pdf
Gerald Freedman Theatre Rep Re-Circuit.pdfGerald Freedman Theatre Rep Re-Circuit.pdf
Gerald Freedman Theatre Rep Re-Circuit.pdf
 
urban design case study of old city Jodhpur
urban design case study of  old city Jodhpururban design case study of  old city Jodhpur
urban design case study of old city Jodhpur
 
Spoleto Festival23 Hang and Cable Layouts.pdf
Spoleto Festival23 Hang and Cable Layouts.pdfSpoleto Festival23 Hang and Cable Layouts.pdf
Spoleto Festival23 Hang and Cable Layouts.pdf
 
Mother Courage and Her Children Shop Order.pdf
Mother Courage and Her Children Shop Order.pdfMother Courage and Her Children Shop Order.pdf
Mother Courage and Her Children Shop Order.pdf
 
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdf
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdfPAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdf
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdf
 
Bring Your Office Interiors Back to Life The Enchantment of Personalized Wall...
Bring Your Office Interiors Back to Life The Enchantment of Personalized Wall...Bring Your Office Interiors Back to Life The Enchantment of Personalized Wall...
Bring Your Office Interiors Back to Life The Enchantment of Personalized Wall...
 
Before and After Wheelchair Accessible Whole Home Remodel.pptx
Before and After Wheelchair Accessible Whole Home Remodel.pptxBefore and After Wheelchair Accessible Whole Home Remodel.pptx
Before and After Wheelchair Accessible Whole Home Remodel.pptx
 
Preposition for grade 12th Vietnamese student
Preposition for grade 12th Vietnamese studentPreposition for grade 12th Vietnamese student
Preposition for grade 12th Vietnamese student
 
Passing Strange Lighting Plot AS BUILT).pdf
Passing Strange Lighting Plot AS BUILT).pdfPassing Strange Lighting Plot AS BUILT).pdf
Passing Strange Lighting Plot AS BUILT).pdf
 
ASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdf
ASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdfASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdf
ASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdf
 

Web UI Design Project-01

  • 2. Web UI Design The site design is a 5 page, Fixed Width Layout. The Brand Identity, Logo, Buttons, Icons, etc. were created using Adobe Illustrator, and the Website Template in Adobe Photoshop. Acknowledgments The Nature and Landscape pictures are CC0 licensed images from www.pexels.com, and the People pictures are from the Free Stock Photos collection provided by www.hubspot.com
  • 3. Brand Identity Design Fonts Roboto 400, 400 italic, 700 Nova Square Colors #FFFFCC Light Yellow 255, 255, 204. #F0E6AA Dark Yellow 240, 230, 170. #CCFFCC Light Green 204, 255, 204. #009966 Dark Green 0, 153, 102. #A52A2A Brown 165, 42, 42. #555555 Dk-Grey (75%) 85, 85, 85. #707070 Md-Grey (65%) 112, 112, 112. #B7B7B7 Lt-Grey (35%) 183, 183, 183.
  • 4. 25K 25K 780 780 123 123 3.0K 3.0K
  • 10. Prototype View the Prototype created using HTML and CSS at: https://happysebbe.github.io/web-portfolio-01/bofftrak/index.html Note: The Fixed Width prototype is Best Viewed on Desktop. https://www.linkedin.com/in/happysebbe https://www.twitter.com/happysebbe https://www.facebook.com/happysebbe