Web Design 101
117 likes36,157 views
The document is a guide to basic web design principles, covering essential topics such as web technologies, layouts, typography, whitespace, color schemes, graphics, information software design, and user experience. It offers practical tips for improving web design, emphasizing design alignment with content and user needs. The document encourages learning from experienced designers, testing with real content, and focusing on the details that differentiate good designs from great ones.
More Related Content
![SIH2025_IDEA_Presentation_Format Final[1].pptx](https://cdn.slidesharecdn.com/ss_thumbnails/sih2025ideapresentationformatfinal1-250905172203-04ee1105-thumbnail.jpg?width=560&fit=bounds)
![AI_presentation_AICT[1] [Read-Only].pptx](https://cdn.slidesharecdn.com/ss_thumbnails/aipresentationaict1read-only-250905175118-16902bff-thumbnail.jpg?width=560&fit=bounds)
Web Design 101
- 1. WEB DESIGN 101 basic stuff on designing for the web
- 2. ABOUT T.S. Lim ME Flexnode Solutions Web Developer Used <blink> Decent Designer? www.clipsoflogic.com
- 3. WHAT YOU NEEDTO KNOW ABOUT WEB DESIGN HOW YOU CAN IMPROVE YOUR WEB DESIGN
- 4. 8 THINGS YOU NEEDTO KNOW ABOUT WEB DESIGN
- 5.
- 6. HTML hypertextmarkup language <html> <head> <title>Webcamp KK</title> </head> <body> <h1>This is awesome</h1> </body> </html>
- 7. CSS cascading style sheets body { background-color: black; } h1 { font-size: 40px; text-decoration: underline; }
- 8. JAVASCRIPT scripting languagefor web pages <script type=”text/javascript”> // comment document.write(‘Webcamp KK’); alert(‘This is awesome!’); </script>
- 9.
- 10. FIXED LAYOUT & F L U I D L AYO U T
- 11. FIXED LAYOUT Better controlon looks and content Easier to read and style Might cause horizontal scroll on small screens Changing font size might break layout
- 13. FLUID LAYOUT Adapts toany screen size Handles font size change well Less control on the placement of content Content might be stretched or squashed
- 15. SOME TIPS Start withFixed Layout. 960px / 1140px Use base CSS (Bootstrap, Blueprint, GGS) Mix Fluid layout for certain content (e.g. pics) Learn how to float and position elements
- 16.
- 17. TYPOGRAPHY SIZE serif sansserif cursive { line-height: 1.5em } l e t t e r s p a c i n g text decoration left all about the arrangement right
- 18. CUSTOM FONTS Google WebFonts - @font-face Typekit - @font-face Cufon - VML & Canvas sIFR - Scalable Inman Flash Replacement
- 19. USEFUL STUFF Lettering.js -jQuery plugin for font control FontsInUse.com - Discover fonts being used FitText - jQuery plugin for fluid headlines HTML ipsum - placeholder text in HTML
- 22. SOME TIPS Body fontsize 12-14px Line height at 1.5em Left align body of text Use preset in CSS base frameworks Test with different content
- 23.
- 24. WHITESPACE Goes together withtypography All the negative spaces between content Key to aesthetic composition There are active and passive whitespace
- 25. WITHOUT WHITE SPACES Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. •Lorem ipsum dolor sit amet, consectetuer adipiscing elit. •Aliquam tincidunt mauris eu risus. •Vestibulum auctor dapibus neque.
- 26. WITH WHITE SPACES Pellentesquehabitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. • Aliquam tincidunt mauris eu risus. • Vestibulum auctor dapibus neque.
- 28. SOME TIPS Practice andtest with your content Base CSS Frameworks provide good defaults Use it to structure and emphasize content Add padding to your text container
- 29.
- 30.
- 31. SOME THEORIES Primary, secondary,tertiary colors Analogous and complementary color schemes Color contrast and context matters Use nature as a guide
- 32. Primary colors Secondary colors Tertiarycolors Analogous colors Complementary colors Colors from Nature Colors Context
- 34. SOME TIPS ColourLovers.com -Awesome color resource Pick a color scheme and stick with it Different color for link and visited link Use colors for call to action
- 35.
- 36. GRAPHICS Visual impact &communication - branding Easier to consume information - graphs Complement or replace textual info - icons Create emotional connection
- 40. SOME TIPS Famfamfam.com iconpacks iStockPhoto.com PNGs for text, logos - Lossless compression JPEGs for photos - Lossy compression Avoid animation if possible
- 41.
- 42. INFO SOFTWARE DESIGN Mostsoftware is information software Design of context-sensitive info graphics What and how the information is presented Approach as graphic design first
- 47. MORE INFO Read MagicInk Article by Bret Victor Finish it. It’s a MUST READ Showtimes.my was inspired by it
- 48.
- 49. USER EXPERIENCE How auser feel when using your site Design a site that’s fun to use Match the conceptual model of the user Used to shape the user behavior
- 50. UX IS NOT... Justthe user interface or usability About the technology or even the web Focused just on the user but the entire product Expensive but not easy either
- 53. USER EXPERIENCE IS PART OF YOUR PRODUCT UX IS NOT A STEP IN THE PROCESS BUT THE PROCESS
- 54. Facets of UXby Peter Morville
- 55. UX TOOLS Wireframe &Prototyping - Balsamiq Mockups A/B Test your design - Optimizely Analyze user behavior - KISSmetrics Survey and ask for feedbacks - Usabilla
- 56. 6 WAYS YOU CANIMPROVE YOUR WEB DESIGN
- 57. 1. LOOK ATPRETTY SITES
- 58. LOOK AT PRETTYSITES Browse sites like Smashing Magazine Learn how and why a design is good Sharpen your design sense with exposure Start noticing good design in products
- 59. 2. COPY, PASTE,MODIFY
- 60. COPY, PASTE, MODIFY Startwith a design you like Use it as a base and modify to your needs Nothing beats hands-on experience Never plagiarize and give credit where it’s due
- 61. 3. DESIGN AROUND YOUR CONTENT
- 62. DESIGN AROUND CONTENT Mostwebsites exist mainly to deliver content Design should complement your content Understand the nature of your content Content should be first-class citizen
- 63. 4. THINK LIKEA USER
- 64. THINK LIKE AUSER Try to actually use the site you designed Imagine yourself as a new visitor Make sure user gets what they are here for Bring in fresh eyes for feedbacks
- 65. 5. PAY ATTENTIONTO THE DETAILS
- 66. ATTENTION TO DETAILS Don’tinclude unnecessary details Do care about every little details Separates good design from the great E.g. iCloud logo infused with golden ratio
- 68. 6. ASK FORHELP
- 69. ASK FOR HELP Don’tbe shy and get input from others A lot of design is trial and error Familiarity trumps cool design any day Adopt good ideas, ignore the bad ones
- 70. Most people makethe mistake of thinking design is what it looks like. People think it’s this veneer — that the designers are handed this box and told, ‘Make it look good!’ That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.” - Steve Jobs
- 71. CREDITS Colors by MMMiguel@ ColourLovers Smashing Magazine for awesome info Magic Ink Article by Bret Victor Help from Marissa - real designer Get the complete list of links at my blog
- 72. THANK YOU! for listening :)
Editor's Notes
- #2 \n
- #3 \n
- #4 \n
- #5 \n
- #6 \n
- #7 \n
- #8 \n
- #9 \n
- #10 \n
- #11 \n
- #12 \n
- #13 \n
- #14 \n
- #15 \n
- #16 \n
- #17 \n
- #18 \n
- #19 \n
- #20 \n
- #21 \n
- #22 \n
- #23 \n
- #24 \n
- #25 \n
- #26 \n
- #27 \n
- #28 \n
- #29 \n
- #30 \n
- #31 \n
- #32 \n
- #33 \n
- #34 \n
- #35 \n
- #36 \n
- #37 \n
- #38 \n
- #39 \n
- #40 \n
- #41 \n
- #42 \n
- #43 \n
- #44 \n
- #45 \n
- #46 \n
- #47 \n
- #48 \n
- #49 \n
- #50 \n
- #51 \n
- #52 \n
- #53 \n
- #54 \n
- #55 \n
- #56 \n
- #57 \n
- #58 \n
- #59 \n
- #60 \n
- #61 \n
- #62 \n
- #63 \n
- #64 \n
- #65 \n
- #66 \n
- #67 \n
- #68 \n
- #69 \n
- #70 \n
- #71 \n
- #72 \n
- #73 \n