Blue Sparrow Media

Telling stories with your designs

Published May 20, 2012 | By admin

Websites are incredibly versatile as a medium, to be used to display information and other content, and if well designed they can do this in an enjoyable way that’s easy for the reader to digest.

This can be done through combining a site persona with an ongoing narrative, consistent throughout, which will all come together to create a ‘story’ through which you can deliver relevant content.

It’s important to recognize as a designer that the story, which the content is then based on, comes before anything else in the site.

The content can’t simply be ‘dropped’ into the site post-design; it needs to be built up in the correct order: story, content, and then, finally, design.

Putting together the ‘story’ for your site involves two main components, a persona, and a narrative.

Personas

When designing a website, any seasoned designer will tell you is that the most important piece of information they need is the target audience. This is necessary information in styling the website, layout, what content (both text and images) to include, even what color schemes to use.

Once this information is found, either through market research, or through your primary objective as a site being to appeal to a particular audience, you can then work out how to adapt that into your site design. Whilst the content will often dictate what the target audience is—an e-commerce site selling kids toys is clearly aimed at parents—obviously there will always be exceptions. But this is an important part of knowing what your story needs to be conveying. Your ideal target audience has preferences and personality; this is your user persona.

Next comes the site persona, which is effectively a fictional individual, representing your site (not audience) in all ways: style, looks, ideas, age—all symbolizing various aspects of your site. These characteristics come together to form a personality—a persona—that defines your site and helps to provide a clear picture of how it should behave, what it should look like, and what content it should contain.

The importance of this in web design cannot be stressed enough, as it stops designers from falling into the trap of focusing on individual elements from the site, which combine to create a poor site with lack of coordination. A designer with an overall picture of the site, right from the conceptualization stage at the very beginning, will create a far better end product.

To create your site persona, you will need to have the following:

A good idea of your Target Audience: as mentioned above, you can use your user persona to help mold your site’s persona, however it only needs to relate to the user persona, not mirror it directly, otherwise your site will be far too specific
References to key figures in your organization (if any): this will help if your brand identity is based on the people in your organization, as your site persona can reflect elements of theirs, just as Apple did with Steve Jobs, and mojang.com, a game development company does with their lead title, Minecraft, referencing it in their site title and various other prominent places.
Promotional Content: this will make up the user experience on your site, and will be partly influenced by your site persona, but by being a part of it, and so influences it in return. The content will tell your user what the site is about, and what the persona is, playing an important role in the persona of your site. This will be a topic I will return to later in this article, however it is a point worth touching on in relation to personas.
Any other relevant documentation/content: this may seem incredibly vague, however sites can be so varied, and any relevant content or aspects of a site can be useful in creating a persona for it, and even subtle and seemingly inconsequential things can make a noticeable difference to the front-end of your site.

Narrative

The narrative of your site is the essence of your story, and encompasses all your content. Your narrative is the video embeds in your site; it is the content on your about page; it is your background image; it’s virtually all your content coming together to bring the user an overall experience that forms a narrative.

It’s easy to think of a narrative in a similar way to a thematic site. However, it’s slightly different as themes focus on design, where narrative focuses on all aspects including, and especially, content. The importance of the narrative is that it dictates your site’s pacing and how the user interacts with it, everything from your navigation bar to your ‘transaction complete’ screen.

The best narratives come organically grown, and it helps to have some existing content to define your narrative from, rather than working out your narrative and then artificially creating content around that. In a nutshell, the narrative is the journey the user experiences on their journey throughout your site, and you’ll need to get it right for your user to have an enjoyable experience. Just as a narrative needs to hang together well in a novel, so does your site’s narrative.

As with the ‘references to key figures in your organization’ under Personas above, your narrative can benefit from input from the story of your company, or a figure in your company, highlighting the highs and lows—anything that will make your user/reader care, and take an interest in your site. If your site has a blog, then your users will, if you have an interesting story, return time and again, to check for updates, and to participate in your site. This is especially evident if you have a forum on your site, as users can directly contribute.

A far too often used narrative method is the splash page—usually an all singing, all dancing entrance to the main event of your site. In most cases it doesn’t tell a story, it just gets in the way. It breaks up the structure of the site, and offers a facade that might not reflect the true content of the site.

Where narrative can be more practically useful in your site is in this context (focusing specifically on navigation):

In the story of this site, you learn about the product of the site, you try it, and like it, so subsequently buy it. After purchase you need support for any reason, a fault, or a query of some description. And then, at the very end, we can contact the company, for business queries, or as a customer.

The natural inference of the layout of this navigation bar, unfortunately for the site, is that SUPPORT follows PURCHASE because something has gone terribly wrong, and CONTACT is our last hope of getting satisfaction after SUPPORT has failed. (Support must have failed, not only because it has a terrible reputation across various industries, but also because it fits the plot: if support succeeded, who would we need to contact?)

This may seem like far too much psychoanalysis for a web designer, but if your story is based around a basic navigation system, then it’s important to think of the process in which your user will go through each page. Getting the order of the navigation wrong is similar to killing off a character in a book before introducing them: it simply does not make sense in the narrative of the story.

Another helpful way to think of layout in relation to your narrative and story is by visualizing a newspaper, or a comic. For comic book/graphic novel artists, there is always an issue with the positioning of panels, insofar as they need the reader’s eyes to be drawn from one panel to the subsequent one, rather than out of order. You can see how this would be an issue with the comics in a Sunday paper. With only a few panels to work with, an artist has to make sure that the punchline (usually the final panel) doesn’t detract from the final product so much that the reader looks to it first.

In this way you can visualize the layout of your site, and how it flows, as users are often channeled subconsciously through the same order of pages and links, creating their first impression of the site based on ad positioning or content below the scroll line that they can’t see, where you wanted the initial viewing of the site to be so different!

To conclude, your site, small or large, will have a user experience, and if you haven’t taken the time or care to create a story, it won’t be as coordinated or flow as well as it could do. The sites you see where you think, ‘that’s really slick’, or ‘I wish my site worked as well as that’, have most likely been storyboarded with a narrative, and taken care over styling a persona.

So next time you visit Apple.com, think about what sort of persona it has, and how the site has been designed to flow, placing their leading Mac product first, but the iPhone product in the center of the navigation, rather than second, and having their Apple logo instead of a home button for brand recognition.

Dan Rajan is a video editor, creative content designer, and passionate writer from the UK, follow him on twitter!

Do you use a narrative approach when designing? Have you ever storyboarded a site design?

When Minimalism Backfires: When Too Little Is Not Enough Fantastic Content Sliders for your Inspiration Designing for search engine optimization

Article source: http://www.webdesignerdepot.com/2012/05/telling-stories-with-your-designs/

Atomicdust: explaining design process

Published May 20, 2012 | By admin

A St. Louis design group announced a special gathering at a local design studio for a program entitled, “Educational Night: The Business of Design.” The evening’s program was hosted by a local design studio that is making leaps and bounds in the local and national scene, so it didn’t take long for the reservations to pour in until there were no more spaces to be had.

The studio, Atomicdust, certainly seemed to have the inside information on success, having been recognized by the One Show, Step, Print, and Create Magazine as well as local and regional Addy awards, so getting some inside information was highly coveted by members of the design group.

The notice read: “Jesse McGowan of Atomicdust is going to talk about the business of design, focusing on what we all went to school for vs. what is usually required of designers in the real world, especially those who freelance or start their own companies. He will touch on pricing strategy, client management and then talk about a couple resources that are out there for small firms/freelancers.”

Obviously, no one could turn such information down. The promise of free beer, wine, and soda certainly didn’t hurt, either.

Mr. McGowan, the Account Director, is a pleasant and jovial guy who started his talk by admitting to being a “graphic designer who learned the business side of design.” One of my big disappointments in our hfield is that most designers, being right-brainers, don’t care to learn being businesspeople, so I immediately perked up to hear what he had to say.

On learning business…

Jesse spoke of his start as a designer and being forced through increasing responsibility to the studio of having to learn to deal with clients. This is not just talking to people but knowing the nuances of negotiations, trouble-shooting, explanations, and everything else involved in running projects as the client contact. Jesse adds:

“My role was moving from that of designer to account executive, strategist, new business developer, manager and HR. While I felt more creative than ever, I was forced to learn an entirely new set of skills that I’d never been trained on before. It was a terrifyingly formative transition that has left me forever hungry for new ways to continue to grow.”

More on Jesse: After nearly nine years with Atomicdust, Jesse has extensive experience in both the development and management of a variety of media. As Director of Account Services, he prides himself on an almost obsessive attention to detail and keen instinct for guiding project teams. Jesse always brings a unique perspective to the table and encourages Atomicdust’s internal team and clients alike to look at projects from new angles in order to produce standout results. “Jesse is”, he writes, “a driving force behind many projects at Atomicdust and behind the wheel of a Honda Civic.” I told you he was jovial!

Mike Spakowski, Principle/Creative Director at Atomicdust and wrangler of a talented crew, relates about having Jesse handling client’s accounts:

“As a firm grows, the role of a principal changes from design focused to design and business focused. It can be difficult to focus on both. People get involved in this industry because they are passionate about design and creativity. But a person goes from being a producer of design to running a design producing business.”

A little more about Mike: More than eleven years after founding Atomicdust, Mike is actively involved in day-to-day design strategy, art direction and studio management. As Creative Director, his drive for design excellence, collaborative attitude and even-keeled temperament set the tone at Atomicdust, which is obviously a fun and energetic workplace.

It is rare that a creative can step up and handle the left-brain business that comes with being alert and savvy when dealing with clients. Both Jesse and Mike seem to have the personalities to be extroverted enough to enjoy dealing with people. That seems to be what separates creatives who can handle the added responsibility of dealing with account service as opposed to most creatives, who are introverts, and deal better with people over the internet. I had to ask Jesse and Mike if they have any opinion as to why they were more comfortable dealing with clients and if they have any advice for those who are not comfortable in client negotiations. The answers were surprising.

“We’re problem solvers,” says Jesse. “I get more excited about helping a client fix something they’ve been struggling with for years than I get nervous about talking to them. If you understand the significance of your role, you start to realize that clients are the ones who should respectful of your time and nervous about wasting it.”

“Starting off eleven years ago, I was not always comfortable around clients,” adds Mike. “For me, it became easier as my experience grew. You become confident in your ability to solve their problems with creativity. Your perspectives on those problems become less and less wavering. A designer becomes comfortable around clients as a result of being confident in your abilities.”

The rest of the Atomicdust staff. From top left to right: Mike Spakowski; Principle/Creative Director, James Dixson; Partner/New Business, Taylor Dixson; Partner/Motion Graphics, Jesse McGowan; Account Director, Kevin Burford; Business Developer, Katie Werges; Senior Designer, Erika Cruse; Account Manager, Jeremy Cox; Motion Graphics Designer, Danielle Hohmeier; Online Account Manager, Tim Gieseking; Developer, Jason Stoff; Designer, Rich Heend; Senior Copywriter, Mike Roberts; Traffic/Project Manager, Beth Porter; Designer, Tara Nesbitt; Online Marketing Intern, Annie McCance; Developer, Jordan Jenkel; Account Executive Intern.

Explaining the process…

One thing Jesse covered is perhaps the most important thing in dealing with clients and the most misunderstood. It seems obvious to me but then again, I’ve held the role of designer, art director, creative director, studio manager, account manager, and wearer-of-many-hats. Dealing with people is hard enough on a daily basis as you drive, shop, and use a public laundromat, so having to maintain a working relationship, bound by a contract, many thousands of dollars, and a process that few, if any, clients understand, is a unique challenge.

The process of a project would seem clear to most designers. The client wants this and to get it, we need to first do that, then that, then the other thing, and finally some last minute this and that and the whole project comes to an end. There were days when a client contracted with a designer or design firm and was presented with a final product in a meeting. Done…pay me!

Lately, that’s not the case. Tough economics, competition between creatives and studios, and the cost of a web site with certain collateral projects has clients worried…not that they weren’t worried before but now it has become imperative to waylay the client’s fears with a lot of “hand-holding,” explaining what will happen when, how, and why. There’s nothing wrong with that. In fact, it makes perfect sense. How often do designers complain about a project going awry because a client injects a want at the wrong time or mushrooms the scope of the project? By explaining the process, in detail at the beginning, both parties should understand the milestones and what can and should be expected by BOTH the client and the creative team. As someone at the meeting interjected, “wouldn’t you want a doctor to tell you why and how he/she was going to operate on you?”

The open space of the converted factory, they now manufacture winning design.

“Having a defined process – and not the type that we brand, hype up and never use – that is engrained in our culture, we not only understand internally exactly how every project will go, but we have the ability to establish the same expectations with our clients,” explains Jesse. “When buying creative services, there is much trepidation around working with free spirited artists. This process removes much of the variability that keep clients awake at night.”

By simply stating, “This is what we do, and this is what it typically costs, is this a good fit?” it eliminates a lot of the needless bartering and wasted time crafting custom proposals for clients. By defining what we do for brands, and what we don’t do, it’s become easier for us determine cost,” Mike relates on how this has impacted the studio both in the bottom line of financial considerations such as profit margins and people hours on a project but also on repeat clients as opposed to one-time clients.

Mike concludes, “Design is a valuable services to clients, and conversations about cost shouldn’t be awkward and embarrassing. They also should happen as early as possible.”

“Enigmatic wizardry?”

Naturally, there are designers who believe that a client should just trust the designer to deliver the best possible product without explaining the process or any interference. As one attendee brought up during the question and answer portion of the evening, he thought that design should be almost kept secret from the client with what he termed, “enigmatic wizardry.”

“Dumbledork,” as he will now be known to the rest of the design group for this profound statement, is undoubtedly one of the introverts referred to in the beginning of this article. Probably more so now that he has been made a public laughing stock. It’s another bit of proof that not every creative is able to deal with clients as does Mr. McGowan and Mr. Spakowski.

The idea of keeping our “magical” designing secret is ridiculous, if it was really ever a practice. Transparency is naturally the best way to run a project, from both the creative and client sides, as well as raising trust from both parties and assuring future work and recommendations of the studio’s professional abilities.

The front of Atomicdust. Transparent windows and work process.

Jesse adds, “the design profession is shrouded in enough mystery already. We try to operate our business as transparently as possible, with our clients, staff, and peers. We can all learn a lot from each other, and closing yourself off from the world will date you more than protect you. Share what you know, inspire others, and aim to push our profession forward.”

Commoditization

Jesse spoke on an issue called “commoditization.” He explains the meaning:

“Process allows designers and agencies to streamline their internal efforts, and helps clients have a better understanding of what they’re buying. But on a more broad scale, it allows us to fight the commoditization of our industry. Let’s be honest, designers are a dime a dozen in a client’s eyes. The market is so saturated that our clients are losing the ability to distinguish between us (designers), resulting in competition based on price rather than talent. Bottom line: they think that all designers are the same, so they hire the cheapest one possible.”

“Process represents a chance to stand out,” he continues. “It demonstrates that a designer understands what it takes for he/she to consistently do good work, and depending on the process employed, may allow them to produce more strategic, educated creative than their peers. Clients will notice the difference and usually pay for it, too.”

Final thoughts

“Ours is an industry that most of us are not truly prepared to enter”, states Jesse. “We may be schooled as designers. We may be passionate about our craft. But one day we will all wake up and find that we are under-prepared for what our day has in store. We will realize that the business of graphic design is just as much about relationships, people management, financial decisions, networking and selling as it is about designing. Many will spin their wheels and burn out. The smart designers will adapt and in all likelihood forge the next mold for smart, cutting edge agencies.”

Check out Atomicdust’s blog and sign up for their monthly newsletter. Follow them on Twitter and Facebook

Speider Schneider is a former member of The Usual Gang of Idiots at MAD Magazine and has designed products for Disney/Pixar, Warner Bros., Harley-Davidson, ESPN, Mattel, DC and Marvel Comics, Cartoon Network and Nickelodeon among other notable companies. Speider is a former member of the board for the Graphic Artists Guild, co-chair of the GAG Professional Practices Committee and a former board member of the Society of Illustrators. Follow him on Twitter @speider

Do you explain design process to your clients or do you subscribe to “enigmatic wizardry?” Has this article convinced you to try a different approach?

6 Tips for Pitching to Major Clients Charging Per Hour vs. Per Project How to make money from a $3000 website

Article source: http://www.webdesignerdepot.com/2012/05/atomicdust-explaining-design-process/

Free download: 40 Exclusive Photoshop Patterns

Published May 20, 2012 | By admin

We’re back with another great exclusive freebie for you.

This one is a Photoshop pattern file (.PAT) which contains 40 beautiful textures that you can apply to your designs.

A detailed step by step instruction is provided inside the file to help you use them. You can use these as textures for your websites or any background.

Thanks to Rayz Ong from LemonGraphic for creating this awesome freebie for WDD readers.

Redistribution is not allowed, so if you’d like to share this one with your friends, kindly direct them to this page so that they can download their own copy from here.

The file is free for personal and commercial use… see the full preview and download after the jump!

Exclusive Freebie: “Funkies Patterns”15+ high quality, free pattern sets Photoshop Droplets and ImageMagick: Tools for batch image processing

Article source: http://www.webdesignerdepot.com/2012/05/free-download-40-exclusive-photoshop-patterns/

Posted in Web design | Tagged web | Leave a comment

Comics of the week #130

Published May 20, 2012 | By admin

Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

A true friend

Designer input

User friendly

Can you relate to these situations? Please share your funny stories and comments below…

Comics of the Week #70 Comics of the week #80 Comics of the week #88

Article source: http://www.webdesignerdepot.com/2012/05/comics-of-the-week-130/

Posted in Web design | Tagged web | Leave a comment

Our favorite tweets of the weekMay 14 – May 20, 2012

Published May 20, 2012 | By admin

Every week we tweet a lot of interesting stuff highlighting great content that we find on the web that can be of interest to web designers.

The best way to keep track of our tweets is simply to follow us on Twitter, however, in case you missed some here’s a quick and useful compilation of the best tweets that we sent out this past week.

Note that this is only a very small selection of the links that we tweeted about, so don’t miss out.

To keep up to date with all the cool links, simply follow us @DesignerDepot

Six Common Web Programming Mistakes and How to Avoid Them http://ow.ly/aTe7a

The huge impact of color in website design http://ow.ly/aTnrJ

The Eagleman Stag by Mikey Please is an amazing animation you do not wanna miss! http://ow.ly/aTCPS

Take a look at the dark, brilliant and almost real illustrations of Michael Peck http://ow.ly/aUe1X

Writing A Creative Brief http://ow.ly/aUVA1 Dragging The Right Information Out Of A Client

Illustrator Tom Percival has some awesomely creepy stories to tell you http://ow.ly/aVakP

Photoshop of the 50′s http://ow.ly/aUT1l Pin-Up Girls Before And After

When designing for a pixel grid, why not use a tool that’s based on a pixel grid? http://ow.ly/aWTnR #UI (@Adobe)

Are you having troubles increasing your productivity? http://ow.ly/aX9dd Check out these 5 Proven Tactics

Te creative world of painted fingers http://ow.ly/aXdCp

Thornberg Forester is very proud to unveil a new montage reflecting its evolution and its growing success http://ow.ly/aXeLm

Very useful http://ow.ly/aYbFv 8 tools to manage an email newsletter

Tomorrow’s web type today: using stylesets http://ow.ly/aYbSk *great article by @elliotjaystocks

Some great stickers that turn your gadgets into something that looks much cooler http://ow.ly/aYcab

How Letraset’s Dry-Transfer Type Transformed Graphic Design http://ow.ly/aYpUu

Kids have never looked cooler than in the photographs of Jamie Hawkesworth http://ow.ly/aYtFl You bet that’s true!

Seth Godin on When You Should Start Marketing Your Product, Service, or Idea http://ow.ly/aZSbU Good insights

{css:hat} is a #useful Photoshop plugin that translates layer styles to CSS3 http://ow.ly/b004N

Time to rethink some icons? http://ow.ly/b00dp The Floppy Disk means Save 14 other old people Icons that don’t make sense anymore

Sensational work by photographer Peter Hapak http://ow.ly/b03So

The Practical Guide to Multiple Relationships Between Posts in #WordPress http://ow.ly/aZSVh

Want more? No problem! Keep track of all our tweets by following us @DesignerDepot

Our favorite tweets of the week
Nov 21-Nov 27, 2011 Our favorite tweets of the week
Feb 20-Feb 26, 2012 Our favorite tweets of the week
Jan 23-Jan 29, 2012

Article source: http://www.webdesignerdepot.com/2012/05/our-favorite-tweets-of-the-week-may-14-may-20-2012/

Posted in Web design | Tagged web | Leave a comment

Customizing the WordPress login page for consistent branding

Published May 20, 2012 | By admin

Despite the consumer-focused nature of the WordPress content management software, an increasing number of larger organizations and even businesses are adopting WordPress to manage their site’s content — especially corporate blogs and customer outreach programs that take advantage of social media and interaction humanize a company’s brand.

These larger organizations aren’t content to let their backend user interface be branded using WordPress logos and design cues; instead, they prefer to customize the software and ensure that all of their employees know that they’re working within the company’s structure and purview.

It might sound complicated, but customizing the WordPress interface is actually pretty easy, especially when customizing the initial login screen that brings users to the traditional Dashboard homepage.

Because WordPress is styled using CSS, and can be customized with PHP functions, it’s straight forward and even encouraged to give this crucial part of the interface its own look and feel.

Step 1: defining a custom function that points to a custom stylesheet

The first step in generating a customized login page for a WordPress installation is to define a custom function that directs the page to look for a new stylesheet instead of the one that is used by default when WordPress is installed. This is actually pretty easy and can be done on a theme-by-theme basis. This means that a WordPress login page can be unique customized to match the look and feel of every theme a user develops.

To define this new function, open an FTP client and navigate to the following server path:

/public_html/wp-content/themes/SELECTED-THEME/functions.php

Remember that, since this is on a theme-by-theme basis, the current theme selected in the Dashboard is the one that we will have to modify in order to see the results immediately reflected using a web browser. Once you have located this theme’s functions.php file, right click that file and download it to your computer. Open this file in a plain text editor.

Optionally if your current WordPress theme has no functions.php file in its main folder (and this is the case with a good number of custom and self-made themes), open a text editor and create a new plan text file. Save it as functions.php and ensure that no “rtf” or “txt” extension was appended to end. This file will then be uploaded to the server and WordPress will immediately recognize it and put its custom code to use on the login screen.

The function that will be placed into this file is used to redirect the page’s header file from the WordPress-defined Dashboard stylesheet to one that is created by the user. It looks like this:

function custom_login() {
echo ' link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/branded-login-screen.css" / ';
}

Remember that a functions.php file must open with ?php and be closed with a final ? tag. Paste this code between those tags, save the file, and then upload it to the server.

Step 2: creating the branded login page’s stylesheet information

The previous function placed a stylesheet meta tag into the login screen’s “head” section, but that stylesheet has yet to be created or filled with unique material that will change the appearance of the login screen itself. Rectify this by opening a plain text editing application; create a new file called branded-login-directory.css and save that file. Upload it to the server, but keep it open on the desktop as well.

Remember that this file must be placed within the current selected theme’s home folder, the same place that the functions.php file previously edited is located. Putting this file anywhere else will result in no changes being made to the appearance of the login screen.

There are several pieces of information that will be modified using CSS code. These will be pasted into the new stylesheet that was just created, and users can customize their specifics according to their own taste and branding requirements.

Step 3: changing the page background colors and properties

The first step in the process is also the most broad. Users must customize the background color from the traditional WordPress login screen’s light gray to the color of their choice. This is done by assigning style attributes to the page’s “HTML” tag, and it looks like this:

/* Branded Login Background Colors */

html {
background: #000 url('http://your-domain.com/path-to-url/image.gif');
margin: auto;

The first line of code simply describes what the CSS code is doing and it’s a great way to keep track of the changes being made. There’s nothing wrong with annotating a CSS file; during an experimental design process like this one, it will speed things along and make them far easier to manage.

In the code above, a background color of black was defined using the #000 code. Next to that code is a url() construction, which allows the user to define a custom background image for the page. If no background image is preferred, this can be deleted and the page will default to a solid back background color. The use of the “margin:auto” tag centers all content within a page based on a browser’s width. This is why the login box is centered horizontally on every WordPress installation.

Step 4: removing and replacing the WordPress logo

For branding purposes, perhaps the single most important modification is removing the existing WordPress logo and replacing it with the company’s branding mark. This clearly identifies which company controls the content within, and it helps to create a consistent use and administration appearance for those users who publish content to the site and interact with the company’s readers. This is done using the following CSS code in the custom stylesheet:

/* Brand Logo in Place of WordPress Logo */

h1 a {
background:url('http://your-domain.com/path-to-url/logo.gif') no-repeat;
width: 400px;
height: 100px;
margin-left: 0 0 0 10px;
padding-bottom: 0;
}

Using this code keeps the same padding and margins that accompany the standard WordPress logo. However, the code redefines the “h1″ tag in favor of the branding company and allows them to place whatever image they prefer in place of the standard logo. The use of width and height tags within this class allows for a custom logo size that can be either bigger or smaller than the standard WordPress logo.

Step 5: customizing the top bar on the login page

Every WordPress installation comes with a black bar at the top of the login and Dashboard pages that contains useful information, standard links, and other content based on where a user finds themselves in the administration interface. While black is a universally neutral and compatible color, it might be in the best interest of some businesses to customize the bar’s color as well as the appearance of link text and other information contained within it. The CSS code in this step of the process allows any color to be defined as the WordPress bar’s background color, and it enables changing the color of text and links in that top bar.

/* Branded Top Bar Background Color */

body.login {
border-top-color: red;
}

/* Branded Top Bar Lost Password Link */

.login #nav a, .login #nav a:hover {
color: #fff!important;
}

/* Branded Top Bar Link Color and Styling */

.login p#backtoblog a:link, .login p#backtoblog a:visited {
color:
font-weight: bold;
}

.login p#backtoblog a:hover, .login p#backtoblog a:active {
color:
text-decoration:underline;
}

The above CSS code changes the top bar’s background color to red and ensures that all links and texts printed on that bar are done so in white (#fff). This ensures maximum contrast and makes readability easy, even without the standard black background. It’s a great way to take customization of the WordPress login screen to the next level with a relatively minor change to the site’s appearance.

Step 6: customizing the last pieces of the WordPress login page

There are two pieces of the standard WordPress login page which are typically overlooked by the average user when branding the appearance of this critical website within the WordPress installation. Those two things are the actual login button itself and the returned message text when a password is invalid or the installation is offline for things like upgrading and maintenance issues. Typically, the message text is printed in pink while the login button is displayed in a gray, rounded fashion. Both things can be changed using our custom stylehseet.

First and foremost, the message text must be changed so that it matches the new site’s color scheme. This is done by including a new class in the stylesheet known as “.message.” It looks like this when it has been fully customized:

/* Error Message Text for Custom WordPress Login Page */

.message {
margin-bottom: 0px;
color:
border: 1px solid black;
background-color:
padding: 10px;
}

This code defines the error message text as being in a thick white box, surrounded by a solid black border, featuring plain black text. It is perhaps the least inspiring way to present this information but, as always, designers are encouraged to put their stamp of creativity on this error message and make it more inviting to the end user.

Next, it’s time to style the login button. The standard styling of this button is compatible with a wide range of color choices, but many companies will still prefer to alter its appearance to blend in with their overall site structure and design. This button is customized just like any other form element, and the final version of this login button will look something like the example shown below:

/* Login Button */
#wp-submit {
background:
border:
}

Truly a boring login button, the example above merely creates a standard form button with a white background and black text. No border, no margins, no padding. This, like the rest of the CSS stylesheet, is a blank canvas which is designed to be inviting to motivated and inspired designers. Almost anything can be done with this CSS class, including using a background image instead of a background color, and forcing the button’s text to be removed so that only the image can be seen.

Step 7: uploading the stylesheet and testing the results

Designing a customized WordPress login page is easy in theory but, when push comes to shove, using CSS to define a page full of custom elements is never an easy task. It requires a good deal of experimentation with colors, pixels, alignments, and all manner of customizations that typical XHTML and CSS files require. For this reason, it’s important to periodically upload the stylesheet and then navigate to the login page to judge its appearance.

The first several times, it’s likely to appear quite distorted, jumbled, or just plain ugly. That’s fine. Simply return to the customized stylesheet and add new information which will help change the appearance of the site.

Optionally, the advanced web designer might choose to view the actual source of the login page to get a feel for all of the elements that are used to compose its appearance. While this tutorial will help designers radically change the appearance of their WordPress login page, it is by no means a comprehensive list of every microscopic and structural element that composes the site.

Do you use custom login pages on your WordPress installs?

Vladislav Davidzon is the principal of a US-based online marketing consultancy, developing integrative solutions through high impact search engine optimized WordPress websites for socially responsible customers of all sizes around the world. For more details visit Vladislav Davidzon Associates.

CSS Buttons: Tutorials and examples Creating your first WordPress child theme 8 tools to make your website for free

Article source: http://www.webdesignerdepot.com/2012/05/customizing-the-wordpress-login-page-for-consistent-branding/

Posted in Web design | Tagged web | Leave a comment

Telling stories with your designs

Published May 20, 2012 | By admin

Websites are incredibly versatile as a medium, to be used to display information and other content, and if well designed they can do this in an enjoyable way that’s easy for the reader to digest.

This can be done through combining a site persona with an ongoing narrative, consistent throughout, which will all come together to create a ‘story’ through which you can deliver relevant content.

It’s important to recognize as a designer that the story, which the content is then based on, comes before anything else in the site.

The content can’t simply be ‘dropped’ into the site post-design; it needs to be built up in the correct order: story, content, and then, finally, design.

Putting together the ‘story’ for your site involves two main components, a persona, and a narrative.

Personas

When designing a website, any seasoned designer will tell you is that the most important piece of information they need is the target audience. This is necessary information in styling the website, layout, what content (both text and images) to include, even what color schemes to use.

Once this information is found, either through market research, or through your primary objective as a site being to appeal to a particular audience, you can then work out how to adapt that into your site design. Whilst the content will often dictate what the target audience is—an e-commerce site selling kids toys is clearly aimed at parents—obviously there will always be exceptions. But this is an important part of knowing what your story needs to be conveying. Your ideal target audience has preferences and personality; this is your user persona.

Next comes the site persona, which is effectively a fictional individual, representing your site (not audience) in all ways: style, looks, ideas, age—all symbolizing various aspects of your site. These characteristics come together to form a personality—a persona—that defines your site and helps to provide a clear picture of how it should behave, what it should look like, and what content it should contain.

The importance of this in web design cannot be stressed enough, as it stops designers from falling into the trap of focusing on individual elements from the site, which combine to create a poor site with lack of coordination. A designer with an overall picture of the site, right from the conceptualization stage at the very beginning, will create a far better end product.

To create your site persona, you will need to have the following:

A good idea of your Target Audience: as mentioned above, you can use your user persona to help mold your site’s persona, however it only needs to relate to the user persona, not mirror it directly, otherwise your site will be far too specific
References to key figures in your organization (if any): this will help if your brand identity is based on the people in your organization, as your site persona can reflect elements of theirs, just as Apple did with Steve Jobs, and mojang.com, a game development company does with their lead title, Minecraft, referencing it in their site title and various other prominent places.
Promotional Content: this will make up the user experience on your site, and will be partly influenced by your site persona, but by being a part of it, and so influences it in return. The content will tell your user what the site is about, and what the persona is, playing an important role in the persona of your site. This will be a topic I will return to later in this article, however it is a point worth touching on in relation to personas.
Any other relevant documentation/content: this may seem incredibly vague, however sites can be so varied, and any relevant content or aspects of a site can be useful in creating a persona for it, and even subtle and seemingly inconsequential things can make a noticeable difference to the front-end of your site.

Narrative

The narrative of your site is the essence of your story, and encompasses all your content. Your narrative is the video embeds in your site; it is the content on your about page; it is your background image; it’s virtually all your content coming together to bring the user an overall experience that forms a narrative.

It’s easy to think of a narrative in a similar way to a thematic site. However, it’s slightly different as themes focus on design, where narrative focuses on all aspects including, and especially, content. The importance of the narrative is that it dictates your site’s pacing and how the user interacts with it, everything from your navigation bar to your ‘transaction complete’ screen.

The best narratives come organically grown, and it helps to have some existing content to define your narrative from, rather than working out your narrative and then artificially creating content around that. In a nutshell, the narrative is the journey the user experiences on their journey throughout your site, and you’ll need to get it right for your user to have an enjoyable experience. Just as a narrative needs to hang together well in a novel, so does your site’s narrative.

As with the ‘references to key figures in your organization’ under Personas above, your narrative can benefit from input from the story of your company, or a figure in your company, highlighting the highs and lows—anything that will make your user/reader care, and take an interest in your site. If your site has a blog, then your users will, if you have an interesting story, return time and again, to check for updates, and to participate in your site. This is especially evident if you have a forum on your site, as users can directly contribute.

A far too often used narrative method is the splash page—usually an all singing, all dancing entrance to the main event of your site. In most cases it doesn’t tell a story, it just gets in the way. It breaks up the structure of the site, and offers a facade that might not reflect the true content of the site.

Where narrative can be more practically useful in your site is in this context (focusing specifically on navigation):