Skip to main content

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

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
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.
Laura Reed

Lissa Explains it All -- HTML Help and Tutorial for Kids - 0 views

www.lissaexplains.com/color.shtml

stuff website

shared by Laura Reed on 30 Aug 07 - Cached
  • anonymous on 25 Sep 13
     
    How to make $ 40,000 in one month with very quickly. What you need. The latest American news article. Immediately visit www.killdo.de.gg www.fiverr.de.gg www.newss.de.gg www.reddit.de.gg www.newsbbc.de.gg
Jochen Burkhard

CodeIgniter - Open source PHP web application framework - 1 views

codeigniter.com

PHP Framework OpenSource

shared by Jochen Burkhard on 06 Nov 07 - Cached
igmuska . liked it
  • Laura Reed on 06 Nov 07
     
    Code Igniter
  • Jochen Burkhard on 18 Feb 10
     
    CodeIgniter is a powerful PHP framework with a very small footprint, built for PHP coders who need a simple and elegant toolkit to create full-featured web applications. If you're a developer who lives in the real world of shared hosting accounts and clients with deadlines, and if you're tired of ponderously large and thoroughly undocumented frameworks
Laura Reed

[ws] Color Scheme Generator 2 - 2 views

wellstyled.com/...index-en.html

shared by Laura Reed on 30 Aug 07 - Cached
  • anonymous on 25 Sep 13
     
    How to make $ 40,000 in one month with very quickly. What you need. The latest American news article. Immediately visit www.killdo.de.gg www.fiverr.de.gg www.newss.de.gg www.reddit.de.gg www.newsbbc.de.gg
awqi zar

ColoRotate - 0 views

www.colorotate.org

color design webdesign tools

shared by awqi zar on 16 May 09 - Cached
Patricia Carvalho

Typograph - Scale & Rhythm - 0 views

lamb.cc/typograph

typography css webdesign layout generator design tools web design

shared by Patricia Carvalho on 18 Jan 10 - Cached
  • Jochen Burkhard on 18 Jan 10
     
    This page is both an essay and a tool. It sets out to explore how two, intertwined concepts, often playful but sometimes cheeky, can be encouraged to dance in web pages. Drag the colored boxes along the scale to throw these words anew. For the most part, this text is just a libretto for the performance you are about to play upon it.
awqi zar

0to255 - 3 views

0to255.com

design webdesign css tools color colour template

shared by awqi zar on 14 Apr 10 - Cached
Soul Book

The Incredible Em & Elastic Layouts with CSS - 0 views

jontangerine.com/...m-and-elastic-layouts-with-css

blog css tools webdesign typography design fonts text layout web framework layouts em elastic

shared by Soul Book on 01 Apr 10 - Cached
  • Elastic design uses em values for all elements. Ems are a relative size, written like this: 1em, 0.5em, 1.5em etc. Ems can be specified to three decimal places like so: 1.063em. “Relative” means: They are calculated based on the font size of the parent element. E.g. If a <div> has a computed font size of 16px then any element inside that layer —a child— inherits the same font size unless it is changed. If the child font size is changed to 0.75em then the computed size would be 0.75 × 16px = 12px. If the user increases (or decreases) text size in their browser, the whole interface stretches (or shrinks.)
  • All popular browsers have a default font size of 16px. Therefore, at the default browser setting, 1em = 16px.
  • The <body> inherits it unless styled otherwise using CSS. Therefore 1em = 16px, 0.5em = 8px, 10em = 160px and so on. We can now specify any element size we need to using ems!
  • ...9 more annotations...
  • However, (gasp) IE has a problem with ems. Resizing text from medium (default) to large in IE5/6 would lead to a huge increase in font size rather than the gradual one expected. So another selector is needed to get IE to behave: html{ font-size:100%; }
  • Let’s give our <body> some more style, and center everything in the viewport (this will be important later for our content wrapper.) Our initial CSS ends up like this: html{ font-size: 100%; } body{ font-size: 1em; font-family: georgia, serif; text-align: center; color: #444; background: #e6e6e6; padding: 0; margin: 0; }
  • 1 ÷ 16 × 740 = 46.25em (1 ÷ parent font-size × required pixel value = em value)
  • While we're here, we might as well add some typographic goodness by selecting a basic leading and adding some vertical rhythm, with everything expressed in ems.
  • Set a 12px font size with 18px line height and margin for paragraphs
  • Dividing the desired line height (18px) by the element font size (12px) gives us the em value for line height. In this example, the line height is 1 and a half times the font size: 1.5em. Add line height and margin properties to the CSS: p{ font-size: 0.750em; line-height: 1.5em; margin: 1.5em; } Now the browser will say to itself, “Oh, line height and margin is set to 1.5em, so that should be 1.5 times the font size. What’s the font size, again? 12px? OK, cool, make line height and margin 1.5 times that, so 18px.”
  • To retain our vertical rhythm we want to set an 18px line height and margin. Easy: If the font size is 18px then 18px in ems is 1em! Let’s add the properties to the CSS (and make the font weight light:) h1{ font-size: 1.125em; line-height: 1em; margin: 1em; font-weight: 300; }
  • Jon, good article and very useful chartm but your text sizing method has one major drawback. If elements with font-sizes set in em’s are nested, i.e with lists, these elements inherit the font size. Therefore each child element will be 0.75em (or 75%) of the previous one: See an example here. (Would have posted the code put it was coming out really ugly!) I would recommend against using that method and setting the global font size in the body tag i.e. 'font-size:75%' for 12px. Then only setting different font-sizes where necessary.
  • Thanks Will, interesting point, but that is solved with a simple font-size:1em on the first child. Retaining the default ensures that even images are sized correctly in ems. IE (surprise) will compute incorrectly against a parent length equivalent to 12px. My preference born out by some minor but painful computed size errors in complex layouts is not to adjust the body, and only set font size where necessary for specific elements.
  • Soul Book on 01 Apr 10
     
    A nice and simple explanation of using EMs to make elastic layouts
Soul Book

The 100% Easy-2-Read Standard - 0 views

informationarchitects.jp/100e2r

blog css tools webdesign typography design fonts text layout web layouts usability

shared by Soul Book on 01 Apr 10 - Cached
  • 1. Standard font size for long texts
  • 2. Active white space
  • The basic rule is: 10һ15 words per line. For liquid layouts, at 100% font size, 50% column width (in relation to window size) is a good benchmark for most screen resolutions.
  • ...3 more annotations...
  • 3. Reader friendly line height
  • The default HTML line height is too small. If you increase the line height, the text becomes more readable. 140% leading is a good benchmark.
  • 4. Clear color contrast
Vernon Fowler

Ultimate CSS Gradient Generator - 2 views

www.colorzilla.com/gradient-editor

color colour gradient tool webdesign tools css css3 Web Design web design

shared by Vernon Fowler on 25 Jul 11 - No Cached
  • Vernon Fowler on 25 Jul 11
     
    A powerful Photoshop-like CSS gradient editor from ColorZilla.
sarbrinder

How set the css for firefox Browser - 0 views

www.yourhelp.in/et-the-css-for-firefox-browser

webdesign Design Development

shared by sarbrinder on 08 Sep 14 - No Cached
  • sarbrinder on 08 Sep 14
     
    Many time their browser compatibility issue occur with firefox browser.Some time design work fine in all browser but its show wrong in firfefox.Then use this css trick for manage the issue as @-moz-document url-prefix(){.webmaster_mail{ width:100%; margin-top:37px;padding:10px 0;text-align:center; float:left; background:#5a5a5b; color:#FFF; font-size:18px;}}
Claudia Martin

How to design a website in short time? - 1 views

mobiuswebdesignmiami.blogspot.in/...ign-website-in-short-time.html

website design miami

shared by Claudia Martin on 11 Jul 14 - No Cached
  • Claudia Martin on 11 Jul 14
     
    Every business needs a site and this is evident from the fact that there is a site for everything. Websites sell household goods and also there are sites that sell airplanes. But each site is unique. Every site has different design and elements.Choose a template that matches with your needs and fill it with background color, content and graphics and your site is ready to be launched.visit here :- http://mobiuswebdesignmiami.blogspot.in/2014/07/how-to-design-website-in-short-time.html
Claudia Martin

Difference Between A Site And A Fully Functional Website - 1 views

www.informationbible.com/functional-website-403371.html

website design miami

shared by Claudia Martin on 18 Jul 14 - No Cached
  • Claudia Martin on 18 Jul 14
     
    If you are going to design a website then you should know that you have only 15 seconds to turn a visitor into a customer. Layout, background color, content, graphics and overall visual appearance of the site should be appealing to the visitors. There might be many website design companies in Orlando but your focus should be on to find the designer that not only understands your needs but that is also willing to do hard work for you. Visit here:- http://www.informationbible.com/article-difference-between-a-site-and-a-fully-functional-website-403371.html
Vernon Fowler

Don't Use The Placeholder Attribute - Smashing Magazine - 4 views

www.smashingmagazine.com/...placeholder-attribute

inclusive input formdesign aria forms inclusivedesign hint accessibility form html

shared by Vernon Fowler on 27 Jun 18 - No Cached
  • To recap, the placeholder attribute: Can’t be automatically translated; Is oftentimes used in place of a label, locking out assistive technology; Can hide important information when content is entered; Can be too light-colored to be legible; Has limited styling options; May look like pre-filled information and be skipped over.
  • Move the placeholder content above the input, but below the label:
  • Development Here’s how to translate our designed example to code:
  • ...4 more annotations...
  • aria-describedby ensures that the p content will be described last, after the label’s content and the kind of input it is associated with.
  • By using aria-describedby to programmatically associate the input with the p element, we are creating a priority of information for screen readers that has parity with what a person browsing without a screen reader would experience.
  • The floating label effect, a close cousin to this phenomenon, oftentimes utilizes the placeholder attribute in place of a label, as well.
  • Content hidden by an on-screen keyboard. 3rd party keyboards with larger heights may have a greater risk of blocking important content.
  • Vernon Fowler on 27 Jun 18
     
    Not only argues for not using the placeholder attribute but also describes an inclusive input hint and how to code it.
  • anonymous on 24 Oct 18
     
    Protonmail login
imaginet

Web Design Strategy Today! - 1 views

Web designing is a vast subject in the field of computer sciences. Today people largelyconnect with each other for business, information, services, learning and so on through websites. Ithas now be...

Web webtools webdesign seo websites wordpress ppc

started by imaginet on 22 Dec 14 no follow-up yet
Vernon Fowler

How to make whitespace work on the Web | Webdesigner Depot - 8 views

www.webdesignerdepot.com/...ake-whitespace-work-on-the-web

DIG252 webdesign whitespace readability legibility color colour colours

shared by Vernon Fowler on 27 Jul 14 - No Cached
« First ‹ Previous 201 - 220 of 251 Next › Last »
Showing 20▼ items per page