Improve your art direction abilities on 3.7CREA.TV
Improve your art direction abilities on 3.7CREA.TV
|
|
I just published a blog post taking you from the basics of art direcition through some advanced concepts on 3.7CREA.TV. If you ever have the responsibility of integrating imagery and style to enhance the message of your design you should read through the website art direction redux post.
You will learn what art direction is, some tools out there to help you facilitate art direction and some techniques to create an effect message through images and design concepts.
You can read the full post here.
Similar Posts
- Fluid Layout Using A Grid
- Adaptive Content
- Images In A Fluid Layout
- jQuery Masonry
- Smart Columns with jQuery & CSS
- Text Zooming
8 Of The Best Free CSS Tutorial Videos
Below is a collection of the best videos on CSS available on the web, hand-picked personally by me.
Short Introductory Videos
Using CSS by Joseph Lowery (03:43)
This video explains what cascading style sheets (CSS) are. You learn the basics of CSS and the primary interfaces in Dreamweaver to work with CSS. You learn how to apply basic CSS to a web page that contains text using Dreamweaver; specifically, you create and embed a new CSS rule for a heading and paragraph
Introduction To CSS Editing Using Firebug by Jim Plush (3:17)
The firebug firefox extension allows you to edit in real time your CSS code. Instead of having to make a change, reload, make a change, reload you can just edit it live to see the results.
Basics With Sample Code
Introduction to CSS by Heather James (15:26)
Good basic introduction to CSS. In the first half of the video, she explains what CSS is and its basic concepts. In the second half of the video she shows us some examples. At one point she even uses Firebug. Cool!
Creating Beautiful Interfaces with CSS by Douglas Bowman (01:02:51)
Drop-down menus and sophisticated interface elements have traditionally been implemented using JavaScript and kludgy coding workarounds that often don’t work. It’s increasingly practical to deliver rich, beautiful, functional interfaces using semantic markup and CSS. Learn how modern markup can deliver great Web interfaces that are fast and reliable.
Basic HTML and CSS Tutorial. How To Make Website From Scratch by Jimmy Ruska (39:20)
A good basic tutorial on HTML and CSS. The first 10 minutes covers mostly basic HTML. Skip to the 9-minute mark to go straight to the CSS portion of the video.
Introduction to CSS by Stefan Mischook
A good, free video tutorial by Stefan Mischook of Killersites.com
Full Website Conversion Videos
100% CSS Web Design Series by Psmeg
A series of videos which details how to create a pure CSS based website using Adobe Dreamweaver. The series is composed of 9 parts nonetheless it is quite good and very easy to follow.
Converting a Photoshop Mockup Series by Chris Coyier
How to convert a website designed in Adobe Photoshop to HTML/CSS. Following the success of the first video series, Chris Coyier has come up with another video using a minimal version of the CSS-Tricks website.
Facelift for sunhome.biz
WebdesignFromScratch.com recently gave sunhome.biz a slick re-design and they documented there thoughts and motivations so everyone can learn. The original design was drab with a large white space in the middle of the page. Also, the original design doesn’t consider the needs of its target audience, senior citizens. The new design is much easier to follow and more pleasing to the eye. Give the article a read to learn the specifics of what they changed and why they did what they did, which is the best way to learn good design.Read | Permalink | Email this | Linking Blogs | Comments
Those familiar with fluid / elastic layouts know that they can be a little more challenging to implement compared to fixed-width layouts. With the advent of wide-screen monitors, one of the biggest advantages of fluid-width layouts is the ability to maximize available space.
It was only a year ago when 1024×768 was still the dominant screen size. However, as of January 2009, 57% of the population are on desktops higher than 1024×768. The number of users still on 1024×768 has declined sharply from 48% of the previous year to a mere 36%. On the other than, the users on widescreen desktop are rapidly growing, thanks in part to marketing by HDTV makers.
Kayla Knight has written a very good article on the topic of building good websites with fluid layout.
She comes up with 6 techniques to do this, which can be summed up as follows:
She also provides helpful examples and links to all the necessary tools needed to achieve the perfect fluid / elastic layout. With this, designers are armed and ready for the next evolution in layout design.
Clik International :: Websites Templates :: Web Elements :: CSS Shiny …
Downloadable file: CSS & HTML; images. Helping to design your website with … css, buttons, link, hover, mouse-over effect, event, onclick event, background images. …Background Colors and Images - Using bgcolor or CSS
Learn how to use background colors and images to enhance the look of your Web pages … easy to change the background color of a page using CSS as it is with …CSS Magic with Fixed Background-attachment
I’m sure many of you are familiar with Eric Meyer’s Complexspiral demo, which was created to demonstrate the power of CSS and the background-attachment attribute. There are many other sites that use this concept to achieve a similar effect, providing added visual interest to the viewer. This can be seen in sites such as We Bleed Design, Westciv, Econsultancy, and even CSS Zen Garden. It has been used for years by Timpelen.
Ask the CSS Guy has come up with a short, easy to understand tutorial to help you achieve this effect. He also provides three nice examples using this same technique:
In the above examples no JavaScript was used at all, only CSS, that’s MAGIC! 