We need to create our templates in a special format, but it can be edited in any HTML editor. If you want Dreamweaver to recognize the .ss file extension as HTML you need to follow these instructions.

If putting together the HTML is not really your thing, I would suggest heading over to SmashingMagazine’s list of free HTML templates.

Also, I am not posting my CSS files. You can take this raw HTML and use CSS to do your own layout (or you can even just use the loops in the .SS file and use different HTML markup).

The .ss file is basically just an HTML file. There is one .ss file that holds the header and footer, and then various other files that handle the middle of the page. You can find better explanations of the templating language here.

We need to create only one page-specific template – the PortfolioHolder.ss template. We do not need a PortfolioPage template, as we are displaying all portfolio items on one page.

The PortfolioHolder.ss template is as follows:

<div class="hr grid_12 clearfix">&nbsp;</div>

		<!-- Catch Line and Link -->
			<h2 class="grid_12 caption clearfix">My <span>portfolio</span> is pretty darn awesome, don't you think?</h2>

		<div class="pr grid_12 clearfix">&nbsp;</div>
        <% control Children %>
        	<div class="grid_3 textright" >
				<span class="meta">$NavSubTitle</span>
				<h4 class="title ">$Title</h4>
				<div class="hr clearfix dotted">&nbsp;</div>
				<p>$Content</p>
			</div>
            <div class="grid_9">
				<% control PortfolioProjects %>
				<a class="portfolio_item float thickbox" href="$Fullsize.URL" title="$Caption">
				<em>$Title</em>
                <img src="$Thumbnail.URL" />
				</a>
				<% end_control %> <!--end PortfolioProjects -->
            </div>
            <% end_control %><!--end Children-->
		</div>

What we are doing here is looping through the page’s children (the PortfolioPages), displaying their info and then looping through the dataobjects (PortfolioProjects) that we have associated with each of those pages. We use the $FullSize.URL method of retrieving the images, so that we can add alt text to our images.

This file goes in the Templates/Layout folder. I am leaving the rest of the theming to you, but now you know how to set up all the crucial bits for your portfolio.

I now am an award winning designer. I now have a design degree (before I was making things happen with a French/Marketing degree and my awesomely good looks).

I now have time to write tutorials. And thoughts on design. And that my friends, is awesome sauce.

This week, I will show you how to use SilverStripe to build a clone of my new personal portfolio site (originalmoxie). I might even have a Drupal article or two up my sleeves.

Please don’t hate me for calling these folks out. There is nothing inherently bad about their sites. However, the layots & graphic elements are becoming all too common from one site to the next. These are all well put together examples, and to someone who doesn’t read 30 design blogs everyday, they look pretty darn good. But are they worthy of being showcased for their individuality? Probably not.

“3 bar” layout

Here are 5 sites with the “3 bar” layout – a top nav with a logo, a middle bar with headline content and main content below that. Usually the top nav is in a dark grey, the middle is a bright blue or green and the bottom is a light color.

http://www.solidshops.com/ – This layout has become ubiquitous with web apps. I could have filled 5 blog posts with web apps that use this style and layout. It looks clean and professional, but gets an F for layout originality.

http://niagakit.com/ – Same as above.

?http://www.proudcloud.net/

http://www.yaronschoen.com/ – At least the illustrations and breaking of the grid make up for the standard layout used.

http://www.nabru.co.uk/ – Again, it looks clean and professional and the elements add a more organic feel, but the layout is still too out-of-the-box for me.

Here is where to go to learn how to do this effect:

PSD Tuts+ – How to design a family of websites

And, here is how to do it right:

http://madebygiant.com/ – Giant Creative has taken this layot and made it their own simply by making their navigation “talk”. The bright colors contrast with the neutral background. The superb typography makes the design shine.

http://www.stanleysolutions.in/ – This site is broken into those same 3 visual sections, but the diagonal lines on the center text box as well as the lack of line dividing the nav and the feature area make this site own its design.

The pinking shear effect.

I like textured edges as much as the next guy. Heck, I probably like sewing and handmade edges more than the next guy. But it has become an over-used design trend. Evidence below:

https://epicevent.com.au/ – To me this site is overdone and Photoshop heavy. The overall effect is nice, but there is just one too many effects here.

http://www.stthomasartgallery.org/ – You cannot take pinking shears to wood. The zig-zag line makes little to no sense here. No background behind the nav and darker text would have made more sense.

Culinary Culture

http://www.culinaryculture.com/- This one has me on cute overload. This is another case where someone needed to turn off 30% of the Photoshop effects. It isn’t bad, but it isn’t terribly awesome either.

Here is where to go to learn how to do this effect:

Grafpedia – Design a unique WordPress theme

Grafpedia – Gritty website design

And here is how to do it right:

http://analog.coop/ – The effect is used sparingly. And tastefully. It adds to the design without being an over-powering element.

In conclusion, the web design world is slowly being over taken by what is “trendy”. And, yes, it can still be good design even if it is “trendy”. What you want is a site that acknowledges the trends in the industry and then takes them and makes them their own, instead of letting the trends take control.

That being said, all of the websites here are designed well (I don’t like ugly websites, and don’t want to call out people for having terrible skills, just doing what is “trendy” or “typical”), some are just more original than others. These sites were all put together by designers with tremendous skill. Some are just a little too attached to the bandwagon.

1. Listen. Listen more. Question. Understand.
2. Exercise the creative muscle. Be creative every day. And not by doing client work. Create something daily that has no restrictions.
3. Get away from the computer. It can be for a date with my oft neglected sketchbook or something of the New York Times best seller list, but even the computer needs a rest every now and then.
4. Learn new coding techniques. The more ways there are to solve a problem, the better the final solution will be.
5. Revel in accidents. Sometimes they are even happy.
6. Have a connection. Both with the creation and the audience.
7. Ignore convention. The masses are rarely right.
8. Take field trips. Change the scenery.
9. Collect inspiration. Harvest ideas. Grow creativity.
10. Stretch. Adapt. Bend.

This list is meant to guide my way through 2010 and beyond. To make it better than 2009. To aid my choices. I know that being creative takes effort and growth. I know I need to listen better to clients and myself in order to understand their needs and my ability to fulfill those needs. I know I need to create outside of the confines of client work and grad school portfolio pieces to become truly creative. I need to step away from my computer, even though it is my main tool, it should not be my only tool or my only connection to the outside world.

Development techniques are always changing, it would be stupid not to learn new techniques. I have grand plans for my skills. This year is the year that it all happens. And we all know that accidents happen. Make them happy and learn something. Or maybe they are happy and you already have something useful for them. All creation should be personal and bear a personal creation. It should never be about the money.

The masses are frequently wrong. And my friends, with websites looking so much alike in this age of infinite possibility, that is not a good thing. Grids are for breaking, trends are for ignoring.

I am going to get out of the office more this year. I am going to enjoy the view both in Chicago and around the world. The more I see, the more inspiration I can collect. I can have more ideas from which to pluck the good ones. I can grow as a designer, or “creative”.

I will adapt to the changing landscape of design and make this world my own. I will bend my designs to the limits of today’s technologies.

I will be better.

Have you written your own manifesto? Do you have professional resolutions for the new year?

Icons

Lovely icons in 3 styles from Smashing Magazine.

Holiday RSS icons to add a little flair to your site/blog for the remainder of the month.

Brushes

Elegant snowflake brushes from Arsgrafik.

Reindeer (ok, bucks, but they look like reindeer!) from Steven Bourelle.

Vectors

An awesome use of the gradient mesh tool to create a bow. Via Vecteezy.

A lovely background pattern from Clarice Gomez.

Lovely vector ornaments from Pehaa.com

A set of Christmas / winter illustrations from Envato

Some snowflake vectors from Spoon Graphics.

WordPress Theme

A holiday WordPress theme to decorate your site.

The free stuff first:

Largeformatposters.com does some fantastic custom posters that make excellent gifts. I got a poster I designed delivered, and when my mom came over for dinner, she left with it! They decided to be kind enough to send me one to give away. (And they gave us one for our office!) You can read some reviews of their sister company UPrinting on Yelp.

Giveaway Prize: (1) Rolled Canvas for One Lucky Winner

Shipping: FREE UPS Ground Shipping in the US

Eligibility: Limited to US Residents due to shipping costs.

To win: Simply comment with who you would give the canvas print to.

If you don’t win, these are great gifts too. If you would like to send me any of these, I can give you my address

Pixel Blocks
Build in pixels! A super fun gift for aspiring creatives – or for your desk

NotePod
Perfect for the designer who designs mobile sites and apps, or just someone who is obsessed with their iPhone.

Chicago Neighborhoods Poster
They have other cities too, but Chicago is my home, and therefore the best The Typographic treatment on this neighborhood map is simply fantastic.

Swine Fun Stashes
Have a little fun with the swine flu fear, get yourself and your friends some nice ’stshed masks!

Happy Webbies Tees
Simply the funniest tees for web designers.

Veer FPO tshirt
Any one who has ever had to use boxes FPO will love this shirt.

Fred Food Face
Play with your food! Even meal time can be play time.

Custom Blank CDRs
These make great gifts, because boring plain CDs are so 2008.

Pop + Shorty HTML tee

You really are the HTML to my CSS.

Hopefully you get some ideas from this post, or some Christmas / Hanukkah gift ideas. (I think it is obvious that I have been shopping lately, don’t you?)

First you will need some grungy tools. I will be using these:
BittBox Light Grunge II Free Texture Tuesday (#212 from the download site) (free for commercial use with attribution)
Botched Ornaments Brushes
Grunge Brushes
Forque Font (Free for commercial use and @font-face approved)

We will start with a new file (mine is 600px x 300px, but any size will do). Place your newly downloaded grunge texture in the background.

Add a Levels and Hue/saturation adjustment layer to lighten and desaturate your background.

Next, pick a big fat vintage-y font and type your headline.

Rasterize your type layer and change the blending mode to multiply and the opacity to 80%.

Duplicate the layer and turn off the duplicate layer.

Create a new layer behind your type and with a grunge brush create some grunge in the same color and some similar colors as your type.

Using a different grunge brush, erase the splats and add more until you are happy with the grunge.

Set eraser opacity to 60% and pick a general grunge brush. Make your text a little destroyed.

Turn on your duplicated text and pick one of your fancy grunge brushes.

Voila! Cooler than most grunge text because the texture is more than just destroyed. You added flair, the flair is what makes you stand out as a designer.

Brooklyn Brewery

Brooklyn Brewery

This site is just like walking into my favorite pub, dark and green. The logo is even in the form of a neon sign. Well done.
Bridgeport Brewing Co.

Bridgeport Brewing Co

This site is gritty and collage-y with out being over-done or un-done. The animation flows seamlessly and the look is cohesive from top to bottom.
Bard’s Beer

Bard's Beer

Here the look is completely different from the first two. Light and bright the site showcases the beer in the middle. The beer bottles act as navigation (some would call this mystery meat navigation, but the navigation is duplicated on the right of the screen so you can easily navigate if you don’t catch on to the bottles).
MacTarnahan’s

MacTarnahan's

Lovely, vintage-y and my second favorite color, green! The site has a retro feel and is just grungy enough to satisfy my need for web trends.
Mother Earth Brewing

Mother Earth Brewing

If life were as easy as peace love & beer, the world would definitely be a better place. The site has a wonderfully clean layout, but the textured background and wheat make it feel natural, which is what I assume they were going for.

Hopefully the sites were inspirational. I know in researching this article, beers I know to have great labels have surprisingly terrible websites. It took a lot of digging to find these gems, mainly because I was looking for ones that were not big name sites.

(header image credit tico24)

This week we will be discussing some popular text replacement libraries and their limitations and potentials.

1. sIFR
   sIFR is one of the original font replacement techniques, and is one of the most complicated. It involves saving a flash movie with your font in order to allow the glyphs to be displayed when called for by your site. This site currently uses sIFR. The official sIFR 3 Beta site has examples you can take a look at. (I don’t think they play too nice with internet explorer, and since that is what is on my loaner computer…) And, as they themselves say, this is an OK solution for now, but not the answer for the next 20 years.
2. FLIR
   Facelift is a little different than sIFR. It does not require Flash to run, so there is wider browser support for this option. You can style the text just about any way you would like. However, there are drawbacks here as well. If the user has images disabled, they will not see the pretty text. It does support links and will change colors on hover.
3. Cufón
   This javascript library is quite promising. No images or Flash required to make the font replacement work. Hover has to be enable specifically for elements on which it is needed and Cufón replaced text is not selectable. But for a highly simple and easy to configure solution, this is a definitely an option to consider.
4. typeface.js
   This javascript library is infact quite similar to Cufón, it allows for a little bit easier uploading, hoever it only accepts TrueType fonts. Typeface.js allows use of a greater range of CSS selectors than Cufón, but it is a little larger, and the spacing out of the box is a little bit off (although that can be fixed with a little bit of CSS magic). Typeface.js also provides you with selectable text.
5. Typeselect
   This was originally built on the typeface.js library before typeface.js added selectable type as a way to make the type selectable. However, it is a strong solution in its own right. It uses jQuery (which means it will play nice with what I build) but there is currently no suport for :hover or line breaks. This is a promising library that I intend to follow until either they get the kinks worked out, or all browsers on all computers support @font-face.
6. @font-face
   The holy grail of font replacement. What we have all been waiting for. The CSS3 specification that allows us to use our fonts without having to worry about sacrificing accessibility, design or functionality. The support is coming. Webkit browsers support it (Safari and Chrome). So does Firefox (as of 3.1). And, heck, even IE does. The specifications are not yet final, so your CSS might not validate, but you can start including it in your work. (And here is an article on how to make @font-face work with Cufon so the js only gets executed if the user has a browser that is incompatible with the CSS property. Nifty, eh?)
7. HTML/CSS/IMG Phark Method
   What most of us do (or should be doing). Using a background image for a header with the text displayed at -9999px (although I think I read that this could do bad things to your Google Page Rank and that you would be better off with an image and alt text for SEO, but this is better from a usability standpoint)

Want to know if you can embed that font? For sIFR you can use any font that you can embed in a PDF or Flash file. For the others you need to make sure your license allows the use. FontSquirrel has a nice list of @font-face ready fonts (for free) that can be used with any of the above methods.

(Image credit sindesign)

1. Anivers: This great font is a very interesting example of a sans-serif typeface. It is a bit more decorative than your standard bearers (like Helvetica), but it retains enough rigidity to be easily read. This is a great font choice if you desire something unique without sacrificing legibility.

2. Nevis: A no nonsense sans serif which expounds upon the classic history of Gill Sans. In fact, through all of my font odysseys, this is the closest I have gotten to a free, commercial use Gill Sans. It is not exact, nor could it be, but considering the price is zero dollars, this is a terrific find. If you are a fan of the original (as I am) feel free to use this one in most situations, as rarely does it appear ineffective.

3. Coolvetica: Speaking of classic font adaptations, here is a playful and retro looking entry. Since its introduction in 1957 by Hoffman and Miedinger, Helvetica has taken its place on the highest pedestal in the Pantheon of typography. It is unmistakable. Ubiquitous. Timeless. It also happens not to be free in any way, which is really a bummer if you do not happen to own a Mac (and assuming you have a personal distaste for Arial). However, many designers, caught in the gravitational pull of Helvetica, have adapted it in ways large and small, making variants of it available to the masses. This variant was modeled on several fonts created during the 1970’s fetishization of Helvetica. Some letters in Coolvetica are basically exact copies of its parent, the main difference being the exaggerated, swooping tails on the letter “t”. So if you are ever in need of something in between Arial and Helvetica, with its own amount of personality, then Coolvetica is your font.

4. Mimix:  This script based serif font is a great choice for someone looking for a calligraphic flare, without sacrificing readability. It has a very elegant transition between its thick and thins, and it also features distinctive baroque ears.

5. Report School: As the name implies, this is a thin, sleek sans serif font that serves an educational function. This font borrows slightly from Century Gothic, most notably in the lower case “a”. With uniform letter spacing and consistent kerning, this font is quite easy on the eyes. Clearly, its legibility is a major factor for it being used liberally in schools. These strengths easily translate outside of the classroom, which make it an effective choice.

6.  Bebas: This font is a bit of a rarity, being a sans serif font without a lower case family. Normally, the advantage of a sans serif IS the lower case variant, as they are the most readable of any type of font. However, Bebas is the exception that proves the rule. Even though it is limited to capitals only (which make it outstanding for headlines), it has an air of unspoken authority. It is very easy to discern a positive vocal inflection from this font, just by reading it. This is plainly one of our favorites.

7. Chunk Five: Recently, as sans serif fonts have achieved great exposure and commercial success, serifed fonts have fallen by the wayside. They are typically seen as old fashioned, stodgy, and well, not very “design-y”. However, they are making a comeback in the way of slab serif fonts that hearken back to the old American West.  A great (and free) example of such fonts is Chunk Five. It has a great amount of visual weight, as it is big, heavy, and bold. Using this font can really set your work apart, as it distances you both from the old serifed fonts, and from the preponderant use of sans serif fonts. Saddle up with Chunk Five, and ride off into the sunset (lame I know, but it serves its purpose.)

8. MEgolopolis:  One of the more unique free fonts you will find, MEgolopolis just looks like it was invented for use in Cirque du Soleil. It is brash and bold, and it is very unorthodox in its construction. It is very decorated and has extended foot serifs on letters such as the lower case “d” and “t.” This one , when cleverly arranged, can look very unique and useful in certain circumstances.

9. Neuropol: One of our favorite “techno” fonts, Neuropol is perfect for use with your sci-fi projects and your utopian futurist commentaries. This font is has a short and squat x-height, which makes it more wide than it is tall. It is of course a streamlined sans serif font (they don’t believe in unnecessary decorative flourishes in the future) with a high degree of elegance. This of course has limited uses, but it is perfect for what it was intended.

10. Museo: This font is exacting and precise. It is quite interesting to note that it combines both organic curves and extended, rigid serifs. It also has a fairly shallow depth of the descender, making this a visually interesting font.

Well that about does it. I hope that you enjoyed some of these fonts, and I also hope that they can improve your designs!