Design

From BC$ MobileTV Wiki
(Redirected from Web Design)
Jump to: navigation, search

Design is the art and science of creating aesthetically pleasing and functionally sensible arrangements and/or constructs of a piece of the world.


Specifications


Initiatives

No Spec

An initiative to educate the public about speculative (spec) work. With legitimate design opportunities turning into calls for spec work increasing, the No!Spec aims to arm designers (and all creative skilled workers) with the tools they need to take a stand against this trend. Spec (specification write-up, speculative prototyping, examples, etc) work is any initial design or even implementation work that a client attempts to obtain for free.


OpenIDEO


Responsive

Responsive Design (also called Responsive Web Design, or RWD[1], when referring to designing and styling/laying out web applications) is a way of making a single application (web application for RWD) that works effectively on both desktop operating systems (browsers for RWD) as well as the myriad of mobile device operating systems (mobile browsers for RWD) on the market. Responsive architecture gives the best quality browsing experience - whether on a smartphone, tablet, netbook or e-reader, and regardless of the operating system. People who browse while on-the-go have very different needs than those sitting at a desk. Responsive web sites re-organize themselves automatically according to the device viewing them, so that the same website provides a great experience everywhere. Desktops get a full-blown interface with videos, large images and animations. Smartphones get a simplified website that runs fast without the bells and whistles. Tablets and netbooks get something in between.[2][3][4]


[6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16] [17] [18] [19] [20] [21] [22] [23] [24] [25]

Physical

Physical Design precedes Web Design and Application Design, back to the Iron Age of starting to make progressively better and easier to use tools, better designs (early architectures) of houses and man-made constructions, etc. Nowadays we are seeing an integration between Physical and Digital Design practices, methodologies and in some cases principles.

Systems

Systems Analysis & Design.

Systems Thinking

[26] [27] [28] [29] [30] [31] [32] [33] [34] Tools for Systems Thinkers: The 6 Fundamental Concepts of Systems Thinking: https://medium.com/disruptive-design/tools-for-systems-thinkers-the-6-fundamental-concepts-of-systems-thinking-379cdac3dc6a [35] [36]< ref>Pinterest - Systems Thinking: https://www.pinterest.ca/theunschool/systems-thinking/</ref> [37] [38] [39] [40] [41] [42] [43] [44] [45]


TOGAF

[46] [47] [48] [49] [50]

Virtual

Designing Virtual Worlds is typically done in a way to emulate Physical Designs in the real-world, however they could represent designs that are "out-of-this-world" or entirely fictional in nature.

Virtual Worlds


Art Design


High Brow

Web Design

Web Design, as well as the wider world of UI design for desktop and embedded applications, is a very particular subset of Design which requires specific tools and knowledge.

[57] [58] [59] [60]

Mobile Web Design

Specialized area of Web Design focused on Mobile device usability.

See: Mobile Web Design [61]

Material Design

[62]

Mobile-first

Designing for Mobile devices, mobile usage patterns and mobile user experiences/preferences first, then (disproportionately) thinking about how the application will function, look & feel on a larger more stationary device (such laptops, computers, small devices hooked up to larger screens, TVs, etc).

[63]

Progressive Enhancement

Starting with a base set of features that work regardless of what combination of versions of Browser/Device/OS

[64]

Graceful Degradation

[65] [66] [67] [68] [69]

Skeumorph

Designing digital components, effects, or experiences as intentional attempts at recreations or approximations of real-world objects.

Product

Branding

Book Cover Design

Other




Tools

Architecture

Heatmapping

MindMapping

[70]

Cause-Effect

Wireframing

[74][75][76][77] [78] [79]

Workflow

Workflow is the set of processes and data relationships required to fulfill a specific task. Designing a workflow is an important step to successful software development.[80]

[81]

Sequence

A Sequence is the order in which specific actions or system-level workflows should be carried out.

Precedence

[82] [83] [84]

Database

Database design involves the architecture of an application's data objects and entities. It must address critical questions such as what objects or data types will we be working with, who will use the system, how will they use it, what types of information will they be most likely to look for, when and how often will they look for each type, will there be any particular combinations of data commonly requested, among other critical design questions.

Code

See: UML (the leading code design/modeling language)

Code Design/Re-use


Resources


Tutorials


External Links


References

  1. ↑ wikipedia: Responsive web design
  2. ↑ Responsive Web Design - What is it and why should I care?: http://responsivedesign.ca/blog/responsive-web-design-what-is-it-and-why-should-i-care
  3. ↑ How to decide between a responsive website or a native mobile app: http://thenextweb.com/dd/2014/02/08/decide-responsive-website-native-mobile-app/
  4. ↑ The Pros and Cons of Responsive Web Design vs. Mobile Website vs. Native App: http://designmodo.com/responsive-design-vs-mobile-website-vs-app/
  5. ↑ A Complete Guide to the <Picture> Element: https://longhandpixels.net/blog/2014/02/complete-guide-picture-element
  6. ↑ Creating Intrinsic Ratios for Video: http://alistapart.com/article/creating-intrinsic-ratios-for-video
  7. ↑ Responsive videos: http://www.cssmojo.com/creating-intrinsic-ratios-for-video/
  8. ↑ CSS Elastic Videos: http://webdesignerwall.com/tutorials/css-elastic-videos
  9. ↑ Fluid Width Video: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php | DEMO
  10. ↑ HTML5 Video scale modes?: https://stackoverflow.com/questions/4380105/html5-video-scale-modes
  11. ↑ Responsive HTML5 video: https://www.iandevlin.com/blog/2012/08/html5/responsive-html5-video/
  12. ↑ Shrink a YouTube video to responsive width: https://stackoverflow.com/questions/15844500/shrink-a-youtube-video-to-responsive-width
  13. ↑ Responsive Youtube Embed: http://avexdesigns.com/responsive-youtube-embed/
  14. ↑ Video Scaling (WxH) tool: https://web.archive.org/web/20090514061046/http://www.brianartka.com/jqueryVideoBox.html
  15. ↑ Use screen measurements to design for responsive breakpoints: https://help.optimizely.com/Build_Campaigns_and_Experiments/Use_screen_measurements_to_design_for_responsive_breakpoints
  16. ↑ window.innerWidth in Chrome's device mode: https://stackoverflow.com/questions/36297612/window-innerwidth-in-chromes-device-mode
  17. ↑ How to detect screen size for responsive web design?: https://stackoverflow.com/questions/31162606/how-to-detect-screen-size-for-responsive-web-design
  18. ↑ Using Media Queries For Responsive Design In 2018: http://www.smashingmagazine.com/2018/02/media-queries-responsive-design-2018/
  19. ↑ Best Practices with CSS Grid Layout (in Responsive Web Design context): http://www.smashingmagazine.com/2018/04/best-practices-grid-layout/
  20. ↑ CSS Grid Layout and Accessibility: http://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility
  21. ↑ CSS Grid – Table layout is back. Be there and be square: http://developers.google.com/web/updates/2017/01/css-grid
  22. ↑ Learn CSS Grid by building a simple Calculator Layout: http://freshman.tech/css-grid-calculator/
  23. ↑ How to build a responsive feature list with CSS Flexbox: http://freshman.tech/feature-list/
  24. ↑ How to build a Mobile App Layout with CSS Flexbox: http:?/freshman.tech/flexbox-mobile-app/
  25. ↑ A Complete Guide to Grid: http://css-tricks.com/snippets/css/complete-guide-grid/
  26. ↑ How to recognise a Systems Thinker in your team: https://www.linkedin.com/pulse/how-recognise-systems-thinker-your-team-heidi-de-wolf/?trk=mp-reader-card
  27. ↑ The Pattern Problem: https://www.smithery.com/2017/09/06/the-pattern-problem/
  28. ↑ The Pattern Problem (PRESENTATION): https://www.slideshare.net/gamages/the-pattern-problem/
  29. ↑ Google Firestarters 25 - Patterns of Behaviour: https://www.onlydeadfish.co.uk/only_dead_fish/2017/09/google-firestarters-25-patterns-of-behaviour.html
  30. ↑ Marshaling the Power of Systems Thinking for Sustainable Change: https://www.tcwhp.org/blogposts/marshaling-power-systems-thinking-sustainable-change
  31. ↑ Changing the way we investigate healthcare incidents: https://systemsthinkinglab.com
  32. ↑ Applying Systems Thinking for Nutrition: https://www.spring-nutrition.org/stories/applying-systems-thinking-nutrition
  33. ↑ Overcoming Organizational System Blindness with System Thinking for Greater Productivity: https://aventislearning.com/course/overcoming-organizational-system-blindness-with-system-thinking-for-greater-productivity/
  34. ↑ The 3 Main Systems at Play in the World are...: https://www.disruptdesign.co/blog/the-3-main-systems-at-play-in-the-world-are
  35. ↑ Systems Thinking: What, Why, When, Where, and How?: https://thesystemsthinker.com/systems-thinking-what-why-when-where-and-how/
  36. ↑ Tools for Systems Thinkers: Getting into Systems Dynamics… and Bathtubs: https://medium.com/disruptive-design/tools-for-systems-thinkers-getting-into-systems-dynamics-and-bathtubs-1f961f7c4073
  37. ↑ Observe Orient Decide Act (OODA) -- Agile Business is More About Manoeuvrability Than Speed: https://medium.com/building-the-agile-business/agile-business-is-more-about-manoeuvrability-than-speed-c4de10980d33
  38. ↑ Platform Economics: https://www.onlydeadfish.co.uk/only_dead_fish/2017/08/platform-business-economics.html (podcast episode)
  39. ↑ What I learned from 100’s of hours studying platform businesses (Platform Building Basics) — Part 1: https://medium.com/@smitty/what-i-learned-from-100-s-of-hours-studying-platform-businesses-platform-building-basics-part-1-1ae6e75c6cf0
  40. ↑ What I learned from 100’s of hours studying platform businesses (Platform Growth Tactics)— Part 2: https://medium.com/@smitty/what-i-learned-from-100-s-of-hours-studying-platform-businesses-platform-growth-tactics-part-2-aa140a5dd3d4
  41. ↑ What is a Bottleneck and How to Deal With It?: https://kanbanize.com/lean-management/pull/what-is-bottleneck/
  42. ↑ How to locate the bottleneck in your system (Gaming Computer): https://www.reddit.com/r/buildapc/comments/5tbdp2/guide_how_to_locate_the_bottleneck_in_your_system/
  43. ↑ Systems Thinking and the Theory of Constraints: https://www.slideserve.com/nodin/systems-thinking-and-the-theory-of-constraints
  44. ↑ Seed Systems -- "Systems Thinking in Agriculture" course: http://www.seedsystems.net
  45. ↑ What Airbnb, Uber, and Alibaba Have in Common: https://hbr.org/2014/11/what-airbnb-uber-and-alibaba-have-in-common
  46. ↑ wikipedia: The Open Group Architecture Framework
  47. ↑ wikipedia: TAFIM (Technical Architecture Framework for Information Management)
  48. ↑ TOGAF library: https://publications.opengroup.org/togaf-library
  49. ↑ What is TOGAF?: https://www.visual-paradigm.com/guide/togaf/what-is-togaf/
  50. ↑ What is TOGAF? An enterprise architecture methodology for business: https://www.cio.com/article/3251707/what-is-togaf-an-enterprise-architecture-methodology-for-business.html
  51. ↑ Ikko Tanaka's works recreated in pure HTML/CSS: https://codepen.io/yuanchuan/pen/MQEeJo
  52. ↑ 9 GIFs That Explain the difference between Adaptive Design & Responsive Design Brilliantly: https://www.fastcodesign.com/3038367/9-gifs-that-explain-responsive-design-brilliantly-2
  53. ↑ What is the difference between responsive vs. adaptive web design?http://www.techrepublic.com/blog/web-designer/what-is-the-difference-between-responsive-vs-adaptive-web-design/
  54. ↑ Responsive vs. Adaptive Design: Which Is Best for Publishers?: http://www.huffingtonpost.com/garrett-goodman/adaptive-design_b_2344569.html
  55. ↑ Adaptive Vs. Responsive Design: http://usabilitygeek.com/adaptive-vs-responsive-design/
  56. ↑ Responsive vs. Adaptive Design: What’s the Best Choice for Designers?: https://www.uxpin.com/studio/blog/responsive-vs-adaptive-design-whats-best-choice-designers/
  57. ↑ Web design is now completely boring: https://thenextweb.com/opinion/2015/09/23/zzzzzz/#.tnw_0Kr8nIPQ
  58. ↑ U.S. Federal Government -- Web Design System spec: https://designsystem.digital.gov
  59. ↑ 3 practical cheat sheets for designing attention grabbing UIs: https://uxdesign.cc/3-practical-cheat-sheets-for-designing-attention-grabbing-uis-318e588bd864
  60. ↑ Why Everyone Always Hates Redesigns, Even When They’re Good: https://onezero.medium.com/why-everyone-always-hates-redesigns-even-when-theyre-good-26776604b5e9
  61. ↑ USA Today Network Finds Success With Mobile Redesign: https://www.mediapost.com/publications/article/327566/usa-today-network-finds-success-with-mobile-redesi.html
  62. ↑ Meet Material-UI — your new favorite user interface library: https://medium.freecodecamp.org/meet-your-material-ui-your-new-favorite-user-interface-library-6349a1c88a8c
  63. ↑ Hacking user perception to make your websites and apps feel faster: https://medium.com/dev-channel/hacking-user-perception-to-make-your-websites-and-apps-feel-faster-922636b620e3
  64. ↑ Designing with Progressive Enhancement -- Building the Web that Works for Everyone (BOOK): https://www.filamentgroup.com/dwpe/
  65. ↑ W3C - Graceful degradation versus progressive enhancement: https://www.w3.org/wiki/Graceful_degradation_versus_progressive_enhancement
  66. ↑ Progressive Enhancement and Graceful Degradation - an Overview: https://www.sitepoint.com/progressive-enhancement-graceful-degradation-basics/
  67. ↑ What is the difference between Progressive Enhancement and Graceful Degradation?: https://stackoverflow.com/questions/2550431/what-is-the-difference-between-progressive-enhancement-and-graceful-degradation
  68. ↑ Progressive Enhancement vs Graceful Degradation: https://www.mavenecommerce.com/2017/10/31/progressive-enhancement-vs-graceful-degradation/
  69. ↑ Graceful Degradation as a Feature: https://www.infoq.com/presentations/graceful-degradation-chaos-engineering/
  70. ↑ Top 10 Free Online Mind Mapping Tools: http://freenuts.com/top-10-free-online-mind-mapping-tools/
  71. ↑ Cause and Effect Analysis -- Identifying the Likely Causes of Problems: https://www.mindtools.com/pages/article/newTMC_03.htm
  72. ↑ The Cause and Effect (a.k.a. Fishbone) Diagram: https://www.isixsigma.com/tools-templates/cause-effect/cause-and-effect-aka-fishbone-diagram/
  73. ↑ wikipedia: Axure RP
  74. ↑ Wireframing Marathon Starts!: http://ciohappyhour.com/wireframing-marathon-starts/#more-215
  75. ↑ 10 Free Wireframing Tools for Designers: http://mashable.com/2010/07/15/wireframing-tools/
  76. ↑ Web Design - Top 5 Wireframing Tools: http://www.cmswire.com/cms/featured-articles/web-design-top-5-wireframing-tools-002922.php
  77. ↑ Top 20 Wireframe Tools: http://garmahis.com/reviews/wireframe-tools/
  78. ↑ Wireframes -- past, present & future: https://www.justinmind.com/blog/the-future-of-wireframing/
  79. ↑ How to Create Mockups, Wireframes and Interactive App Prototypes With Apple Keynote In 30 Minutes Or Less: http://keynotopia.com/guides/
  80. ↑ If you can't talk to your colleagues, this is the design language for you: http://www.zdnet.com/article/if-you-cant-talk-to-your-colleagues-this-is-the-design-language-for-you/
  81. ↑ wikipedia: Workflow
  82. ↑ What is Precedence Diagramming Method in Project Management?: https://www.invensislearning.com/articles/pmp/precedence-diagramming-method
  83. ↑ The 4 Types of Relationships in Precedence Diagramming Method: https://blog.masterofproject.com/precedence-diagramming-method/
  84. ↑ Time Management & Precedence Diagramming: https://www.io4pm.org/Time_Management.php
  85. ↑ How the Boston Globe Pulled Off HTML5 Responsive Design: http://www.readwriteweb.com/mobile/2011/09/how-the-boston-globe-pulled-of.php
  86. ↑ What is the opposite of skeuomorphism?: http://www.quora.com/What-is-the-opposite-of-skeuomorphism
  87. ↑ A Look at Flat Design and Why It's Significant: http://uxmag.com/articles/a-look-at-flat-design-and-why-its-significant
  88. ↑ PROOF from archived jQuery site that inspiration for the logo/branding came from Devo: http://blog.jquery.com/2008/08/29/jquerycom-site-redesign/

See Also

UI/UX | HCI | GUI | UML | ERD (DB Design) | CSS/JS (Web Design) | Programming (Design patterns) | Rules (Business Process Modeling/Design) | Testing (Test Design) | Marketing (Design Research)

Retrieved from "http://wiki.bcmoney-mobiletv.com/index.php?title=Design&oldid=59619#Web_Design"