The Skool is all about education—supporting you with go-to web resources to help you better manage and execute interactive projects. If you’ve been missing This Week In Web Design, watch The Skool LIVE! where Jose takes it to the next level. 

Today, Jose and his featured guests dive into branding and brand identity.

Watch the episode now:

MORE WEB DESIGN RESOURCES:

• Watch all the past This Week in Web Design videos 
• Want to grow your web design career? Build your skills and knowledge ofinteraction design with our superior library of web design books. Visit MyDesignShop.com for new releases and discounts.
• Catch more interactive content in the newest issue of HOW Magazine.

In fact, this design firm’s site relies heavily on the flat approach. And were it not for the illustrations the site would blend in and be rather forgettable. The illustrations give it personal, stylized look and feel that leaves a lasting impression. Another huge upside to this site is their brilliant portfolio. This firm produces incredible work, so the site seems like an understatement to their exceptional design skills.

Want to soak up some more of Patrick McNeil’s design and development expertise? 

Check out the latest edition of The Web Designer’s Idea Book volume 3, with hundreds of noteworthy websites selected by Patrick McNeil. From trendy to subtle and simple, Patrick highlights the strategies behind effective web design. 

If you’re just starting out or you’re ready to take your coding skills to the next level, take advantage of Patrick’s coding classes offered through HOW Design University. Catch a one-week, HTML/CSS Coding Bootcamp  or his next round of Coding for Designers courses. 

We recently fired a few questions over to Mark about what he’s working on and what he’s planning for his CFC workshop.

First, tell us a little about you and some of the cool work you’re doing right now …
These days we’re doing a lot with responsive design (along with everyone else) and Marketing Automation. I’m particularly thrilled about the latter. MA is a very natural next step for us as conversion-focused developers since it builds on everything we’ve been talking about for the past decade or so and takes it all to the next level. The rules are the same, it’s still all about focused expertise, contacts, and content, but with MA you can wring every bit of value out of those three core assets by using these new tools to get the right message to the right prospect at the right time. It’s very powerful stuff and now it’s affordable for people who need it (but will still be perceived as outrageously expensive by those who don’t).

Content … it’s often kind of an afterthought in the web design process, or at least something that designers aren’t super involved in. What about website content do designers need to understand?
That’s a pretty big question that doesn’t have a succinct answer, unfortunately. Basic site content is the same as it ever was, and I think everyone pretty much gets that.

Some sites and businesses need a content strategy, though, and that’s a completely different thing. The big picture of understanding a website’s content strategy is understanding how content specifically facilitates the key roles of attracting, informing, engaging and nurturing prospects. Different kinds of content are required for the three primary stages of the buying cycle: research, evaluation, and purchase. Having content that is specifically crafted for personas in these stages is important to make sure that you’ve got the right kind of content for your different audiences, but also so you can observe who’s engaging in what kind of content and through that observation learn what stage in the buying cycle they’re in. You can then use that info to make sure you’re delivering the right stage-specific content to them.

At CFC, you’ll be speaking specifically about content as a self-promotional tool, a way for freelance designers (web and print) to generate new business. If I’m a designer, isn’t my portfolio enough?
Nice setup, Bryn, thanks. Your portfolio is enough to show people you do great work once they get to your site. But your portfolio isn’t going to bring people who need your help but aren’t looking for you specifically through search engines, nor is it going to help prospects understand why your work is good, or what it might be to work with you. It’s also not going to allow them to get to know you slowly over time while they’re deciding who they should hire. Content does all of these things. You need both great work and great content which describes your expertise if you want your site to generate business for you on a regular basis.

What are the 3 things you hope CFC attendees will take away from your workshop?
1) Why a content strategy is required for your site to consistently generate business for your firm.

2) How to create content strategy that addresses your key personas and covers the 3 primary stages of the buying cycle.

3) How to put a content plan together that allows you to do enough to have an impact on your business while not over-committing yourself.

Catch Mark’s post-conference workshop at the Creative Freelancer Conference, part of HOW Design Live in San Francisco, June 22-26.

ANATOMY OF A COMPELLING BLOG POST

So just what separates a mediocre blog post from one that is awesome?

You have an advantage: if you’re reading this you are most probably a creative person with plenty of ideas for making your blog unique. Nonetheless, there are some specific features to a blog post that will help ensure that it is read, enjoyed, and shared. Let’s take a look at these essential elements.

Headline

On a business blog, the headline you choose is all important, because people will decide very quickly on the basis of your headline whether or not to click through and read. On the other hand, descriptive headlines often work perfectly well for creative blogs, especially if the blog content is visuals-led. You don’t have to be ultra cute with your headlines, but you do want your blog to stand out from the crowd. Ask yourself: would this headline interest or excite me enough to click through and look?

Topic

I’ve just presented you with a list of blog article types that work, but that’s just a starting point. Each time you blog, ask yourself: “Do I really care about this?” Great blog posts inspire others not just because they are entertaining or informative, but because the blogger is sharing something he or she cares about in their unique style. It has to come from the heart, and when it does your readers will feel a real connection.

Content

Remember that a blog post can be text, video, photo(s), audio—or any combination of these. If your main content is a photo or photos, make sure they are a good size. No one minds scrolling down to see photos if they are big and stunning. If you opt for a mainly written blog, do include a relevant photo, if you have a good one, as it breaks up the text and can enhance the message.

Length

My advice to bloggers is always to keep it short—250 words is plenty. If you are naturally verbose you might find this tricky, but it is good discipline. If it’s 1,000 words long, it has to be a really great blog post to keep people reading all the way down. The exception to this could be a tutorial or recipe, or something broken up into steps. As you find your blogging voice, why not experiment—you might find the occasional “long post” is well received. Basically, brief and often is better than long and infrequent.

Readability

By this I mean things like a reasonably sized clear font in a dark color on a white or pale background, no background graphics beneath the copy, generous line spacing, short paragraphs and short sentences. These are all basic factors that can get overlooked. Your aim is to make it as easy as possible for people to read your blog posts, get the gist of it, comment, and subscribe.

Links

Links between sites are the fuel of the web. Include links within your posts whenever relevant. For example, if you reference another site or article, make it into a link. You might also create a trackback from the. If you are showcasing your work, include a link to your store or portfolio.

Social

If you want people to share your blog posts, offer lots of opportunities to do so and make it easy. For example, have “Tweet this,” “Google+1,” Facebook “like,” or “Share this” buttons.

Learn more about best blogging practices in Blogging for Creatives by Robin Houghton, available now from HOW books.

Fortunately, this is not the case with this self-promotional website for My Dirty Desk, a collective of freelance web designers and developers based in Poland. A palette of three colors, a distinctive illustrative style and bold geometric shapes that frame the work creates a unique design. Trust me: You won’t see this anywhere else on the web.

Want to soak up some more of Patrick McNeil’s design and development expertise? Check out the latest edition of The Web Designer’s Idea Book volume 3, with hundreds of noteworthy websites selected by Patrick McNeil. From trendy to subtle and simple, Patrick highlights the strategies behind effective web design. 

If you’re just starting out or you’re ready to take your coding skills to the next level, take advantage of Patrick’s coding classes offered through HOW Design University. Catch a one-week, HTML/CSS Coding Bootcamp  or his next round of Coding for Designers courses. 

What I love is that Hopskoch is entering into a crowded market space, and the way they stand out is by using a fun theme. Naturally they don’t have to beat the theme to death; in fact you may not even really notice the theme at first. Don’t be afraid to go your own way. Trends aren’t always worth following.

Want to soak up some more of Patrick McNeil’s design and development expertise? Check out the latest edition of The Web Designer’s Idea Book volume 3, with hundreds of noteworthy websites selected by Patrick McNeil. From trendy to subtle and simple, Patrick highlights the strategies behind effective web design. 

If you’re just starting out or you’re ready to take your coding skills to the next level, take advantage of Patrick’s coding classes offered through HOW Design University. Catch a one-week, HTML/CSS Coding Bootcamp  or his next round of Coding for Designers courses. 

As you’ll see here, the ways fabric textures can be implemented are endless, and the results can be sleek and elegant or fun and casual. Let’s dive into the examples and see how they work.

This site is for an agency that builds websites. I love that the fabric-based design makes the shop feel friendly, like it’s just a bunch of normal people you can talk to. They definitely don’t come off as ubersnobby designers obsessed with their design brilliance. Very effective, when you consider how simple and clear the message is.

The overall atmosphere is radically different here: This site immediately comes off as playful and fun. When you take a closer look, you realize the site is for a television production company. My first reaction is that type of work must be rather dull, but this stylish site goes a long way to quash my assumptions.

This website shows there’s plenty of room for variety when using fabric textures: They’ve got linen, leathers and ribbons. What I really love about this site, though, is how they use the style subtly. The fabrics are a prominent part of the design, but it doesn’t beat you over the head with them. Instead, the real focal points are the content and action items; the fabrics are there to provide a beautiful framework.

The web has gone crazy for ribbons lately. Give me a minute, and I could easily find a dozen more sites that use them. I’m not saying it’s overdone, but it’s a very popular visual element right now. I love them when they’re used to highlight something important—in this site, the 3D nature of the ribbon pops out of the page.

It might be hard to imagine fabric could be used to reinforce the style of a cupcake company, but that’s exactly what is happening in this example. The fabrics feel very much like a table cloth, and the colors convey that it’s a hip and fresh shop run by a younger generation. Always carefully consider your brand and the impression you make online.

This site is striking when compared to the softer feel of the other examples. The fabrics convey a lot of personality. You’ll be able to tell if you relate to the person simply based on the style and boldness of the patterns.

For a product that’s all about style, it’s obviously important to appear stylish and beauty-conscious. In this case the fabric textures are perfect for demonstrating such an eye for quality—it immediately connects the site to fashion. The theme echoes the core values and skills of the brand behind the site. A brilliant solution.

I tend to be attracted to the over-the-top demonstrations of a style, but it’s really important to keep in mind that these approaches can be effectively used in subtle ways as well. In this case, the subtle textures add to the style of the page; they don’t dominate the design.

I was pleased to find this website—it shows how fabric can be combined with color and patterns to create a fun but stylish look. The design is playful and effectively communicates its purpose. And again, the use of fabric is behind the scenes.

I just love this design. While websites around the world trend toward minimal, glossy designs, the richness of this one-page site stands out. The use of fabric adds to the organic and worn feel of the site. It would have been more obvious to go with leather instead of the cotton in the header and footer. But I think this was an excellent choice—it’s more stylish than just straight-up cowboy. Something about the balance just feels spot on.

This site is selling wedding related foods, but the ties to wedding dresses is obvious. The use of fabrics connects users with the product and helps them visualize the products in their own weddings. Imagine if the cakes were presented in a stark way that simply showed what they sold. The fabrics in the design give it an organic feel that makes the cakes more relatable.

The final example is this baking site from Pillsbury. I imagine it was probably tempting to go with a kitchen theme. But the fabric choice is brilliant. The site’s homey feel is warm and inviting, exactly like you want your cooking to be. It’s a well thought-out design that is beautifully implemented.

Fabric textures at Graphic River

You can find many sources of free textures, but one of my favorite places to pick up these kinds of assets is on Graphic River. You have to pay for them, but it’s well worth it. Not only are the elements super cheap ($2 to $4), there are so many of them that you could build an entire design around elements from these collections.

• Fabric Texture
• Denim
• Leather
• Ribbons
• Buttons
• Retro Badges

The latest trends in website design will be among the topics at HOW Design Live in San Francisco, June 22-26. The HOW Conference offers a dedicated Print to Web track just for you. Hear from speakers including Patrick McNeil, Chris Converse, Mario Garcia, David Sherwin, Jose Caballer, Terry Lee Stone and more.

Here are five tips on making the switch as smooth as possible:

1. Open the lines of communication. Change can be hard for all parties involved, so communication is key. One of the first items on your to-do list should be calling a team meeting to get everyone moving in the same direction. Your direct reports need to understand your top priorities in your new position – and what you expect from them. Mention that your door will remain open for one-on-one discussions if anyone has questions or concerns.

2. Don’t play favorites. Gain the trust and loyalty of your staff by managing in a fair and consistent manner from day one. You’re probably tighter with certain teammates, but as the boss, it’s critical you maintain a level playing field. Doling out choice assignments to a select few or relaxing the rules “just once” to accommodate a friend can lead to conflict and incite complaints of favoritism. In fact, any behavior that even hints at preferential treatment can damage your credibility. As the saying goes, perception is reality. This means you’ll likely need to establish new boundaries with the individuals you’re closest with. This might feel awkward at first, and it’s OK to acknowledge it with your best work pals. Open, honest conversations will help everyone adjust.

3. Ease into the role. Resist the urge to institute major changes right out of the gate. Flexing your newfound power without carefully surveying the big picture or soliciting staff input can hurt morale. Take some time to find your footing. Position yourself as a thoughtful and strategic manager who values the insights of others. Yes, you’re the ultimate decision maker now, but you’ll earn more respect by reaching out, gathering information and listening to your team than you will if you immediately make sweeping changes in a vacuum.

4. Nip problems in the bud. Some people will applaud your promotion and get on board quickly, but others might let their bruised egos and bitterness get the best of them. Colleagues who believe they deserved the job may challenge your authority, question your decisions, gossip or simply display an all-around bad attitude. If this occurs, it’s important to swiftly address (and potentially document) the problems. Set a no-nonsense tone early and maintain your authority. If people view you as a doormat initially, it can be hard to change their views later on.

5. Have faith in your abilities. While some newly promoted managers falter because of overconfidence, others struggle due to insecurity. At times you may feel nervous about assuming this higher-level position or wonder if someone else on the team possesses stronger leadership abilities. It’s normal to encounter moments of self-doubt as you acclimate to your new role and responsibilities. The key is to remember you were chosen for a reason. Your boss obviously feels you have the necessary skills and attributes to succeed. Trust his or her judgment.

The bottom line is that if you seem unsure of yourself, your employees will pick up on it. Be mindful that what seems overwhelming today will become more manageable as you settle in. In short, keep your cool and project a quiet confidence. If you believe in yourself, others will, too.

Want more advice on your interactive design career? Check out the new issue of HOW Magazine. It’s all about interactive design and typography–with tips on how to take your design career further.

Matthew will be presenting on the how, what and why behind HTML and CSS for visual designers at the HOW Design Conference this June. In preparation for the HDC, we caught up with Matthew to pick his big brain and solicit his advice to other creatives entering this growing world of design.

Going back into your history a bit, tell us when you first realized you wanted to be a graphic designer?

I don’t think I ever did, I used to draw logos (mostly on Monster Trucks) in elementary school. I have always been one of those go-to people for design things.

I realized I wanted to be an interactive designer while studying architecture in college. The Internet was happening at the same time I was first learning about structural engineering. I remember being way more interested in structured data than building technology.

Speaking of your entry into design, what was your first job in the field?

I had a paid internship with the Digital Imaging group at Microsoft in the mid 90’s, mostly interface design projects. If that does not qualify as a first job, I did a lot of design freelance the following year for various silicon alley startups here in New York City.

Well… we count them both, Matthew! And here at HOW we all admire your hearty resume. What’s some of the most valuable advice you could bestow on other designers aspiring for a similar career path?

1) Don’t be prickly; there is a difference between being serious about your work and taking yourself too seriously.

2) Inspiration will only get you so far. Keep working. Fail often.

3) You are not going to be a good interactive designer if you don’t understand how interactive projects are built.

In reference to your conference topic, HTML & CSS for designers, can you tell us where the idea came from?

It pretty much happens all day long. I have always been the guy at parties (and family functions) who is tossing out ideas for new interactive projects or helping somebody with their complex Internet thingys.

That is no surprise… But what about when you’re not feeling creative. How do you break out of a rut?

I step away from the computer. Go outside and spend time with the kids – which always eventually turns into making something creative.

Get more from Matthew at his HOW Design Conference workshop: HTML & CSS for Visual Designers, part of HOW Design Live in San Francisco, June 22-26.

Think about how we did things just a year or two ago. The entire goal used to be to get all pages to render the same, no matter the user environment. The development community was packed with tools to help sites do that for a wide array of browsers. This worked great when the desktop computer was the primary medium, but now users are accessing the web from a multitude of devices—smartphones, tablets, desktop computers, netbooks, laptops and web-enabled TVs.

I would put responsive design on the short list of things that have shaped the way we design and build sites. It’s an absolute game-changer for the future of web design and presents one of the greatest opportunities in the industry.

Learn the basics of Responsive Web Design, including how to convert PSD designs to HTML and how to translate your designs across platforms, in this on-demand web design tutorial with Chris Converse.

This radical shift to accommodating users’ environments has a dramatic impact on web designers. At the most basic level, a designer must plan for at least four different layouts of the same content. Take a look at the Forgotten Presidents website to see this in action. Resize your browser and you’ll see it transition between four different layouts.

The screenshots from this site were taken at 320px wide for smartphone, 768px for tablets, 1024px for netbooks and 1600px for desktops.

More design time

On the surface, this doesn’t look so complicated, but there are a number of things you need to consider. Good design doesn’t happen by accident. As such, sites that embrace a responsive approach will ultimately require more design time. Once a design approach is selected, you have to plan for at least four different variations of the layout, as seen here.

If you start proposing responsive sites to your clients, make sure you consider the impact it will have on the design budget, not to mention the coding and testing portion of the project. With a larger amount of work required for each layout variation, the cost will inevitably increase. This means educating clients why we’re passing on these costs.

Getting the design right

Sometimes web designers like to wing it, designing only a few pages and working through the details as they build the actual site.

But with responsive design, you must consider how the same content will render in multiple layouts. This means it’s imperative that you design these ahead of time. If you choose not to, you’re much more likely to run into problems as the site is built.

This is a huge reason why so many responsive sites rely on a single layout. Dig through the Forgotten Presidents site, and you’ll notice the site uses a single layout formula. This makes for less design work, less coding and less testing. And, of course, less work for us means less cost for the client.

A more typical site, though, has perhaps four different page layouts. That translates into 16 design scenarios when you’re designing for four widths. That’s a lot to plan for. If you don’t prepare for this, you’ll be doing a lot on the fly and will likely end up with more time invested in the project. Designing and planning these ahead of time saves time and improves the overall quality.

Understand the code

One of the most beautiful things about building CSS-based sites is how effectively the styles are separated from the actual content (check out CSS Zen Garden if you’re new to this). You don’t have to be a master coder to work with responsive design, but it certainly doesn’t hurt. Most fundamentally you should understand that the exact same HTML is sent to every user. How the site is rendered depends on the user’s device.

With this in mind, the only way to adapt to the user’s environment is though CSS, HTML and JavaScript. This is relevant because we need to understand that if we radically alter the design, it might present some difficulties in the coding process.

Sites that embrace this mentality often have a minimalist approach to design. While by no means are they strictly minimal, they avoid complex layouts based on intertwined containers and frameworks. Over time this will likely change, because responsive design is still working its way into the design and development process. Eventually we’ll see far more complex designs that truly embrace the flexibility of CSS-based designs.

A tremendous opportunity

Responsive design presents a fantastic opportunity.The majority of the design community moves slowly, especially when something as far-reaching as this comes along. Those who dive into this new approach and master it first have a chance to stand out.

Ultimately, responsive design will have a large impact on the web design and development community. I believe that the more designers understand what makes the web work, the better they’ll be able to accommodate and plan for responsive designs.

Additional resources

• Media Queries Showcase: a gallery of responsive sites
• CSS Zen Garden: why CSS-based design is the only way to build sites
• Responsive Web Design: the definitive article from A List Apart that started it all
• Media Queries: how to serve up device specific CSS

Responsive grid systems

The following are some popular CSS grid systems that include responsive elements.

• Less Framework 4
• Adapt.js
• 320 and up

Books

These are the best books on the topic:

• Adaptive Web Design by Aaron Gustafson
• Hardboiled Web Design by Andy Clarke
• Responsive Web Design by Ethan Marcotte

Online web tutorials

• Techniques in Responsive Web Design—on-demand design tutorial with Chris Converse
• Responsive Web Design—on-demand design tutorial presented by Jesse Friedman