Prototyping

General

• https://en.wikipedia.org/wiki/Software_prototyping - the activity of creating prototypes of software applications, i.e., incomplete versions of the software program being developed. It is an activity that can occur in software development and is comparable to prototyping as known from other fields, such as mechanical engineering or manufacturing.

A prototype typically simulates only a few aspects of, and may be completely different from, the final product. Prototyping has several benefits: the software designer and implementer can get valuable feedback from the users early in the project. The client and the contractor can compare if the software made matches the software specification, according to which the software program is built. It also allows the software engineer some insight into the accuracy of initial project estimates and whether the deadlines and milestones proposed can be successfully met. The degree of completeness and the techniques used in prototyping have been in development and debate since its proposal in the early 1970s.

• https://en.wikipedia.org/wiki/Website_wireframe - also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. The purpose is usually being informed by a business objective and a creative idea. The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together. The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content. In other words, it focuses on what a screen does, not what it looks like. Wireframes can be pencil drawings or sketches on a whiteboard, or they can be produced by means of a broad array of free or commercial software applications. Wireframes are generally created by business analysts, user experience designers, developers, visual designers, and by those with expertise in interaction design, information architecture and user research.

• Wireframing: What It Is and How To Use It on Your Projects

Paper

• https://en.wikipedia.org/wiki/Paper_prototyping - a widely used method in the user-centered design process, a process that helps developers to create software that meets the user's expectations and needs—in this case, especially for designing and testing user interfaces. It is throwaway prototyping and involves creating rough, even hand-sketched, drawings of an interface to use as prototypes, or models, of a design. While paper prototyping seems simple, this method of usability testing can provide a great deal of useful feedback which will result in the design of better products. This is supported by many usability professionals.

• • 960.gs templates
  • 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

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

Software

Pencil

• Pencil - built for the purpose of providing a free and open-source GUI prototyping tool that people can easily install and use to create mockups in popular desktop platforms. [1]
  • https://github.com/evolus/pencil

UXBOX

• UXBOX - The open-source prototyping tool [2]
  • https://github.com/uxbox/uxbox

Akira

• https://github.com/akiraux/Akira - Native Linux App for UI and UX Design built in Vala and Gtk

Penpot

• Penpot - the first Open Source design and prototyping platform meant for cross-domain teams. Non dependent on operating systems, Penpot is web based and works with open web standards (SVG). For all and empowered by the community.
  • https://github.com/penpot/penpot

Wireflow

• Wireflow - free, online and open source tool for creating beautiful user flow prototypes. No Photoshop skills required! [3]
  • https://github.com/vanila-io/wireflow

Service

• Mockingbird - customisable grids(!), can't hide sidebar

• YouTube: 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/

ML

• https://github.com/SawyerHood/draw-a-ui - works by just taking the current canvas SVG, converting it to a PNG, and sending that png to gpt-4-vision with instructions to return a single html file with tailwind.