Skip to main content

Home/ Web Development, Design & Programming/ Group items tagged NED12

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
Vernon Fowler

Breadcrumb Navigation | Usability.gov - 2 views

www.usability.gov/...112006news.html

navigation usability information architecture breadcrumbs webdesign web design NED12

shared by Vernon Fowler on 12 Nov 12 - No Cached
  • another option may be a trail indicating the site’s prime architecture, regardless of the visitor’s path throughout the site. The latter option, along with other navigation cues, may be better in helping site visitors form a mental model of the site
  • Research indicates that frequent visitors may be the ones to get the most advantage of breadcrumbs.
  • It is probably not worth the effort to include breadcrumbs unless you can show that your Web site’s users use them frequently, either to navigate the site, or to understand the site’s hierarchy.
  • ...3 more annotations...
  • The rationale for the arrows instead of colons or other indicators was because “the arrows seem to be slightly easier to understand as an indication of moving deeper and deeper into the site.”
  • Rogers and Chaparro (2003) found that the most effective use of breadcrumbs occurred when the trail was placed below the page title instead of above it at the top of the page.
  • Research indicates that those who would most benefit are frequent users who spend a lot of time on a site and who have had some instruction in the usefulness of the breadcrumbs.
Vernon Fowler

Introducing LESS: a Better CSS - 2 views

www.usabilitypost.com/...introducing-less-a-better-css

css less web design webdesign NED12

shared by Vernon Fowler on 12 Nov 12 - No Cached
  • I’ve tried SASS and really liked it, but one thing really bothered me. I didn’t like how all the syntax was different to CSS. Sure, it’s not CSS anymore, it’s SASS, but do we really need to change the syntax of the stuff already present in CSS — why not just expand it?
  • LESS, which stands for Leaner CSS.
  • LESS augments CSS with 4 main features: variables, mixins, nested inheritance and operations.
  • ...2 more annotations...
  • division, multiplication, addition and subtraction
  • LESS looks just like CSS, and the syntax we picked for the extra features is very CSS-like. This means you can rename your existing ‘.css’ files to ‘.less’ and start using the new features.
Vernon Fowler

demosthenes.info - Basic Color Theory For Web Designers - 1 views

demosthenes.info/...Color-Theory-For-Web-Designers

NED12 color theory colour Theme design web webdesign web design

shared by Vernon Fowler on 08 Aug 12 - No Cached
  • Vernon Fowler on 08 Aug 12
     
    "Basic Color Theory For Web Designers"
Vernon Fowler

A design process revealed | stopdesign - 1 views

stopdesign.com/...design-process.html

NED12 design process webdesign css

shared by Vernon Fowler on 09 Sep 12 - Cached
  • I began by studying the content (text) of the existing page, making a model in my head of the document flow and hierarchy. I aggregated the sections of the page into logical groupings and assigned each a priority. I also spent time thinking about the purpose of the project, along with the ideas and concepts Dave Shea was trying to communicate when he created the Garden space and opened it up for other designers to contribute.
  • Showing off advanced CSS trickery is not the goal of this project. Instead, it attempts to demonstrate the beauty and flexibility achievable when designers grasp all the potential of CSS, using it as a tool to create a well-designed aesthetically-pleasing page which remains accessible, well-structured, and efficiently coded.
  • My Garden lists contained groupings of words and thoughts related to gardening, plants and flowers found in a garden, zen-like qualities, beauty and beautiful things, and characteristics of page design. I also created lists of all the elements, IDs, and classes used in Dave’s HTML, some of which made subtle appearances in the final design.
  • ...11 more annotations...
  • Once I exhausted the idea branching, I started drawing thumbnail sketches
  • Once I had a few rough compositions I liked, I began studying typefaces and letterforms.
  • In addition to my affinity for the letterforms, the pronounced medieval style of the headline type created a perfect contrast with the sans-serif modernity of supporting keywords and titles which I set in Helvetica.
  • My next step in the process was to research imagery which could be used as the foundation for background texture, and act as supporting visual content.
  • I tend to keep imagery confined to a particular region of the layout, or reserve it for a specific purpose. In my opinion, the overuse of photography or illustration can quickly create a crowded, chaotic design which just obscures the intention or message of the piece. Contrast is an element of design which I love to work with when creating anything visual. This comes just as much into play with use of imagery in a composition as it does within the image itself. Effectively integrating imagery into a design requires an awareness of balance and tension. Compact areas of motion and activity, countered with spaces for the eye to rest and relax.
  • When designing outside HTML and CSS, I focus on constructing the language and guidelines of the page, determining proportions, widths and heights, gutters and white space, specifying complementing typefaces, choosing relative type size and leading, and the application of color as a means of both obvious and subtle accent.
  • I started writing the CSS for the design at a high-level, focusing on the layout structure, major backgrounds, and large regions of the page.
  • Groups of elements were positioned in correct locations. Then I applied the necessary detail to each element, from the top of the page, down.
  • The addition of a background pattern to the left and right of the primary image was an added benefit of discovering I couldn’t position the header as I originally intended.
  • The vertical alignment wasn’t refined until after each column was already positioned on the page.
  • This unity of thought at the final stage of the process is a strong reason the designer and person responsible for generating the HTML and/or CSS need should be working together as closely as possible, if the two are not already the same person.
1 - 7 of 7
Showing 20▼ items per page