Difference between revisions of "Design"

From Things and Stuff Wiki
Jump to navigation Jump to search
Line 259: Line 259:
  
 
* http://www.slideshare.net/JeannieMelinz1/creating-a-website-sitemap
 
* http://www.slideshare.net/JeannieMelinz1/creating-a-website-sitemap
 
=== Prototyping ===
 
* http://en.wikipedia.org/wiki/Website_wireframe
 
 
==== Paper ====
 
* [http://en.wikipedia.org/wiki/Paper_prototyping Paper prototyping]
 
 
** [http://960.gs 960.gs] templates
 
** [http://benmartineau.com/works/grids-for-sketching.php Grids for Sketching] - more minimal. 16, 12, 10, 5, 4 and 3 column.
 
* http://www.zurb.com/playground/responsive-sketchsheets
 
 
* http://konigi.com/tools/graph-paper
 
* https://news.ycombinator.com/item?id=7688191
 
 
* http://uxdesign.smashingmagazine.com/2012/09/18/free-download-ux-sketching-wireframing-templates-mobile/
 
* http://www.printfreegraphpaper.com/
 
 
* http://thedesignblitz.com/creative-ui-and-wireframe-sketches/
 
 
==== Mockups and Stencils ====
 
* http://en.wikipedia.org/wiki/Mockup
 
 
* http://37signals.com/svn/posts/1061-why-we-skip-photoshop
 
 
* http://kaioa.com/node/94 - inkscape
 
* http://developer.yahoo.com/ypatterns/about/stencils/
 
* http://konigi.com/tools/omnigraffle-wireframe-stencils
 
* http://www.fuelyourinterface.com/free-web-ui-wireframe-kit/ - psd
 
* http://nigel.mcbryde.com.au/2008/08/an-inkscape-web-design-template/
 
* http://www.jankoatwarpspeed.com/post/2009/12/24/sketching-wireframing-kit.aspx
 
* http://www.dragnet.se/webbdesign/websitewireframes.html - fireworks
 
 
* http://www.axure.com/download-widget-libraries
 
* http://www.admixweb.com/2011/11/01/23-tools-and-resources-for-great-wireframes/
 
* http://www.smashingapps.com/2011/02/02/50-free-web-ui-mobile-ui-wireframe-kits-and-source-files-for-designers.html
 
* http://www.onextrapixel.com/2011/11/16/50-useful-and-free-web-ui-mobile-ui-and-wireframe-kits/
 
 
* http://webstiles.namanyayg.com/
 
 
* http://www.uistencils.com/ - rl, $
 
 
* https://github.com/christiannaths/Redacted-Font
 
 
* http://aarnis.com/demo.html
 
 
==== Software ====
 
* http://pencil.evolus.vn/en-US/Home.aspx [https://news.ycombinator.com/item?id=12889053]
 
 
==== Service ====
 
* [https://gomockingbird.com Mockingbird] - customisable grids(!), can't hide sidebar
 
 
* YouTube: [http://www.youtube.com/watch?v=NWO2vlBHPvI Creating Wireframes: Examples, Advice and Tips]
 
 
* http://wireframe.cc/
 
 
* https://quirktools.com
 
 
* http://placeit.breezi.com/ - screenshots in rl
 
 
* http://www.layoutit.com/build
 
 
* https://www.draw.io/
 
 
* https://moqups.com/
 
 
* http://www.thinkintags.com/
 
 
* https://www.fluidui.com/editor/live/
 
 
* http://creately.com/plans
 
 
* https://www.easel.io/
 
 
* https://wireframe.cc/example
 
 
* http://lumzy.com/app/
 
 
* http://styloapp.com/
 
 
* http://asciiflow.com/
 
 
  
 
=== Annotation ===
 
=== Annotation ===

Revision as of 01:23, 22 May 2018

still hashing about.

Lorem ipsum

General







Patterns

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




News

Design and brand guides

Inspiration

Project

  • Site type and size
    • Basic info and description
    • Additional content
    • Separate pages and areas
    • Custom functionality
  • Aesthetic
    • Brand and style
    • Layout
    • Colour scheme
    • Typography
  • Social?
  • Deadline?



Cloud Web Design

  • Business Card, Articles, Blogging, Image Galleries, etc.
  • WordPress.com, Tumblr.com, etc.
  • From £400.
  • Plus costs (£40/yr for theme & ad-free, plus domain).

Web Site Design and Build

  • Self-hosted Drupal site with bespoke configuration and theme
  • Using process estimation tools vs. budget
  • From £650 (5 days), at £130 a day
  • SSL cert. extra

Hosting and maintenance

  • £15/mth for hosting, plus security upgrades

Support, Training, Consultancy £25/hr for additional backend or administration support, or £100 for a full day consultation.

Cloud site setup and custom theme, from £400, or a full site with bespoke backend and custom theme, starting at £650.


Estimation

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

See Design

Brief

Guides and examples

  • 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.

User centered

Annotation


Social

See communication

etc

GUI and HCI

slashdot, moderationm, metamoderation, ontology, etc...

svbtle, kudos;

Sharing

Gamification

Other

See also Search#SEO.2C_SEM.2C_SMO