Whoelscher's List: Web Design Ideas

• You’re right because $1800 is a decent chunk of change – for an individual. You’re wrong because companies throw this kind of bread around all the time. They do so because they understand that crafting a brand holds a value that is oftentimes hard to measure in dollars and cents alone. On top of that, companies typically have a monetary objective behind the launch of a new design, so to them, there’s a foreseeable payoff.

• The major elements of blog design include:

   
   
  • Graphical comps produced in Photoshop
   
  • Graphical splicing for optimal CSS/XHTML structure
   
  • CSS/XHTML production in standards-compliant fashion
   
  • Unique CSS/XHTML adaptation to CMS platform of choice
   
  • Bell-and-whistle functionality to meet client requirements

• Another person on the panel at the SXSW design discussion was the female member of a husband and wife design team. While I don’t remember her name, I certainly remember what she said about blog pricing. $2500 and up, and this “just really begins to cover the actual time investment” required to deliver a complete, robust design.

   

  Want another example? Javier Cabrera, a talented designer who’s responsible for some really great stuff, charges $2500 as a base price.

• Based on this information, I think it’s fair to conclude that professional designs are really only open to the following people:

   
   
  • Those with a plan
   
  • Those with a lot of money
   
   

  I never really thought of it this way until this morning, but it’s definitely true. Professional blog designs are a luxury item. Look at it like this: plenty of businesses buy 60″ HD TV’s for their stores and displays, but only individual consumers who have money and really want a big, bad TV would ever actually kick down and buy one.

2 more annotations...

• In almost flat design, the basic theme of the flat style is used but some effects are added to the design scheme. Buttons, for example, may contain slight gradients or drop shadows. Designers typically pick one effect and use it exclusively in an almost flat project.

• SVG's are rendered as vectors and are therefore able to scale to whatever screen resolution we are viewing them on, whilst maintaining the sharpness and crystal quality that we intended when we first designed them.
• however, for that we can always use the canvas tag
• SVG's can be animated.
• SVG integrates with the dom and can work alongside JavaScript and CSS.
• SVG's can be indexed, meaning that if you have text in the SVG then search engines will pick this up.

3 more annotations...

• Locking down the font-size within a web design (through CSS) will go a long way in preventing anything unpredictable from happening, but it's hardly user-friendly. These days, it's considered best practice to size page elements and typography using ems instead of pixels; relative units of measurement which are based on the default font-size.
• Retina displays (or more accurately: high pixel density screens) have really thrown a spanner in the works for web designers. Retina screens have twice as many pixels as normal screens, allowing them the luxury of rendering everything super-sharp. Anything pixel-based, however, is simply blown up twice as wide, twice as high, resulting in comparatively lower quality.
• In order that websites retain their sharpness, designers are having to rely as much as possible on what the browser can render itself. In fact, the recent trend towards "Flat Design" is (in part) a reaction to this purely CSS-based web design.
• Instead, effects are better achieved with CSS, icons can be embedded through web fonts, logos can be implemented as scalable vector graphics, all of which spells the end for the slice tool.
• It's taken us a long time to realise that web pages don't have to appear identical in all browsers!
• What's needed is a more modular approach to web design and Photoshop can absolutely play a part in that.
• Consider first the planning stage; gathering of information and content, sketching relationships between areas of the website as a whole – a crucial part of this modular process, but best carried out away from Photoshop.
• Wireframing takes the process further; laying out rudimentary interface elements, establishing visual relationships, hierarchy and basic interaction. Again, this isn't a task Photoshop carries out very well, instead making way for applications such as Omnigraffle and Balsamiq, even Illustrator (and there are many more).
• Photoshop lends itself far better to aesthetics. It can't describe layouts fluidly, but it can explore colors, textures, individual element styles, typography, atmosphere and mood. Style Tiles is a concept suggested by Samantha Warren. They're essentially Photoshop mood boards, but highlight a way of isolating and presenting the aesthetic phase to the client.
• Their Edge Tools aim to offer a familiar canvas interface, which outputs fluidly for the browser; ideal for rapid prototyping, but still very much a work in progress.

8 more annotations...