Not Signed-In
Which clippings match 'Visual Screen Design' keyword pg.1 of 1
23 OCTOBER 2014

AppSeed: interactive prototypes from pen and paper sketches

"AppSeed lets you take your sketches and make them into functioning prototypes, bridging the gap between pen/paper and digital, through computer vision. It allows you to sketch your designs as you normally would and then manipulate your sketches directly on your phone. Unlike similar products, the use of computer vision speeds up the process and understands your sketches. AppSeed can identify an enclosed space in your sketch, allowing you to make it into a button, input text, map, or another UI element. Making your sketch into a functioning prototype running on your phone."

1
2

TAGS

2013app • app prototyping • AppSeed (app) • design options • drawn shapes • functional prototype • Greg Goralski • hand-drawnideas start on paperinteractive elements • interactive paper prototype • interactive prototypes • interface designlook and feel • look and feel options • mock-up • Open Source Computer Vision • OpenCVpaper prototypingpattern recognitionproduct prototype • prototyping app • sketching ideastest prototypeTorontoUI design • UI element • UI elements • user interface designUXvisual screen design

CONTRIBUTOR

Simon Perkins
21 OCTOBER 2013

3 Design Layouts: Gutenberg Diagram, Z-Pattern, and F-Pattern

"Several layout patterns are often recommended to take advantage of how people scan or read through a design. 3 of the more common are the Gutenberg diagram, the z–pattern layout, and the f–pattern layout. ... While patterns like the Gutenberg diagram, the z–pattern, and the f–pattern layout suggest that there is a natural path the eye will take through a design, the reality is they refer only to designs dominated by large blocks of text with little to no hierarchy. ... Instead of trying to force your design into one of the patterns described, decide instead what information you want the viewer to see and through a series of focal points and design flow lead their eyes through your hierarchy of information. That's really the only pattern you need to use."

(Steven Bradley, 7 February 2011)

1

2

TAGS

design for the screen • F-layout design • F-pattern • Gutenberg diagram • layoutlayout designlayout patternslayoutspage layoutpage layout designpage layout patternUIviewing experiencevisual communicationvisual screen designweb designweb layoutweb page layoutsweb pages • Z-layout design • Z-pattern

CONTRIBUTOR

Simon Perkins
11 MAY 2012

Luke Wroblewski on: Multi-device Layout Patterns

"Through fluid grids and media query adjustments, responsive design enables Web page layouts to adapt to a variety of screen sizes. As more designers embrace this technique, we're not only seeing a lot of innovation but the emergence of clear patterns as well. I cataloged what seem to be the most popular of these patterns for adaptable multi–device layouts."

(Luke Wroblewski, 14 March 2012, via Christopher Allwood)

1

TAGS

adapt to screen sizes • adaptable multi-device layout • adaptive layoutBBC • column • column drop • columnscommunication design • design for large screen • design for mobiledesign for the screendesign innovationFacebook • Five Simple Steps • fluid grids • Food Sense (website) • Google (GOOG)grid systemHCI • image layout • information architectureinteraction designinterface designlayout • layout adjustments • layout designlayout patterns • layout shifter • layouts • Luke Wroblewski • margins • media query adjustments • mobile design • Modernizr • mostly fluid • multi device • multi-column layout • multi-devicemulti-device adaptation • multi-device layout patterns • multiple screen sizes • NUI • off canvas • optimised for mobilepage layoutpage layout pattern • Path (app) • responsive design • responsive design layout patterns • responsive web design • screen size • screen sizesscreen space • single column layout • small screen • small screen sizes • small screens • stacking • stacking columns • The Boston Globe • tiny tweaks • Trent Walton • UIusabilityvisual communicationvisual screen designweb designweb page layoutsweb pageswebsite

CONTRIBUTOR

Simon Perkins
20 APRIL 2012

Principles of the Visual Language: A Dialect of Our Own Design

"A visual language informs all design, from architecture to print. Fluency in the same language drawn on by Bauhaus, mid–century Swiss, or postmodern design is essential for brilliant web design. In this practical talk, ground uniquely web–based interactions – from complex CSS3 animations and rotations to JavaScript behaviors – using that time–tested visual primer. Take a more considered approach to choices, evoke the desired emotive responses, learn how to better articulate your design decisions. Extend graphic design's grammar into a visual dialect of web design that guides us to smarter, beautifully balanced juxtapositions of elements in our new, multidimensional web experiences."

(Simon Collison)

Fig.1 Simon Collison (03 June 03 2011) "A Dialect of Our Own Design".

1

TAGS

aestheticsaffordances • articulate your design decisions • Bauhaus School • beautifully balanced • Christian Leborgcommunication design • considered approach • CSS3 • CSS3 animation • Dan Brown • design formalismDonald Normanediting through selection • emotive response • framegestalt principlesgraphic design • graphic design visual grammar • graphic representationgrid systemIndi YoungInternational Typographic StyleJavaScriptmapping • Mark Boulton • mental modelspictorial systemspostmodern designresponsive web designschema • Scott McCloud • Simon CollisonSlideShareSwiss Styletypographyvisual communication • visual dialect of web design • visual grammarvisual languagevisual screen designweb design • web experiences • web-based interactions • Wucius Wong

CONTRIBUTOR

Simon Perkins
06 NOVEMBER 2009

Gestalt theory in visual screen design: a new look at an old subject

"Gestalt theory is a family of psychological theories, that have influenced many research areas since 1924, including visual design issues. Gestalt Theory is one of the foundations for instructional screen design. It is generally accepted that Gestalt theory may be used to improve educational screen design and thereby improve learning (Preece, Rogers, Sharp, Benyon, Holland and Carey1994). Gestalt Theories are usually expressed as laws, and there are many variants of Gestalt theory laws devised by different psychologists, for example Boring (1942) stated 'in 1933 Helson extracted 114 law of Gestalten. All but half a dozen of these laws are applicable to visual form.' Many of the laws are very closely related or overlap, and it is often very hard to distinguish between them. The Gestalt laws explain how the individual elements from the environment may be visually organised into fields or structures (Koffa 1935). Traditionally the Gestalt laws are used to suggest how static visual elements should be presented in order to achieve effective visual results.

We noticed that only very few Gestalt laws are commonly applied to instructional visual screen design (Fisher and Smith–Gratto 1998–99, Preece et al. 1994). Being curious people, we wondered if some important laws were generally overlooked, so we examined the Gestalt literature and selected the laws that appeared to be the most important for visual screen design, and combined similar ones together. Thus, we identified eleven distinct laws that represent the major aspects of Gestalt theory knowledge about visual form. These laws seemed to contain the most relevant aspects of Gestalt Theory for computer screen design.

To test the value of these principles we applied the eleven laws of Gestalt to the visual redesign of an educational multimedia program, WoundCare, and then evaluated the redesigned application and examined the educational value of using the Gestalt laws in the screen design process. This paper is an account of how useful these laws were in a particular multimedia screen design and, by extrapolation, what benefit other designers may gain from using these design principles. Therefore the value and specific desirable approaches for the design of new multimedia technology based on an expanded Gestalt theory base is the key point of this paper."

(Dempsey Chang, Laurence Dooley and Juhani E. Tuovinen)

Chang, D., Dooley, L. and Tuovinen, J.E. (2002). Gestalt Theory in Visual Screen Design – A New Look at an Old Subject. In Proc. WCCE2001 Australian Topics: Selected Papers from the Seventh World Conference on Computers in Education, Copenhagen, Denmark. CRPIT, 8. McDougall, A., Murnane, J. and Chambers, D., Eds., ACS. 5–12.

1

TAGS

1924aestheticsAustraliacommunication • CRPIT • Dempsey Chang • design • design balance • design formalismgestalt • gestalt laws • gestalt principlesgraphic designJenny Preece • Juhani E. Tuovinen • Laurence Dooley • psychologyvisual communicationvisual designvisual languagevisual perceptionvisual screen designvisualisation

CONTRIBUTOR

Simon Perkins
Sign-In

Sign-In to Folksonomy

Can't access your account?

New to Folksonomy?

Sign-Up or learn more.