Design

General

See also UI, Lorem ipsum, Typograhy, Documents, Graphics, Being, etc.

• https://en.wikipedia.org/wiki/Design

• https://en.wikipedia.org/wiki/Design_thinking - refers to the set of cognitive, strategic and practical procedures used by designers in the process of designing, and to the body of knowledge that has been developed about how people reason when engaging with design problems. Design thinking is also associated with prescriptions for the innovation of products and services within business and social contexts.

• https://en.wikipedia.org/wiki/Design_methods - are procedures, techniques, aids, or tools for designing. They offer a number of different kinds of activities that a designer might use within an overall design process. Conventional procedures of design, such as drawing, can be regarded as design methods, but since the 1950s new procedures have been developed that are more usually grouped together under the name of "design methods". What design methods have in common is that they "are attempts to make public the hitherto private thinking of designers; to externalise the design process". Design methodology is the broader study of method in design: the study of the principles, practices and procedures of designing. Design methodology is the broader study of method in design: the study of the principles, practices and procedures of designing.

Design methods originated in new approaches to problem solving developed in the mid-20th Century, and also in response to industrialisation and mass-production, which changed the nature of designing. A "Conference on Systematic and Intuitive Methods in Engineering, Industrial Design, Architecture and Communications", held in London in 1962 is regarded as a key event marking the beginning of what became known within design studies as the "design methods movement", leading to the founding of the Design Research Society and influencing design education and practice. Leading figures in this movement in the UK were J. Christopher Jones at the University of Manchester and L. Bruce Archer at the Royal College of Art.

The movement developed through further conferences on new design methods in the UK and USA in the 1960s. The first books on rational design methods, and on creative methods also appeared in this period. New approaches to design were developing at the same time in Germany, notably at the Ulm School of Design (Hochschule für Gestaltung–HfG Ulm) (1953–1968) under the leadership of Tomás Maldonado. Design teaching at Ulm integrated design with science (including social sciences) and introduced new fields of study such as cybernetics, systems theory and semiotics into design education. Bruce Archer also taught at Ulm, and another influential teacher was Horst Rittel. In 1963 Rittel moved to the School of Architecture at the University of California, Berkeley, where he helped found the Design Methods Group, a society focused on developing and promoting new methods especially in architecture and planning. At the end of the 1960s two influential, but quite different works were published: Herbert A. Simon's The Sciences of the Artificial and J. Christopher Jones's Design Methods. Simon proposed the "science of design" as "a body of intellectually tough, analytic, partly formalizable, partly empirical, teachable doctrine about the design process", whereas Jones catalogued a variety of approaches to design, both rational and creative, within a context of a broad, futures creating, systems view of design.

The 1970s saw some reaction against the rationality of design methods, notably from two of its pioneers, Christopher Alexander and J. Christopher Jones. Fundamental issues were also raised by Rittel, who characterised design and planning problems as wicked problems, un-amenable to the techniques of science and engineering, which deal with "tame" problems. The criticisms turned some in the movement away from rationalised approaches to design problem solving and towards "argumentative", participatory processes in which designers worked in partnership with the problem stakeholders (clients, customers, users, the community). This led to participatory design, user centered design and the role of design thinking as a creative process in problem solving and innovation. However, interest in systematic and rational design methods continued to develop strongly in engineering design during the 1980s; for example, through the Conference on Engineering Design series of The Design Society and the work of the Verein Deutscher Ingenieure association in Germany, and also in Japan, where the Japanese Society for the Science of Design had been established as early as 1954. Books on systematic engineering design methods were published in Germany and the UK. In the USA the American Society of Mechanical Engineers Design Engineering Division began a stream on design theory and methodology within its annual conferences. The interest in systematic, rational approaches to design has led to design science and design science (methodology) in engineering and computer science.

• https://en.wikipedia.org/wiki/Design_system - a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. Design systems aid in digital product design and development of products such as applications or websites. They may contain, but are not limited to, pattern libraries, design languages, style guides, coded components, brand languages, and documentation.

• https://en.wikipedia.org/wiki/Design_rationale - an explicit documentation of the reasons behind decisions made when designing a system or artifact. As initially developed by W.R. Kunz and Horst Rittel, design rationale seeks to provide argumentation-based structure to the political, collaborative process of addressing wicked problems.

• https://en.wikipedia.org/wiki/Affordance - what the environment offers the individual. In design, affordance has a narrower meaning, it refers to possible actions that an actor can readily perceive. American psychologist James J. Gibson coined the term in his 1966 book, The Senses Considered as Perceptual Systems, and it occurs in many of his earlier essays. His best-known definition is from his 1979 book, The Ecological Approach to Visual Perception: The affordances of the environment are what it offers the animal, what it provides or furnishes, either for good or ill. ... It implies the complementarity of the animal and the environment. The word is used in a variety of fields: perceptual psychology, cognitive psychology, environmental psychology, criminology, industrial design, human–computer interaction (HCI), interaction design, user-centered design, communication studies, instructional design, science, technology and society (STS), sports science and artificial intelligence. Gibson developed the concept of affordance over many years, culminating in his final book, The Ecological Approach to Visual Perception in 1979. He defined an affordance as what the environment provides or furnishes the animal. Notably, Gibson compares an affordance with an ecological niche emphasizing the way niches characterize how an animal lives in its environment.

• https://en.wikipedia.org/wiki/Philosophy_of_design - the study of definitions of design, and the assumptions, foundations, and implications of design. The field, which is mostly a sub-discipline of aesthetics, is defined by an interest in a set of problems, or an interest in central or foundational concerns in design. In addition to these central problems for design as a whole, many philosophers of design consider these problems as they apply to particular disciplines (e.g. philosophy of art). Although most practitioners are philosophers of aesthetics (i.e., aestheticians), several prominent designers and artists have contributed to the field. For an introduction to the philosophy of design see the article by Per Galle at the Royal Danish Academy.

• https://en.wikipedia.org/wiki/Design_science - introduced in 1957 by R. Buckminster Fuller who defined it as a systematic form of designing. He expanded on this concept in his World Design Science Decade proposal to the International Union of Architects in 1961. The term was later used by S. A. Gregory in the 1965 'The Design Method' Conference where he drew the distinction between scientific method and design method. Gregory was clear in his view that design was not a science and that design science referred to the scientific study of design. Herbert Simon in his 1968 Karl Taylor Compton lectures used and popularized these terms in his argument for the scientific study of the artificial (as opposed to the natural). Over the intervening period the two uses of the term (systematic designing and study of designing) have co-mingled to the point where design science may have both meanings: a science of design and design as a science

• https://en.wikipedia.org/wiki/Design_science_(methodology) - a research paradigm focusing on the development and validation of prescriptive knowledge in information science. Herbert Simon distinguished the natural sciences, concerned with explaining how things are, from design sciences which are concerned with how things ought to be, that is, with devising artifacts to attain goals.[further explanation needed] Design science research methodology refers to the research methodologies associated with this paradigm. It spans the methodologies of several research disciplines, for example information technology, which offers specific guidelines for evaluation and iteration within research projects. Design science research focuses on the development and performance of (designed) artifacts with the explicit intention of improving the functional performance of the artifact. Design science research methodology is typically applied to categories of artifacts including algorithms, human/computer interfaces, design methodologies (including process models) and languages. Its application is most notable in the Engineering and Computer Science disciplines, though is not restricted to these and can be found in many disciplines and fields. Design science research, or constructive research, in contrast to explanatory science research, has academic research objectives generally of a more pragmatic nature.

• https://en.wikipedia.org/wiki/Design_research - originally constituted as primarily research into the process of design, developing from work in design methods, but the concept has been expanded to include research embedded within the process of design, including work concerned with the context of designing and research-based design practice. The concept retains a sense of generality, aimed at understanding and improving design processes and practices quite broadly, rather than developing domain-specific knowledge within any professional field of design.

• https://en.wikipedia.org/wiki/Design_language - or design vocabulary is an overarching scheme or style that guides the design of a complement of products or architectural settings, creating a coherent design system for styling.

• https://en.wikipedia.org/wiki/Visual_design_elements_and_principles - fundamental ideas about the practice of visual design.

• https://en.wikipedia.org/wiki/Composition_(visual_arts)

• https://en.wikipedia.org/wiki/Design_studies - can refer to any design-oriented studies but is more formally an academic discipline or field of study that pursues, through both theoretical and practical modes of inquiry, a critical understanding of design practice and its effects in society.

• https://en.wikipedia.org/wiki/Design_history - the study of objects of design in their historical and stylistic contexts. With a broad definition, the contexts of design history include the social, the cultural, the economic, the political, the technical and the aesthetic. Design history has as its objects of study all designed objects including those of architecture, fashion, crafts, interiors, textiles, graphic design, industrial design and product design. Design theorists revamp historical techniques and they use these aspects to create more sophisticated techniques of design. It acts as a tool to better future aspects of design.

• https://en.wikipedia.org/wiki/Design_brief - a document for a design project developed by a person or team (the designer or design team) in consultation with the client/customer. They outline the deliverables and scope of the project including any products or works (function and aesthetics), timing and budget. They can be used for many projects including those in the fields of architecture, interior design and industrial design. Design briefs are also used to evaluate the effectiveness of a design after it has been produced and during the creation process to keep the project on track and on budget.

• https://en.wikipedia.org/wiki/Universal_design - the design of buildings, products or environments to make them accessible to all people, regardless of age, disability or other factors.

• Eames: Design is a Method of Action [1]

• Dieter Rams: ten principles for good design
  • Applying Dieter Ram’s ten principles to web design

• Paul Rand: Thoughts on Design

• https://chrisrust.wordpress.com/1998/12/31/how-designers-work-making-sense-of-authentic-cognitive-activity

• william-lidwell-kritina-holden-jill-butler-universal-principles-of-design-rockport-publishers-2003.pdf

• https://en.wikipedia.org/wiki/User-centered_design - or user-driven development (UDD) is a framework of process (not restricted to interfaces or technologies) in which usability goals, user characteristics, environment, tasks and workflow of a product, service or process are given extensive attention at each stage of the design process. These tests are conducted with/without actual users during each stage of the process from requirements, pre-production models and post production, completing a circle of proof back to and ensuring that "development proceeds with the user as the center of focus." Such testing is necessary as it is often very difficult for the designers of a product to understand intuitively the first-time users of their design experiences, and what each user's learning curve may look like. User-centered design is based on the understanding of a user, their demands, priorities and experiences and when used, is known to lead to an increased product usefulness and usability as it delivers satisfaction to the user.

• https://en.wikipedia.org/wiki/Contextual_design - a user-centered design process developed by Hugh Beyer and Karen Holtzblatt. It incorporates ethnographic methods for gathering data relevant to the product via field studies, rationalizing workflows, and designing human–computer interfaces. In practice, this means that researchers aggregate data from customers in the field where people are living and applying these findings into a final product. Contextual design can be seen as an alternative to engineering and feature driven models of creating new systems.

• https://en.wikipedia.org/wiki/Use_case - In software and systems engineering, the phrase use case is a polyseme with two senses: A usage scenario for a piece of software; often used in the plural to suggest situations where a piece of software may be useful. A potential scenario in which a system receives an external request (such as user input) and responds to it.

• https://en.wikipedia.org/wiki/Scenario_(computing) - a narrative of foreseeable interactions of user roles (known in the Unified Modeling Language as 'actors') and the technical system, which usually includes computer hardware and software.

• https://en.wikipedia.org/wiki/Persona_(user_experience) - also user persona, customer persona, buyer persona) in user-centered design and marketing is a fictional character created to represent a user type that might use a site, brand, or product in a similar way. Personas represent the similarities of consumer groups or segments. They are based on demographic and behavioural information collected from users, qualitative interviews, and participant observation.

• https://en.wikipedia.org/wiki/Product_design - as a verb is to create a new product to be sold by a business to its customers. A very broad coefficient and effective generation and development of ideas through a process that leads to new products. Thus, it is a major aspect of new product development.

• https://en.wikipedia.org/wiki/Open-source_product_development - refers to the development of open-source hardware products performed in a collaborative development process allowing anyone's the participation. OSPD instituted the concept of open-source model in the context of physical products

• https://en.wikipedia.org/wiki/Communication_design - a mixed discipline between design and information-development which is concerned with how media communicate with people. A communication design approach is not only concerned with developing the message in addition to the aesthetics in media, but also with creating new media channels to ensure the message reaches the target audience. Some designers use graphic design and communication design interchangeably due to overlapping skills. Communication design can also refer to a systems-based approach, in which the totality of media and messages within a culture or organization are designed as a single integrated process rather than a series of discrete efforts. This is done through communication channels that aim to inform and attract the attention of the people one is focusing one's skills on. Design skills must be tailored to fit to different cultures of people, while maintaining pleasurable visual design. These are all important pieces of information to add to a media communications kit to get the best results.

• https://en.wikipedia.org/wiki/Interaction_design - often abbreviated as IxD, is "the practice of designing interactive digital products, environments, systems, and services.", 30 While interaction design has an interest in form (similar to other design fields), its main area of focus rests on behavior.: xxvii, 30 Rather than analyzing how things are, interaction design synthesizes and imagines things as they could be. This element of interaction design is what characterizes IxD as a design field, as opposed to a science or engineering field. Interaction design borrows from a wide range of fields like psychology, human-computer interaction, information architecture, and user research to create designs that are tailored to the needs and preferences of users. This involves understanding the context in which the product will be used, identifying user goals and behaviors, and developing design solutions that are responsive to user needs and expectations. While disciplines such as software engineering have a heavy focus on designing for technical stakeholders, interaction design is focused on meeting the needs and optimizing the experience of users, within relevant technical or business constraints.

• https://en.wikipedia.org/wiki/Interaction_cost - can comprise work, costs, and other expenses, required to complete a task or interaction

• https://en.wikipedia.org/wiki/Service_design - the activity of planning and arranging people, infrastructure, communication and material components of a service in order to improve its quality, and the interaction between the service provider and its users. Service design may function as a way to inform changes to an existing service or create a new service entirely. The purpose of service design methodologies is to establish the most effective practices for designing services, according to both the needs of users and the competencies and capabilities of service providers. If a successful method of service design is adapted then the service will be user-friendly and relevant to the users, while being sustainable and competitive for the service provider. For this purpose, service design uses methods and tools derived from different disciplines, ranging from ethnography to information and management science to interaction design.

• https://en.wikipedia.org/wiki/Ecological_design - or ecodesign is an approach to designing products and services that gives special consideration to the environmental impacts of a product over its entire lifecycle. Sim Van der Ryn and Stuart Cowan define it as "any form of design that minimizes environmentally destructive impacts by integrating itself with living processes." Ecological design can also be defined as the process of integrating environmental considerations into design and development with the aim of reducing environmental impacts of products through their life cycle. The idea helps connect scattered efforts to address environmental issues in architecture, agriculture, engineering, and ecological restoration, among others. The term was first used by John Button in 1998. Ecological design was originally conceptualized as the “adding in “of environmental factor to the design process, but later turned to the details of eco-design practice, such as product system or individual product or industry as a whole. With the inclusion of life cycle modeling techniques, ecological design was related to the new interdisciplinary subject of industrial ecology.

• https://en.wikipedia.org/wiki/Emotional_Design - both the title of a book by Donald Norman and of the concept it represents.

• https://en.wikipedia.org/wiki/Kansei_engineering - emotional or affective engineering, aims at the development or improvement of products and services by translating the customer's psychological feelings and needs into the domain of product design (i.e. parameters).

• https://en.wikipedia.org/wiki/Critical_design - uses design fiction and speculative design proposals to challenge assumptions and conceptions about the role objects play in everyday life. Critical design plays a similar role to product design, but does not emphasize an object's commercial purpose or physical utility. It is mainly used to share a critical perspective or inspire debate, while increasing awareness of social, cultural, or ethical issues in the eyes of the public. Critical design was popularized by Anthony Dunne and Fiona Raby through their firm, Dunne & Raby. Critical design can make aspects of the future physically present to provoke a reaction. "Critical design is critical thought translated into materiality. It is about thinking through design rather than through words and using the language and structure of design to engage people." It may be conflated with the critical theory or the Frankfurt School, but it is not related.

• https://en.wikipedia.org/wiki/Design_fiction - a design practice aiming at exploring and criticising possible futures by creating speculative, and often provocative, scenarios narrated through designed artifacts. It is a way to facilitate and foster debates, as explained by futurist Scott Smith: "... design fiction as a communication and social object creates interactions and dialogues around futures that were missing before. It helps make it real enough for people that you can have a meaningful conversation with". By inspiring new imaginaries about the future, Design Fiction moves forward innovation perspectives, as conveyed by author Bruce Sterling's own definition: "Design Fiction is the deliberate use of diegetic prototypes to suspend disbelief about change".

• https://en.wikipedia.org/wiki/Product_design

• https://en.wikipedia.org/wiki/Web_design

• Building games that can be understood at a glance - Zach Gage, GDC 2018

• https://bradfrostweb.com/blog/post/atomic-web-design/

• https://quotesondesign.com/

• A Crash Course in Information & Visual Design - September 29 2012

• https://news.ycombinator.com/item?id=4600256

• https://technori.com/2012/10/2612-behavior-design-bootcamp/
  • https://technori.com/2012/10/2613-behavior-design-bootcamp-day-2/

• https://en.wikipedia.org/wiki/Interaction_design

• https://www.cooper.com/journal/2013/01/self-study-interaction-design.html

• https://designobserver.com/

• https://www.core77.com/

• https://www.creativereview.co.uk/

• https://hackdesign.org/

• https://medium.com/facebook-design/critique-is-an-important-part-of-any-design-process-whether-you-work-as-part-of-a-team-or-solo-ef3dcb299ce3 [2]

Patterns

See also Living#Patterns, Organisation#Patterns, Computing#Patterns

• https://en.wikipedia.org/wiki/Design_pattern

• https://en.wikipedia.org/wiki/Interaction_design_pattern

• https://en.wikipedia.org/wiki/Evidence-based_design - the process of constructing a building or physical environment based on scientific research to achieve the best possible outcomes. Evidence-based design is especially important in evidence-based medicine, where research has shown that environment design can affect patient outcomes. It is also used in architecture, interior design, landscape architecture, facilities management, education, and urban planning. Evidence-based design is part of the larger movement towards evidence-based practices.

• https://en.wikipedia.org/wiki/Visual_hierarchy - according to Gestalt psychology, is a pattern in the visual field wherein some elements tend to "stand out," or attract attention, more strongly than other elements, suggesting a hierarchy of importance. While it may occur naturally in any visual field, the term is most commonly used in design (especially graphic design and cartography), where elements are intentionally designed to make some look more important than others. This order is created by the visual contrast between forms in a field of perception. Objects with highest contrast to their surroundings are recognized first by the human mind.

• https://en.wikipedia.org/wiki/Design_Patterns_(book)

• http://patternry.com/patterns
• http://sideproject.io/outdated-ux-patterns

• Home | Laws of UX - [3]

• http://darkpatterns.org/
  • http://www.90percentofeverything.com/2013/07/23/the-slippery-slope/
  • YouTube: How Dark Patterns Trick You Online

• https://rationalconspiracy.com/2016/04/24/dark-patterns-by-the-boston-globe/ [4]

• http://patternlab.io/

• http://www.inf.ed.ac.uk/teaching/courses/seoc/2005_2006/resources/statecharts.pdf

• http://emeeks.github.io/gestaltdataviz/section1.html [5]

• http://emeeks.github.io/gestaltdataviz/section2.html

• http://emeeks.github.io/gestaltdataviz/section3.html

• http://www.designkit.org/resources/1

• http://www.doctordisruption.com/design/principles-of-design-45-cathedral-effect/ [6]

• https://medium.com/@lucabenazzi/dark-patterns-in-action-24d8cd1d8684 [7]

• https://en.wikipedia.org/wiki/Think_aloud_protocol

• https://en.wikipedia.org/wiki/Partial_concurrent_thinking_aloud

• UX Kits

• UX Flowchart Cards

• UI Flowchart Cards - for website builders, designers and developers - [8]

• The Technology Code of Practice - GOV.UK

News

• https://news.layervault.com/

• http://sidebar.io/

Open

• https://en.wikipedia.org/wiki/Open-design_movement - involves the development of physical products, machines and systems through use of publicly shared design information. This includes the making of both free and open-source software (FOSS) as well as open-source hardware. The process is generally facilitated by the Internet and often performed without monetary compensation. The goals and philosophy of the movement are identical to that of the open-source movement, but are implemented for the development of physical products rather than software. Open design is a form of co-creation, where the final product is designed by the users, rather than an external stakeholder such as a private company.

• Open Source Design - a community of designers and developers pushing for more open design processes and improving the user experience and interface design of open-source software.* Open Source Design

• https://en.wikipedia.org/wiki/Open-source_appropriate_technology - is appropriate technology developed through the principles of the open-design movement. Appropriate technology is technology designed with special consideration to the environmental, ethical, cultural, social, political, and economic aspects of the community it is intended for. Open design is public and licensed to allow it to be used, modified and distributed freely.

Design and brand guides

• UX Bookmark: A huge list of Style Guides and UI Guidelines
• http://www.logodesignlove.com/brand-identity-style-guides
• http://www.creativebloq.com/branding/great-examples-design-style-guides-3132070

• http://alistapart.com/article/creating-style-guides [9]
• http://www.nuxeo.com/blog/development/2012/12/why-you-need-a-ui-style-guide/

• Facebook: Social Design
• Drupal.org website style guide

• Government Digital Service - Design Principles
• http://www.channel4.com/about_c4/styleguide/downloads/C4StyleGuide1.1.pdf

• http://www.ibm.com/design/work.shtml

• UX Booth Style Guide
• The Chicago Manual of Style

• Android Design
• Material Design

• https://developer.apple.com/library/ios/documentation/userexperience/conceptual/MobileHIG/index.html
• https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/AppleHIGuidelines/Intro/Intro.html

• http://msdn.microsoft.com/en-us/library/windows/apps/hh781237.aspx

• http://ustwo.com/ppp/
• https://ux.mailchimp.com/patterns/
• http://rizzo.lonelyplanet.com/styleguide/design-elements/colours
• http://www.barnardlevit.co.uk/style-guide
• https://news.ycombinator.com/item?id=7219795 - yelp

• http://thestandardsmanual.com/

Inspiration

• http://www.openculture.com/2016/03/3900-pages-of-paul-klees-personal-notebooks-are-now-online.html [10]

• http://www.visualcomplexity.com/vc/

• http://www.niice.co/

• http://dribbble.com/

• http://designbump.com/

• http://insideintercom.io/the-dribbblisation-of-design/

• https://rrrepo.co/
  • https://rrrepo.co/repo/designDocumentaries [11]

• It's Nice That - Our mission is to inspire the global creative community. We share stories, offer insights and bring people together to help them make more of their creativity. It’s Nice That was founded in 2007 in response to a university brief to “put something into the public domain that makes people feel better about themselves”. Right from the start, we were built by creatives, for creatives. Since then, It’s Nice That has grown to become one of the leading platforms globally for the creative community, encompassing an award-winning website, a range of social channels, a regular live events series and a top-ranking podcast.

Project

• https://en.wikipedia.org/wiki/Scope_(project_management)

• https://en.wikipedia.org/wiki/Requirements_analysis
• https://en.wikipedia.org/wiki/Requirements_elicitation
• https://en.wikipedia.org/wiki/Specification_(technical_standard)

• https://en.wikipedia.org/wiki/Creative_brief
• https://en.wikipedia.org/wiki/Design_rationale

• https://en.wikipedia.org/wiki/Iterative_design

• http://keepwomen.com/static_pages/checklist_tool [12]

• http://wunderkraut.com/blog/how-to-fail-in-a-drupal-project-fixed-price-contracts/2013-07-10
• http://tracerbullets.wordpress.com/2013/09/05/i-have-another-bull-in-the-next-field/
• http://www.reddit.com/r/web_design/comments/1mftyi/screwed_by_paypal_what_marketplacespayment/cc8yf4n

• Atlassian Design System - Use Atlassian's end-to-end design language to create simple, intuitive and beautiful experiences.

Estimation

• http://civicactions.com/estimating-worksheet
• http://london2011.drupal.org/bofsession/drupal-estimating-techniques
• http://www.lullabot.com/articles/art-estimation
• http://www.mountaingoatsoftware.com/books/1-agile-estimating-and-planning
• http://dev.nodeone.se/node/561

• http://www.alistapart.com/articles/pricing-strategy-for-creatives/
• http://coding.abel.nu/2012/06/programmer-time-translation-table/

Content

• Define UX+IA to fit context of content and users
  • What kinds of users? What do they want to see? (User story?)
  • Create/brainstorm a sitemap outline/diagram of pages(/addresses)
  • What are the primary pages/areas of the site?
  • What info to display on each of these for their users?
  • What content needs to be written?
  • What elements (content areas, etc.) go on each page?
    • Page (as a part of the site as a whole)
    • Primary navigation always available
    • Secondary area navigation depends on area (or subarea) context
    • Primary page info/content
    • Secondary blocks of info/content
  • Wireframe layout for mobile first and desktop (and then tablet)
  • How can the project brand differ yet retain continuity in each area its pages?

Design

• Atomic Design | Brad Frost

Brief

• https://en.wikipedia.org/wiki/Design_brief
• The Ultimate Design Brief

Guides and examples

• The product design sprint: a five-day recipe for startups | Google Ventures

• Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web. They help form a common visual language between the designers and the stakeholders and provide a catalyst for discussions around the preferences and goals of the client.
  • styletil.es has good ideas but a lack of templates..
  • Style Tiles and How They Work - March 27, 2012

• http://www.creativebloq.com/web-design/style-tiles-4132333 The web designer's guide to style tiles]
• Our New Responsive Design Deliverable: The Style Prototype

• The Nine Pillars of Successful Web Teams - July 9, 2003

• The Anatomy of an Experience Map | Adaptive Path

User centered

• The Web Design Process Everyone Should Follow - o rly?, Dec 16th 2010

• Simple Usability/UX Checklist- March 29th, 2011

• Hacking: Always Design the UX First - June 4th, 2012

• http://en.wikipedia.org/wiki/User_story

• http://www.userstories.com/

• http://www.rallydev.com/help/creating-user-story

• http://www.agileweboperations.com/how-to-estimate-user-stories-when-using-pivotaltracker

• http://www.slideshare.net/JeannieMelinz1/creating-a-website-sitemap

• Numbers, measurements, dates and time - NHS digital service manual [13]

Feedback / annotation

• Design Drop - A visual feedback tool for designers. A new way to conduct design reviews and collect feedback. From typography to color selection, design is all about communicating ideas and eliciting emotion. The feedback received from their clients and coworkers is critical to the success of a design. [14]

• Helio - Test with an Audience. Move with the market to drive your product, website, and marketing forward. Get quick feedback from targeted audience panels in minutes.

Social

See communication

• many2many

etc

GUI and HCI

slashdot, moderation, metamoderation, ontology, etc...

svbtle, kudos;

• http://dcurt.is/codename-svbtle [15] [16], [17]
• http://www.screenr.com/2Pl8

• http://www.reddit.com/r/funny/comments/15ou9b/my_girlfriends_mother_doesnt_understand_facebooks/

Sharing

• http://sharenice.org/

Gamification

• https://en.wikipedia.org/wiki/Gamification

• http://openbadges.org/

• http://www.wired.com/wiredenterprise/2012/11/gamification-customer-service/

• Habitica: Gamify Your Tasks - Apps on Google Play

Other

See also Search#SEO.2C_SEM.2C_SMO

• http://craigmod.com/journal/subcompact_publishing/

• http://demonocracy.info/infographics/world/gold/gold.html - isometric

• http://jtnimoy.net/?q=178 - tron

• http://3dprintingindustry.com/2014/12/08/rendering-3d-haptic-shapes-mid-air-using-ultrasound/

• http://typeslab.com/ [18]

• http://lineshapespace.com/generative-design/ [19]

• http://www.brandsoftheworld.com/

• <Insert title here> - a-phenomenological-framework-for-the-design-of-an-augmented-reality_experience-miears.pdf -

• https://en.wikipedia.org/wiki/Telematic_art - a descriptive of art projects using computer-mediated telecommunications networks as their medium. Telematic art challenges the traditional relationship between active viewing subjects and passive art objects by creating interactive, behavioural contexts for remote aesthetic encounters. Telematics was first coined by Simon Nora and Alain Minc in The Computerization of Society. Roy Ascott sees the telematic art form as the transformation of the viewer into an active participator of creating the artwork which remains in process throughout its duration. Ascott has been at the forefront of the theory and practice of telematic art since 1978 when he went online for the first time, organizing different collaborative online projects.

Generative

• YouTube: Meaning Alchemy - Jason Grinblat -PROCJAM 2018-

Aesthetics

To merge to/from/with Graphics#Resources, Design

• http://www.hongkiat.com/blog/pixel-based-websites/

• https://en.wikipedia.org/wiki/Aesthetics
• https://en.wikipedia.org/wiki/Category:Concepts_in_aesthetics

• https://en.wikipedia.org/wiki/Applied_aesthetics

• https://en.wikipedia.org/wiki/Style

• https://en.wikipedia.org/wiki/Style_(visual_arts)

• https://en.wikipedia.org/wiki/Art
• https://en.wikipedia.org/wiki/Art_criticism
• https://en.wikipedia.org/wiki/Art_movement

• https://en.wikipedia.org/wiki/Classificatory_disputes_about_art

• https://en.wikipedia.org/wiki/Aesthetic_interpretation
• https://en.wikipedia.org/wiki/Against_Interpretation

• https://en.wikipedia.org/wiki/Work_of_art
• frame, situation

• https://en.wikipedia.org/wiki/Performance_art - a performance presented to an audience, traditionally interdisciplinary. Performance may be either scripted or unscripted, random or carefully orchestrated; spontaneous or otherwise carefully planned with or without audience participation. The performance can be live or via media; the performer can be present or absent. It can be any situation that involves four basic elements: time, space, the performer's body, or presence in a medium, and a relationship between performer and audience. Performance art can happen anywhere, in any venue or setting and for any length of time. The actions of an individual or a group at a particular place and in a particular time constitute the work.

• https://en.wikipedia.org/wiki/Liberal_arts
• https://en.wikipedia.org/wiki/Martial_arts

• https://en.wikipedia.org/wiki/Medieval_art
• https://en.wikipedia.org/wiki/Gothic_architecture

• https://en.wikipedia.org/wiki/Renaissance_art

• https://en.wikipedia.org/wiki/Mannerism
• https://en.wikipedia.org/wiki/Baroque
• https://en.wikipedia.org/wiki/Caravaggisti
• https://en.wikipedia.org/wiki/Classicism
• https://en.wikipedia.org/wiki/Dutch_Golden_Age_painting

• https://en.wikipedia.org/wiki/Rococo

• https://en.wikipedia.org/wiki/Neoclassicism
  • https://en.wikipedia.org/wiki/Neoclassical_architecture

• https://en.wikipedia.org/wiki/Romantic_movement

• https://en.wikipedia.org/wiki/William_Morris

• https://en.wikipedia.org/wiki/Realism_(arts)

• https://en.wikipedia.org/wiki/Modernism

• https://en.wikipedia.org/wiki/Minimalism

• https://en.wikipedia.org/wiki/Truth_to_materials
• https://en.wikipedia.org/wiki/Form_follows_function
• https://en.wikipedia.org/wiki/Ornament_and_Crime

• https://en.wikipedia.org/wiki/Conceptual_art

• https://en.wikipedia.org/wiki/Formalism_(art)

• https://en.wikipedia.org/wiki/Neo-Historism

• https://en.wikipedia.org/wiki/Expressionism
• https://en.wikipedia.org/wiki/Abstract_expressionism
• https://en.wikipedia.org/wiki/Surrealism

• https://en.wikipedia.org/wiki/Medium_specificity

• https://en.wikipedia.org/wiki/Reductive_art

• YouTube: Paul Klee, Wilhelm Hausenstein, and the "Problem of Style" | Charles Mark Haxthausen

• https://en.wikipedia.org/wiki/Abstract_art
• https://en.wikipedia.org/wiki/Geometric_abstraction
• https://en.wikipedia.org/wiki/Contemporary_art

• https://en.wikipedia.org/wiki/Neoist

• https://en.wikipedia.org/wiki/Avant-garde
• https://en.wikipedia.org/wiki/Lettrism

• https://en.wikipedia.org/wiki/Situationism
• https://en.wikipedia.org/wiki/Situationism_(psychology)

• https://en.wikipedia.org/wiki/Situationist_International

• https://en.wikipedia.org/wiki/Artist's_Shit

• http://artybollocks.com/

• http://www.smbc-comics.com/?id=3204#comic
• post-modernism

• https://en.wikipedia.org/wiki/Postminimalism

• https://en.wikipedia.org/wiki/Anti-anti-art

• http://en.wikipedia.org/wiki/Framing_(social_sciences)

• http://en.wikipedia.org/wiki/Assemblage_(art)

• https://en.wikipedia.org/wiki/Musivisual_language

• http://en.wikipedia.org/wiki/Shape_and_form_(visual_arts)

• https://en.wikipedia.org/wiki/Painterly
• https://en.wikipedia.org/wiki/Chiaroscuro
• https://en.wikipedia.org/wiki/Bokeh

• https://en.wikipedia.org/wiki/Wabi-sabi

• http://www.openculture.com/2013/10/david-lynch-presents-the-history-of-surrealist-film-1987.html

• http://www.artybollocks.com/

• http://aenism.com/good-taste/

• https://en.wikipedia.org/wiki/Yvonne_Rainer

• http://www.reddit.com/r/PostPoMo

• Hofmann 1.0.0 - A handy tool to draw like Armin Hofmann does. Of Hoffmann's wide range of visual experiments, 3 variations are the focus of this project: variation 51, 52, 53 [Figg.2–3] from the Graphic Design Manual: Principle and Practice. The graphic system is actually very simple: it starts with a grid of dots, and the shapes are then created by joining the dots through tangent lines. For Hofmann, these figures are an exercise in creating relationships between lines and dots: “If the dot is an important element in structure and analysis, the line performs the important duty of construction. It joints, articulates, bears, supports, holds together and protects”.
  • https://github.com/bbtgnn/hofmann-1.0.0

misc

• https://en.wikipedia.org/wiki/New_Aesthetic

• http://www.metamute.org/editorial/articles/manifesto-theory-%E2%80%98new-aesthetic%E2%80%99

• http://infosthetics.com/

• http://en.wikipedia.org/wiki/Cool_(aesthetic)

• http://500letters.org/

• http://www.ieeeghn.org/wiki/index.php/First-Hand:Early_Digital_Art_At_Bell_Telephone_Laboratories,_inc

• http://ffffound.com/

• http://fffff.at/

• http://www.jwz.org/webcollage/
• http://infiniteglitch.com/
• http://cachemonet.com/
• https://news.ycombinator.com/item?id=7413106

• http://www.academia.edu/3279593/A_proposal_for_a_dualistic_ontology_of_art

• http://www.sito.org/synergy/

Art is never finished, only abandoned. Leonardo da Vinci

• http://www.ubuweb.com/

• http://adamferriss.com/nze/

• http://www.metacritic.com/

• http://monoskop.org/
• http://artcontext.org/
• http://web.archive.org/web/20081221113539/http://www.absurd.org/
• http://zombo.com/
• http://www.zoomquilt.org/

• http://hakim.se/experiments/html5/sketch/
• http://nnnnn.org.uk/

• http://www.yyyyyyy.info/

• http://bechdeltest.com/

• http://anasomnia.com/

• http://www.contextfreeart.org/ [20]

• http://www.arkadia.xyz/

other

• http://en.wikipedia.org/wiki/Homogeneity_and_heterogeneity

• http://www.elasticspace.com/2013/03/no-to-no-ui

• http://webdesignledger.com/
  • http://webdesignledger.com/tips/web-design-trends-for-2010

• http://carsonified.com/toolkit/
• http://somerandomdude.com/work/

• https://github.com/adactio/Pattern-Primer

• http://www.brainpickings.org/index.php/2011/03/08/the-transformer-isotype/

• http://llgd.net/

• https://golden-layout.com/ [21]

• https://dribbble.com/tags/logo

• http://rotary-system.tumblr.com

Flat

• http://speckyboy.com/2012/12/11/the-flat-design-aesthetic/ - shit, where did i put those other flat style links
• http://sachagreif.com/the-flat-sink/
• http://daringfireball.net/2013/01/the_trend_against_skeuomorphism
• http://news.ycombinator.com/item?id=5086991
• http://en.wikipedia.org/wiki/Metro_(design_language)
• http://www.matthewmooredesign.com/almost-flat-design/ [22]
• http://blog.wells.ee/less-aesthetic-more-design
• http://sachagreif.com/flat-pixels/
• http://fltdsgn.com/
• http://designmodo.com/flat-design-principles/
• http://www.smashingmagazine.com/2013/07/16/authentic-design/

• http://www.smashingmagazine.com/2009/03/31/backgrounds-in-web-design-examples-and-best-practices-2/

• http://designmodo.com/flat-design-colors/
• http://flatuicolors.com/

• http://dev.hubspot.com/blog/flatten-the-web-with-this-bookmarklet [23]

Examples

• http://land-book.com/
• http://dribbble.com/
• http://forrst.com/

• http://panasonic.net/
• http://happycog.com/

• http://www.pcc-cic.org.uk/

• http://www.creativebloq.com/web-design/top-examples-css-912710

• http://vandelaydesign.com/blog/galleries/attention-to-detail/

• http://pitchfork.com/features/cover-story/reader/bat-for-lashes/

• http://www.webcreme.com/
• http://cssremix.com/
• http://www.cssmania.com/
• http://thethemelist.com/
• http://patterntap.com/

• http://www.behance.net/
• http://www.designkindle.com/
• http://www.premiumpixels.com/
• http://designmoo.com/

• http://capptivate.co/

• http://www.lingscars.com/ - er, attention grabbing
• http://themostamazingwebsiteontheinternet.com/

• http://randomwire.com/why-japanese-web-design-is-so-different [24]

Futurism

• YouTube: Futurist Cusine

Brutalism

• Brutalism and Antidesign -

Glitch

• https://github.com/osromusic/Glitch-Arts-Resources - A curated list of resources for all arts glitch.

Ratios

• http://retinart.net/graphic-design/secret-law-of-page-harmony/

• Applying the Golden Ratio to Your Web Designs - 19th Oct 2010
• tutsplus: Mathematics and Web Design: A Close Relationship - Nov 16th 2010

• Good stories, pity they're not true - On fact and fiction re the golden ratio.

Colour

See Colours

Logos

• https://en.wikipedia.org/wiki/Logo

• http://en.wikipedia.org/wiki/Wordmark

• http://www.paul-rand.com/foundation/thoughts_logosflags

• github: octodex - play on a logo

• http://briandelaney.me/design-inspiration-negative-space-logos-and-symbols

• http://www.brandsoftheworld.com/

• https://news.ycombinator.com/item?id=13782611

Borders

• http://webdesignerwall.com/tutorials/css-decorative-gallery

Shadows

• http://bmccreative.com/blog:subtle-css3-box-shadows
• http://der-auftritt.de/testcase/gradientshadow.html
• http://devblog.xing.com/frontend/a-flexible-shadow-with-background-size/

• https://coderwall.com/p/dw61mg - radial drop shadow

• http://sandbox.juan-i.com/longshadows/

Backgrounds

• http://bradjasper.com/subtle-patterns-bookmarklet/#

• http://www.smashingmagazine.com/2009/03/31/backgrounds-in-web-design-examples-and-best-practices-2/
• http://designwoop.com/2012/02/30-examples-of-subtle-background-textures-in-web-design/
• http://designshack.net/articles/css/create-seamless-web-background-textures-in-minutes/

• http://mudcu.be/bg/

Textures

• http://webdesign.tutsplus.com/tutorials/visuals/the-what-why-and-how-of-textures-in-webdesign/

• https://www.toptal.com/designers/subtlepatterns/
  • https://github.com/atlemo/SubtlePatterns
  • http://line25.com/articles/20-examples-of-subtle-texture-use-in-web-design

• http://rappdaniel.com/noisy/ - png generate

Patterns

• http://www.world-mysteries.com/sar_sage1.htm

• http://lea.verou.me/css3patterns/
  • http://24ways.org/2011/css3-patterns-explained/

• http://www.patternify.com/

• http://patterns.alistapart.com/

• http://www.fleen.org/

Ornamental flourishes

• http://vector.tutsplus.com/articles/web-roundups/250-free-vintage-graphics-flourish-vector-ornaments/
• http://all-silhouettes.com/flourishornaments/
• http://designshack.net/articles/freebies/weekly-freebies-flourishes-and-ornaments/
• http://moorstation.org/typoasis/ornaments/index.htm

Also; dingbat flourish fonts

• http://stackoverflow.com/questions/8903074/technique-for-adding-flourishes-to-div-corners-and-borders-css3-multiple-backgr

• http://www.daveperrett.com/articles/2014/04/07/recreating-the-reeder-two-tone-horizontal-rule-in-pure-css/

Images

• http://xkcd.com/1264/

• http://www.deepart.io/

• https://news.ycombinator.com/item?id=10993919

Buttons

• http://www.chrisnorstrom.com/2012/11/invention-multiple-choice-windowed-slider-ui/ [25]

• http://css-tricks.com/circular-3d-buttons/

Icons

See Typography#Webfont icons and Graphics#Icons

Seperate icons for each menu or list item can be good.

common?;

• About - pages
• FAQ - ?
• Help/Support - !
• Blog - scroll?
• Contact - envelope
• Twitter
• Facebook
• Google+
• RSS

Social icons/brands

• Facebook deep blue; #3B5998
• Twitter blue; #4099FF
• Google plus red; #C85D42

• http://mattbrett.com/blog/design/2005/the-new-standard-feed-icon/

Canvas

• http://asserttrue.blogspot.ca/2012/01/procedural-textures-in-html5-canvas.html

Vector

See also Graphics#SVG

• http://danielmall.com/articles/svg-workflow-for-designers/

Architecture

• https://news.ycombinator.com/item?id=12756925