Art Direction: Taking Web Design To The Next Level. Web design has come a long way from the grey backgrounds and blue and purple links of just a few short years ago. CSS and maturing browsers are allowing designers to create beautiful sites. So what’s the next level for web designers, how can web design improve further?
Maybe designers should be thinking and acting a little more like art directors. What does an art director do? That’s a good question. The term art direction is an umbrella term that covers a multitude, but you could consider that an art director is in charge of the overall visual appearance of a piece of work. Right now, on the web, there are some really fabulous experimental designers out there already doing this, often for personal sites and portfolios. Who’s art directing out there? Below you’ll find links to just a few of the sites I’ve come across where designers are making an effort to push boundaries and art direct their sites and blogs.
David DeSandro Jason Santa Maria A Brief Message. Five Types of Effective Headers in Web Design. Your website’s header makes an immediate impact on your user so it’s important to get it right. Think about what you’re trying to achieve, what’s the first thing you want to tell your users when they visit your site, what will intrigue them and get them to read further? A header gives you room to play and be creative, especially on the homepage, and there are a number of techniques you can use to connect with your user. Take a look at these 5 different types of header design and see how the examples have used them creatively to make an impact. The Huge Header Takes up a lot of room and can be risky as you’re taking up valuable space, but done right it looks great and makes an impact. Lewro’s Blog Chris Hortsch enRoute Film Festival Simple Art Alpha Multimedia Solutions The Web App Web apps generally want to show a screenshot of their product with a prominent call to action button that will immediately entice users to find out more or signup.
Ekklesia 360 PlanHQ Campaign Monitor Wufoo Traffik MailChimp. 50 Totally Free Lessons in Graphic Design Theory - Psdtuts+ 1,200+ courses and ebooks Design, code, video editing, business, and much more. Adobe Photoshop, Illustrator and InDesignGraphic, Logo and Print DesignSketch, Adobe XD & FigmaWordPressJavascript, PHP & PythonAdobe After Effects & Premiere ProMuch More Millions of creative assets Design templates, stock videos, photos & audio, and much more. Graphic TemplatesStock PhotosMusic TracksVideo TemplatesWeb TemplatesDesign AssetsWordpress Themes & PluginsMuch More 1,200+ courses and ebooks Design, code, video editing, business, and much more.
Adobe Photoshop, Illustrator and InDesignGraphic, Logo and Print DesignSketch, Adobe XD & FigmaWordPressJavascript, PHP & PythonAdobe After Effects & Premiere ProMuch More Millions of creative assets Design templates, stock videos, photos & audio, and much more. Graphic TemplatesStock PhotosMusic TracksVideo TemplatesWeb TemplatesDesign AssetsWordpress Themes & PluginsMuch More.
CSS Layout Cheats | EMBRACE YOUR VICE (TM) | DESIGN FOR LIFE. The Perfect 3 Column Liquid Layout: No CSS hacks. SEO friendly. Download this layout (25kb zip file). Percentage dimensions of the holy grail layout All the dimensions are in percentage widths so the layout adjusts to any screen resolution. Vertical dimensions are not set so they stretch to the height of the content.
Maximum column content widths To prevent wide content (like long URLs) from destroying the layout (long content can make the page scroll horizontally) the column content divs are set to overflow:hidden. This chops off any content that is wider than the div. Because of this, it's important to know the maximum widths allowable at common screen resolutions. 800 x 600 Left & right columns: 162 pixels Center page: 357 pixels 1024 x 768 Left & right columns: 210 pixels Center page: 459 pixels The nested div structure I've colour coded each div so it's easy to see: The header, colmask and footer divs are 100% wide and stacked vertically one after the other. No CSS hacks The CSS used for this layout is 100% valid and hack free.
No Images No JavaScript Safari.