Web UI Design Project-01

Aug 26, 20160 likes298 views

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

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

The document provides guidance on interview skills and preparing for job interviews. It discusses what an interview is, why employers conduct interviews, important qualities and skills employers look for. It also offers tips on researching the company and position, conducting self-analysis, preparing answers to common interview questions, practicing good body language, and avoiding common mistakes. The document emphasizes being confident, enthusiastic, polite and presenting one's strengths in a job-focused manner.

New York City Real Estate Rules - The Priciest Places This YearAvraham Glattman

Unidad didáctica: La magia de vivirErika Castaño Giraldo

Este documento presenta una unidad didáctica de 4 horas sobre el ciclo de vida de los seres vivos para estudiantes de segundo grado. La unidad incluye actividades de indagación, introducción de modelos, estructuración del conocimiento y aplicación a nuevas situaciones. El objetivo es que los estudiantes aprendan a distinguir los ciclos de vida y reconocer las necesidades y diferencias en el desarrollo de los seres vivos.

Carla naragon cv 2016 (2)Carla Naragon.

1 Year Product Development With A Distributed Team - Michele Franzin - Codemo...Codemotion

RP_transcriptRuthanne Peters

This transcript provides information about Ruthanne Peters' high school academic performance. It shows that she had a weighted GPA of 89.214 and ranked 43 out of 218 students, placing her in the 80th percentile. The transcript lists the courses she took each year along with the grades received. It also includes her standardized test scores and indicates that she met the requirements for graduation.

Moti 구연JUAN2571

Art Portfolio [2014]Sebbe Isaac Kurian

This document appears to be an artist's portfolio containing 24 pages of original artwork, character designs, illustrations, and photographs. It includes the artist's contact information and describes their skills and experience in areas like concept art, character design, storyboarding, illustration, photography, and graphic design. The portfolio is meant to showcase the artist's creative work and visual style to potential clients.

Real Estate Success: Diverse InvestmentsAvraham Glattman

Group photo analysisdrmuffin77

This document contains questions and responses about an unseen photograph. It discusses six possible photographs, including: 1) people in a log cabin, 2) Hitler with a child, 3) policemen with dogs confronting protesters, 4) a man hung from the Statue of Liberty, 5) a newly arrived immigrant family, and 6) army recruits at an inspection. For each photo described, it provides context about the subjects, possible messages conveyed, historical importance, and inferences that could be made.

Delayed Financing - Avraham GlattmanAvraham Glattman

Perfecxus ProfilePERFECXUS GLOBAL

Denta scans in endodontics /certified fixed orthodontic courses by Indian de...Indian dental academy

This document discusses the use of dentascan imaging in endodontics. It provides an overview of the limitations of conventional 2D imaging techniques for assessing root canal morphology and the extent of periapical infections. Dentascans provide 3D imaging which allows evaluation of anatomy in all three dimensions through various reformatted views. A case report demonstrates how dentascans identified extra canals and the full extent of periapical infection and bone loss not visible on 2D imaging. While effective, dentascans have limitations including cost and radiation dose. The document concludes dentascans can improve endodontic treatment outcomes by providing a more accurate assessment of root canal anatomy and periapical pathology.

The Coordinated Function of Nervous SystemPaula Marie Llido

The document discusses the coordinated function of the nervous, endocrine, and reproductive systems in the human body. It provides an overview of the central nervous system, including the brain and spinal cord. It also describes the peripheral nervous system, including the somatic and autonomic nervous systems. The autonomic nervous system is further divided into the sympathetic and parasympathetic nervous systems which work to regulate involuntary body functions.

Oil Conflict - The Political DilemmaJuan Pablo Poch

The document summarizes an article arguing that oil wealth often causes economic and political instability in countries. It discusses how the "oil curse" leads to issues like debt, mismanaged revenues, and economic dependence on oil. This can then fuel conflicts through unrest and instability. As an example, it outlines how Venezuela experienced huge economic growth from oil but then deterioration as revenues declined and were poorly managed under Chavez. It evaluates different approaches for addressing conflicts related to oil wealth, such as diplomacy, sanctions, or military intervention, but notes challenges with each.

Bombas para incendioleandroeara

El documento describe los componentes y funcionamiento de un equipo de presurización para bombas contra incendio. Explica que el equipo consta de una bomba jockey, una bomba principal y opcionalmente una bomba de reserva. Las bombas jockey y principal se activan automáticamente mediante presostatos ante caídas de presión, mientras que la bomba de reserva solo entra si fallan las otras. También describe otros componentes como colectores, válvulas, manómetros y tablero eléctrico.

Filipino el fili- to be edit quizEemlliuq Agalalan

Google PageSpeed: 5 Steps to 100% (Mobile) SuccessJoe Williams

This document outlines 5 steps to achieve a 100% mobile PageSpeed score according to Google guidelines: 1. Ensure clean code by selecting lightweight page builders, plugins, and themes to reduce page bloat. 2. Install a page speed plugin like WP Rocket to optimize JavaScript loading and defer scripts. 3. Upgrade the web host to improve server response time (TTFB) which impacts all page speed metrics. 4. Improve the Largest Contentful Paint score by preloading images, enabling compression, and disabling lazy loading for critical elements. 5. Improve the Time to Interactive score by removing unnecessary sections of the page using the isolation technique to diagnose bottlenecks. Optimizing script

A new look for e4susanfmccourt

The document discusses plans to update the visual design of Eclipse 4.0 (e4) with a more modern style using CSS. The goals are to create a modern look with more breathing room while leveraging the styling engine capabilities. Influences on the new design include web design principles of showing data clearly and allowing flexibility for different screen sizes and user expectations. The redesign process involves iteration based on mockups, feedback, and balancing various design elements and states. Implementation will include blueprinting the design, adding the mockups, and dealing with surprises.

Www snapdeal com-reportMahipSingh13

Imagesandvideo tallinnDoug Sillars

This document summarizes Doug Sillars' presentation on delivering fast and beautiful images and video for mobile. It discusses 4 simple image optimizations: quality, format, sizing, and lazy loading. It also covers optimizing video delivery by reducing file sizes, only downloading video that will be displayed, and being mindful of data costs and network conditions for mobile users. The presentation provided examples and metrics on how these optimizations can significantly improve page load speeds and reduce data usage.

Imagesandvideo stockholm webmeetupDoug Sillars

Doug Sillars presented four simple optimizations for delivering fast and beautiful images and video on mobile: 1) reduce image quality, 2) use optimized formats like WebP and SVG, 3) size images appropriately, and 4) lazy load images below the fold. He demonstrated how these techniques can significantly reduce page load times and data usage. Sillars also discussed best practices for video delivery and alternatives to animated GIFs that can reduce file sizes substantially. Throughout, he provided real-world examples and tools to help optimize multimedia content for mobile performance.

High Performance Web DesignKoji Ishimoto

The document discusses high performance web design. It covers measuring performance using tools like YSlow and PageSpeed, as well as techniques to improve performance such as reducing HTTP requests by combining scripts and stylesheets, using CSS sprites, and inline images. The document also discusses how performance impacts businesses and provides examples of component weights and grades for different websites according to YSlow rules. It emphasizes the importance of clear objectives, consistent design, and clean code for building high performance sites.

Templates Wind Generator.pdf ahí. Ais d Ai d fjeremysegundob

EEE178-PPT-Theme iasodhajsdkjashdlaskdjbaksdkashdlkasdlkja;dj;kdada.pptx.pdfCastroAngeloReoD

Prof House interior Design Project exterNagudiBridget

Minimalist Business Slides XL by Slidesgo.pptxkarenalavamoran

Baby panda 400.pdf de ciencias naturalesdebbie loaiza

Oversized Off White Pulka Dot Cotton ShirtZNKL.in

Take this ppt refference and give content on mahindra commitment to sustainab...kochars428

More Related Content

Viewers also liked (9)

Real Estate Success: Diverse InvestmentsAvraham Glattman

Group photo analysisdrmuffin77

Delayed Financing - Avraham GlattmanAvraham Glattman

Perfecxus ProfilePERFECXUS GLOBAL

Denta scans in endodontics /certified fixed orthodontic courses by Indian de...Indian dental academy

The Coordinated Function of Nervous SystemPaula Marie Llido

Oil Conflict - The Political DilemmaJuan Pablo Poch

Bombas para incendioleandroeara

Filipino el fili- to be edit quizEemlliuq Agalalan

Real Estate Success: Diverse InvestmentsAvraham Glattman

Group photo analysisdrmuffin77

Delayed Financing - Avraham GlattmanAvraham Glattman

Perfecxus ProfilePERFECXUS GLOBAL

Denta scans in endodontics /certified fixed orthodontic courses by Indian de...Indian dental academy

The Coordinated Function of Nervous SystemPaula Marie Llido

Oil Conflict - The Political DilemmaJuan Pablo Poch

Bombas para incendioleandroeara

Filipino el fili- to be edit quizEemlliuq Agalalan

Similar to Web UI Design Project-01 (6)

Google PageSpeed: 5 Steps to 100% (Mobile) SuccessJoe Williams

A new look for e4susanfmccourt

Www snapdeal com-reportMahipSingh13

Imagesandvideo tallinnDoug Sillars

Imagesandvideo stockholm webmeetupDoug Sillars

High Performance Web DesignKoji Ishimoto

Google PageSpeed: 5 Steps to 100% (Mobile) SuccessJoe Williams

A new look for e4susanfmccourt

Www snapdeal com-reportMahipSingh13

Imagesandvideo tallinnDoug Sillars

Imagesandvideo stockholm webmeetupDoug Sillars

High Performance Web DesignKoji Ishimoto

Recently uploaded (20)

Templates Wind Generator.pdf ahí. Ais d Ai d fjeremysegundob

EEE178-PPT-Theme iasodhajsdkjashdlaskdjbaksdkashdlkasdlkja;dj;kdada.pptx.pdfCastroAngeloReoD

Prof House interior Design Project exterNagudiBridget

Minimalist Business Slides XL by Slidesgo.pptxkarenalavamoran

Baby panda 400.pdf de ciencias naturalesdebbie loaiza

Oversized Off White Pulka Dot Cotton ShirtZNKL.in

Take this ppt refference and give content on mahindra commitment to sustainab...kochars428

Hi! I'm Lori Vanzant. Please take a lookvanzan01

Lori Vanzant Online Presence. Take a look!vanzan01

Emily's slide design 101 - training moduleyourmisswright

Minimalist Pitch Deck by slide Slidesgo.pptxESTEFANOANDREYGARCIA

325295919-AAC-Blocks-Seminar-Presentation.pdfshivsin165

Internet Download Manager Crack Patch Latest IDM Free DownloadDesigner

mid-term all revisions g11 s1.pmdzs,zxptxomar164646

Presentation mockup using lots of animalsChunChihChenPhD

Halstead’s_Software_Science_&_Putnam’s_Model[1].pptxprachiikumarii1

COTTER and KNUCKleeeeeeeeeeeeeeeeeee.pptxayushjadon04

PayPros-Journey-Overcoming-Challenges-Through-Governance.pptxrayyansiddiqui034

STOCK ANALYSYS.pptx manajemen keuangan skfdpontianak2012

behiriskfactorsxyzkskeb210217133906 (1).pdfShakibulHasan14

Templates Wind Generator.pdf ahí. Ais d Ai d fjeremysegundob

EEE178-PPT-Theme iasodhajsdkjashdlaskdjbaksdkashdlkasdlkja;dj;kdada.pptx.pdfCastroAngeloReoD

Prof House interior Design Project exterNagudiBridget

Minimalist Business Slides XL by Slidesgo.pptxkarenalavamoran

Baby panda 400.pdf de ciencias naturalesdebbie loaiza

Oversized Off White Pulka Dot Cotton ShirtZNKL.in

Take this ppt refference and give content on mahindra commitment to sustainab...kochars428

Hi! I'm Lori Vanzant. Please take a lookvanzan01

Lori Vanzant Online Presence. Take a look!vanzan01

Emily's slide design 101 - training moduleyourmisswright

Minimalist Pitch Deck by slide Slidesgo.pptxESTEFANOANDREYGARCIA

325295919-AAC-Blocks-Seminar-Presentation.pdfshivsin165

Internet Download Manager Crack Patch Latest IDM Free DownloadDesigner

mid-term all revisions g11 s1.pmdzs,zxptxomar164646

Presentation mockup using lots of animalsChunChihChenPhD

Halstead’s_Software_Science_&_Putnam’s_Model[1].pptxprachiikumarii1

COTTER and KNUCKleeeeeeeeeeeeeeeeeee.pptxayushjadon04

PayPros-Journey-Overcoming-Challenges-Through-Governance.pptxrayyansiddiqui034

STOCK ANALYSYS.pptx manajemen keuangan skfdpontianak2012

behiriskfactorsxyzkskeb210217133906 (1).pdfShakibulHasan14

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

Web UI Design Project-01

Recommended

More Related Content

Viewers also liked (9)

Similar to Web UI Design Project-01 (6)

Recently uploaded (20)

Web UI Design Project-01