Webdesigner Depot

syndicated content powered by FeedBurner

FeedBurner makes it easy to receive content updates in My Yahoo!, Newsgator, Bloglines, and other news readers.

Learn more about syndication and FeedBurner...

Current Feed Content

Upfront is a game changer for WordPress

Posted:Tue, 03 Mar 2015 08:15:31 +0000

Whoever you are, however you use it, if you’re building websites with WordPress then you need to take a look at Upfront.

Upfront is a new approach to WordPress, three years in the making, and its developers, WPMU Dev, think it’s the future of the eternally-popular CMS platform.

Upfront is, technically a WordPress theme, in the same way that a T-Rex is technically a lizard. In reality it’s a whole lot more than that: Upfront allows you to customize your site — not just the content, the design too — without ever logging into the WordPress dashboard.

Best of all, Upfront is available, right now, for free, to WPMU Dev subscribers.

Key features

If you’re a designer who prefers not to code, but can’t afford the time or money to pass projects on to a developer, then Upfront is for you. And if you’re already familiar with competing visual editors like Wix, or Squarespace, then you’ll love Upfront’s simple approach that makes its rivals look antiquated by comparison. However, if CSS is your thing, you’ll be excited that Upfront also allows you to edit CSS, right from its interface.

Upfront’s core approach is dragging and dropping elements. Elements can be moved around, and each one has contextual options that can be edited in place. Designer’s used to dragging and dropping in prototyping apps will love the familiar concept. Simply click to edit your site, then drag and drop text, images, a whole gallery, maps, social media buttons, comments, and more into the desired slot in your design. You can even group elements together, creating blocks of content to rearrange at your leisure.

Editing text has always been a big part of WordPress, but with Upfront you get to make edits live in your design. Seeing your copy in its final position on the page is a huge benefit for designers.

The simplicity of Upfront is shown with the effortless reordering of a menu: no need to log into the dashboard and navigate through to your menus; just drag the menu items into the order you want. Smooth processes really do make using Upfront a pleasure.

Upfront uses a grid system, and the drag and drop editor snaps elements into the grid for you, so you never need to worry about alignment.

One of our favourite features is the simple process of adding, resizing and cropping an image. There are countless approaches to this process, employed by different gallery plugins, but Upfront’s simple steps just work.

Responsive design

Of course, nobody dreams of designing a site that isn’t responsive these days, and even on this score, Upfront’s got your back.

A dedicated responsive option allows you to toggle through mobile, tablet, big tablet, and desktop sizes. Each option features its own grid and controlling how your design looks on different devices is a cinch.

One of the biggest features of Upfront is regions. Regions is a new concept: imagine a map, or a video, or a collection of images, converted into a block of content; that’s a region. Regions can be fixed, or float, and can be set to scale. They’re the perfect way to build the horizontal band-style websites that responsive design has ushered in.

Why WordPress?

There are plenty of visual designers already available. Squarespace, Wix, Webydo, and many others are taking a daily chunk out of WordPress’ market share. WordPress, despite the 60 million plus sites that run on the platform, is lagging behind the pack when it comes to simple editing tasks: customers aren’t content any longer to navigate their way through a cluttered dashboard just to edit a single setting.

Why then did WPMU Dev choose to build Upfront on WordPress instead of creating their own backend? The answer lies in one of Upfront’s best features: as well as allowing you to drag and drop text, images, and other content into your design, Upfront allows you to drag and drop both code, and widget elements. Those elements enable you to add any plugin you like to Upfront, just as you would using any other theme.

Upfront…succeeds in harnessing the resources of the mighty WordPress community

That is the real strength of Upfront: it succeeds in harnessing the resources of the mighty WordPress community, that is constantly releasing some of the coolest plugins on the Web. Where most visual editors tie you into their limited ecosystems, Upfront takes the opposite approach and embraces the entire WordPress universe. Have a favourite gallery plugin? Feel free to use it. Like the design of your social media widget? Go right ahead. It’s an open approach that can only benefit Upfront’s users.

Future plans

If you’re smart, the first thing you do when assessing a new service is try to gauge its longevity. So it’s encouraging that WPMU Dev are treating the current version of Upfront as 0.1, and publicly acknowledge that there’s a way to go to reach version 1.0.

That said, all of the core functionality is in place, with more features being added all the time. One future feature that’s being hinted at is a way to manage multiple sites. Another feature to be added in the near future is a theme builder, to enable you to build your own Upfront themes.

WPMU Dev believe that Upfront is the shot in the arm WordPress needs to stay relevant for a decade or more, and that means a lot of enhancements are planned down the line.

Try it out

Upfront is a layer of intelligence between you and the WordPress dashboard, or even the functions.php file. There are dozens of visual editors available but Upfront appears to be the rarest kind: a solution that actually delivers.

Curious to try it out for yourself? Then check out the three incredible demos at upfront.pro.

Already sold? Well, if you’re already a member of WPMU Dev then you can use Upfront now, as part of your seubscription. If you’re not a subscriber, for a short time you can get 50% of annual membership to WPMU Dev, giving you access to not only Upfront, but also 350+ plugins, themes, and unlimited support. If you use WordPress professionally that deal’s a no-brainer.

[- This is a sponsored post on behalf of WPMU Dev -]

Full Themify Master Club: 47+ WP Themes, Plugins & Addons

Source
6 essential website photography trends for 2015

Posted:Mon, 02 Mar 2015 14:00:11 +0000

When it comes to design, photography is a fundamental tool that every design puts to work at some point. What I want to dissect here is not the trends in actual photography, but rather trends in the way photographs are used and manipulated in web design.

Some of these trends are obvious and well known, others are frequently used and seldom discussed. I have found that when many trends on the same topic are collected into one set we find that we have stronger opinions than expected on the topic. Also, it seems that when we see trends like this compared to each other we discover that the approach we are using isn’t the best and can replace it with a better one.

1) Super sized backgrounds

The first trend I want to consider is among the most popular. Below is a set of sites that make use of very large background photos. This is an approach that has literally been beaten to death. But that isn’t to say that it should be abandoned. Like all good trends it has its place. My mission when filling this section was to find sites that didn’t use the style as a crutch. Instead I wanted sites that used it with purpose, where the background photograph played a powerful roll in communicating the message of the site. Consider this as you browse these samples.

2) Backgrounds as foreground content

My favorite twist on the super sized background photo is when the designer cleverly uses a photograph as both a background and foreground element. In these designs the photograph fills in the background in a somewhat decorative way. And at the same time some element of the photograph is brought to the foreground. Most frequently this is accomplished using depth of field where a product or foreground element is in focus. This blending of viewing fields allows the photograph to create a sense of style, while the contents have a very real purpose in the actual content. This challenging approach requires planning and coordination with your photographer, but the results are among my favorite.

3) Monochrome photos

As designers the idea of “photoshoping” a photograph to fit our design style is not surprising. This sub set takes the idea to a radical end in one particular way. Here the designers have turned the photos into monochrome ones; in particular non black and white variations. While this might appear to be a mostly stylistic decision, I think there is more to it. Color can be used to set a tone and communicate subtle meaning. By leveraging a single tone in the photograph the designer can reflect that single emotion in the design. Blue feels safe, stable and corporate. Red feels vibrant, alive and energetic, and so on. By switching to a monochrome style the photographs take on a new type of communication through pure color.

4) Muted photographs

Collected here are examples of a style that we might think of as extremely popular, and to be fair it does feel trend and over used. And yet, when I go digging for examples of this style at work I have found that it isn’t nearly as popular as one might think. These sites are designed around muted photography. And more specifically then that these photos have a faded, almost vintage style to them. This is quite frequently combined with white text over the top of the photo (as can be found in all 5 samples here). This approach is actually quite frequently connected to the hipster style, which has been really popular in the last year. Finally, I was surprised to find that nearly every example I found in this style made use of decorative type faces in the text overlaid onto the photo.

5) Photography for tone and atmosphere

As a teacher I find myself getting onto students for certain things time and time again. One of those is related to how they use photography. Often times designers want to leverage decorative photos that don’t really directly communicate anything regarding the content of the site. For example, the first sample below is a portfolio site with a space photograph. It doesn’t say anything literal about the individual. I have had a rather rigid opinion of decorative photos like this in the past, and I have found that in exploring the use of photography more intensely those views have softened. And this is what I really love about dissecting trends; by doing so we can break down our assumptions and discover fresh new ways to craft our designs. These samples prove that a decorative photo establishing tone and atmosphere can be a meaningful part of a design’s success. Dig into these samples and see if you agree.

6) Knolling

Finally I want to look at a set of sites that rely on photographs using knolling. Knolling is the process of aligning objects into parallel or 90 degree angles to create a sense of organization. This approach is a rather fringe and unique style that designers will seldom use. Again, the style is often associated with a hipster style of design, but there is more to it than that. These photographs reflect a meaning that goes beyond the contents of the photos themselves (which also have meaning of course). They hint at the qualities of those behind the photos, they suggest a sense of order, process and organization. These are all good qualities, especially when it comes to representing designers and agencies.

Conclusion

Photography is a natural tool in the designer’s tool belt. Hopefully by observing the many ways they are being used and the various styles that can be applied you will find fresh inspiration. And above all things, I hope this humble collection helps you find fresh ideas that inspire and challenge the work you do.

Full Themify Master Club: 47+ WP Themes, Plugins & Addons

Source
Our favorite tweets of the week: February 23, 2015 – March 1, 2015

Posted:Sun, 01 Mar 2015 09:41:57 +0000

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

THEBIGEYES #branding imagined by Lo Anto http://bit.ly/1y5kYLh http://ow.ly/i/8HsPE Like it?

Case Study of Assembly by Focus Lab http://bit.ly/1CLO4C6

A visual way to brainstorm your ideas http://bit.ly/1vZLuLW via @gregoiregilbert

Astropad: Turn your iPad into a professional graphics tablet for your Mac http://bit.ly/1vjpcUM

#Mobile #UX design and all the ways it could go wrong http://bit.ly/1yRVJww via @sitepointdotcom

A comprehensive guide to hiring the perfect freelance developer & designer. http://bit.ly/1K87FlZ via @thinkful

The Unseen creates “coded couture” to read wearers’ auras http://bit.ly/1CKYIcx via @dezeen

Debugging tools & resources for testing website layouts http://bit.ly/1Erfq32

Dunkr App — easily see stats on your latest Dribbble shot http://bit.ly/1zQ6r6P

Biodiversity in Design Education http://bit.ly/17JB6wZ via @designobserver

Better Motherf**king Website http://bit.ly/1E1QocG

In case you’re interested: 5 Important Design Principles for Apple Watch #Apps – http://bit.ly/1DE2JmJ

Brace yourselves … The gorgeous #typeface that drove men mad and sparked a 100–year mystery http://bit.ly/17cXbmI /@Gizmodo

Fastest #WordPress Hosting – Beginner’s Guide to Finding One http://bit.ly/17X6NmM

Emails that win you clients http://bit.ly/1AnuWMz

Undo – good article by @SachaGreif – http://bit.ly/17tMhZL

Check out JWT’s interesting presentation: The Future 100 http://slidesha.re/1AuA281

Lonely Planet 404 is adorable http://bit.ly/1CLBymj

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

Full Themify Master Club: 47+ WP Themes, Plugins & Addons

Source
Comics of the week #276

Posted:Sat, 28 Feb 2015 09:27:30 +0000

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…

Is that a good thing?

Still master of your domain

An alternative to speed reading

Full Themify Master Club: 47+ WP Themes, Plugins & Addons

Source
Free download: Lucid one page PSD template

Posted:Fri, 27 Feb 2015 13:15:51 +0000

This stunning free PSD provides a framework for all your client’s essential information, lovingly crafted, into a simple to modify format.

Designed by Lucid Site Designs, the popular one-page design is a great fit for almost any purpose, and includes a header, features, product details, pricing, and contact sections. Perfect for technology services, IT hardware, or SaaS, the bold monochrome design is an outstanding stylish choice for any number of professional jobs.

All layers in the PSD are clearly named, so you’ll be up and running with it in no time. Simple to customize it’s built on a 12 column grid. This exclusive download would work beautifully with a Bootstrap or Foundation build. It even comes with three alternative headers: standard, contact form, and a subscription form.

Download link beneath the previews:

Pay with a Tweet

Download now

Please enter your email address below and click the download button. The download link will be sent to you by email, or if you have already subscribed, the download will begin immediately.

I agree to receive weekly newsletters from WebdesignerDepot.com. Unsubscribe at any time. Your email will not be sold/rented (unsubscribe at any time).

Full Themify Master Club: 47+ WP Themes, Plugins & Addons

Source
4 reasons web designers should be playing more video games

Posted:Thu, 26 Feb 2015 08:15:48 +0000
No really, you should. If anyone asks why you’re up at 3am playing your favorite shooter-MMO-hybrid, you can point them right to this article and say, “See? See!?” We should all be playing multi-player and co-op games because, like it or not, our business isn’t only about websites. It’s also about people.

Others have written about using gamification in design. Some have written about things we can learn from the successful (and sometimes horrible) UIs we find in games. I’d like to talk about what we can learn about ourselves, other people, and human behavior in general by playing multi-player and co-op games.

This could be especially useful for those who are rather introverted like me. Face-to-face social situations can quickly become exhausting, but the only way to get better at them is to practice. Well, why not practice from the relative safety of your own home?

Lesson 1: We’re all on the same side (well, except for those other guys)

When someone hires you to design a website, or when you get together to make one with other people for non-client work, you’re forming a team. In client work, that team must include the client.

we all have a common goal: to kill the other team

In the heat of a verbal argument over the best way to do things, it can be easy to forget that. This is especially true if the person you’re arguing with is demonstrably ignorant of the mechanics of the game, or the principles/process of good design. It’s easy to see them as an obstacle to progress.

They are not the obstacle. Their ignorance, fear, or whatever emotion is holding up communication, that is the obstacle. In a game, it’s good to remind ourselves, and each other, that we all have a common goal: to kill the other team. In your work, you may have to remind a worried client that you want their website to succeed as much as they do. You’re invested in this.

Neither of you is the enemy.

Lesson 2: Newbs are to be loved; n00bs are to be squelched

Some people are not kind to new players (“newbs”). This is self-defeating, because if you drive people away from the game you love, that game loses business. All new players must be treated with love, care, and respect. They’re spending time and possibly money on this game that you love; and that’s something we can all get behind.

“N00bs” are those players who absolutely refuse to learn, despite sometimes having played for years. They don’t take any advice, won’t stop giving bad advice, and sometimes engage in disruptive and jerk-ish behavior. There is often nothing that can be done for these people.

In our work, it’s easy to forget that not everyone’s taken a computer science course in school. Some people only learn enough about their own computer to check their e-mail, and that’s it. Others might have experience with touch devices or game consoles only. Patience isn’t just a virtue in these situations. It’s essential.

Some people, however, just can’t be helped, whether they be your client or team-mate. You need to get away from these n00bs before you start to mistrust everyone. Seriously. If you’re not careful, you’ll get burned, and it can be next to impossible for others to earn your trust in the future. Should that happen, you’ll find yourself working alone more often than not.

Working alone is great, but not always and forever.

Lesson 3: People remember how you made them feel

When I see a familiar name in my team or questing party, one of two things will happen:
1. I will be happy because I remember liking them.
2. I will be unhappy, because I remember vague unpleasant feelings.
More often than not, I can’t remember exactly what happened, or even whose fault it was. Most of us, sometimes unconsciously, attempt to forget the details of things that felt bad. That’s normal and natural. What we won’t forget, are the raw emotions.

If you have to squelch (permanently mute) another player, do it quietly, and without fanfare

In your gaming, and in your work, always try to at least part on friendly terms. You can’t exactly control how other people feel about you. There are so many potential factors involved that it’s not even funny. But you can address issues directly, and as calmly as possible.

If you have to express your frustration in less-than-polite terms, mute the microphone, make an “UUURRRGGGGHHHH” sound, and then continue. Don’t do it in front of them. If you have to squelch (permanently mute) another player, do it quietly, and without fanfare.

In business, you may never have to work with that person again, but they may refer you to others. They might have driven you insane, but you probably shouldn’t tell them that, unless you know they have skin thick enough to take that kind of honesty. They won’t tell others how good your work was if you made them feel like crap and they resent you for it.

Lesson 4: Be clear, be specific

When playing a fast-paced game, a lot of communicating has to be done on the fly. Sometimes this happens via voice chat, where you have your words and tone, but no facial expressions, to convey meaning. Sometimes you are limited to text.

Until you’ve played (or worked) with someone long enough, and you’ve both adopted the use of the same slang or shorthand, you have to make the extra effort to be perfectly clear. There’s no shortcut. There’s no easy way to do this. It’s all trial and error.

Each player, client, or team member is different. Their lives have been different. Their skills are different. Sometimes, common English words will come with a different meaning or connotation to them. You cannot assume that what worked with one individual will necessarily work with the next.

Conclusion

Play games and meet people. There’s more to learn than what I’ve covered here, and you’ll have to learn a lot of it for yourself. But the key take-home is that being part of a successful team is about practicing and honing the skills that make you an effective collaborator.

So go kill something, and don’t forget to eat and sleep!

Featured image, Homefront – UK Multiplayer Event image via THQ Insider

Full Themify Master Club: 47+ WP Themes, Plugins & Addons

Source
How to beat your designer’s block

Posted:Wed, 25 Feb 2015 08:15:59 +0000
I’m pretty sure I haven’t blinked in a while. I think this because my eyes are dry and so is my mouth. My face is tense and my chest feels tight. I’m noticing that my breathing has become shallow and I’ve got a weak feeling in my gut. Suddenly, I notice the doubt rising from the pit of my stomach.

The woman has heard that I make websites. I confirmed. But what she didn’t know was that I still felt like I was getting away with something and that someday soon, everyone would figure me out. As I become more aware of the sea of white on the screen, I can’t help but think that maybe this is the moment where I come out empty handed. Nervous foot tapping accompanies the urge bubbling within to open the window, pick up the monitor and then throw said monitor out the window.

“That’s cute. You added ribbons to distract from the trash!” “You have no idea what the hell you’re doing right now, do you?” “Really? That’s what you’re going with?” This is what designer’s block (DB) feels like for me. If I snap out of it and am able get outside my head, I find the internal dialog comical. On a good day, it’s an annoyance; but on a bad day, it’s utterly debilitating.

As design professionals, learning to manage designer’s block is essential to staying fulfilled in our careers

As design professionals, learning to manage designer’s block is essential to staying fulfilled in our careers and getting the good stuff that’s lurking inside of us out. I’ve realized that this resistance comes with the creative territory and it’s not something I can totally eliminate. So what is a designer with a deadline to do?

Random tactics for plowing through DB are usually some variation of, “Step away from the work!” and “Go for a walk!”, or “Look at magazines!” These tactics of avoidance and faith never seemed to consistently work for me. What if I was fighting against a deadline? I could never rely on complete faith that a surge of creative genius would strike while I was making eggs. Has it happened? Yes, it actually has; but not consistently enough for me to feel confident that someday these tactics won’t desert me. On the flip side, I’ve also thought, “Maybe if I just tried harder, I’d be able to get through this…” which was equally ineffective. So I’ve found that was does work is to create a system that saves me from myself.

It’s my hope that following the three steps below could help you develop your own system for working through resistance:
1. Identify when it happens;
2. understand why it happens;
3. develop a system — a collection of habits and frameworks — for managing it.
In the following paragraphs, I’ll be outlining how I worked through these steps to create my own system that works for me.

Identify when it happens (triggers)

After having plowed through many rounds of designer’s block, I noticed a clear pattern. Every time a project that was outside of my comfort zone came across my desk, I would feel the anxiety rising. All of the psychosomatic reactions I outlined above would subsequently emerge. Inevitably, it would lead to an extended period of “I’ve got nothin’.”

But the upside was that I found that my trigger was laughably predictable and within my realm of control. I found that the height of my anxiety always came at the beginning of a project and was most pronounced when I considered it out of my comfort zone. It was a funny pattern; after an initial conversation with a client, I would genuinely feel eager and enthusiastic. Unfortunately soon after, when it was time to shut up and start the work, I would hit a wall. This lapse in creativity could range from minutes to days.

My trigger: the beginning of projects I consider to be out of my comfort zone.

Understanding why it happens

Recognizing when DB would rear its ugly head isn’t enough to fully understand the nature of the beast. The next step is to dig deeper to understand why it happens.

One of the most common and pervasive afflictions that creative professionals experience today is fear

Why this was a trigger: as a perfectionist, I’ve realized that I tend to be overly critical of myself. So when a challenging project comes along, my initial excitement gets replaced by the fear that I’d be judged or “found out” as a fraud. This was deeply rooted in my need for perpetual perfection (which is hardly realistic or practical).

As it turns out, I’m not alone. One of the most common and pervasive afflictions that creative professionals experience today is fear. David Kelley, founder and chairman of IDEO, categorizes these fears as fears of the messy unknown, fear of being judged, fear of the first step, and fear of losing control.

By tracking these events back to an original feeling, I was able to find the root cause of the block and build an arsenal of habits and frameworks to manage it.

My system for managing designer’s block

Identifying the triggers and understanding why they caused designer’s block allowed me to create a system that seems to short-circuit the lesser side of my brain. It didn’t mean that these feelings of fear totally went away. However, it did allow for me to develop a way of thinking that ignited actions, which ultimately gave me the legs to work through any fear with courage and confidence.

Here’s my system:
1. set constraints;
2. change my physical state;
3. mindlessly run through a pre-established routine.
Set constraints

I’m hardly alone when it comes to being susceptible to the temptations of the internet and my physical surroundings. So when I’m priming myself to work, I’ve learned that setting constraints drastically minimizes any risk of giving into the resistance.

My constraints are:
1. Setting up a specific account on my computer using the parental controls feature that blocks all social media and distraction-friendly apps. Apps like Freedom and RescueTime also work well for blocking the internet and are available for Mac, Windows and Android.
2. Working specifically in the office in my apartment where there is no TV or food.
3. Turning off my phone and putting it in another room.
4. Time-boxing the work. I’ve been using the Pomodoro technique where I work 25 minutes and take a break for 5 minutes. I use Alinof Timer on my Mac as an alarm. I don’t use my phone since I’d be tempted to check out notifications each time the alarm went off.
Turns out, Maya Angelou uses constraints, too. She’s been known to reserve a hotel room where she consistently retreats for the sole purpose of writing.

Change your state

DB has a way of manifesting itself physically. For me, I’m like a deer in headlights and my hands get clammy. Taking on the posture of someone who was confident and in control was a super easy way to adjust my mental state.

…simply holding one’s body in expansive, “high-power” poses for as little as two minutes stimulates higher levels of testosterone (the hormone linked to power and dominance in the animal and human worlds) and lower levels of cortisol…In addition to causing the desired hormonal shift, the power poses led to increased feelings of power and a greater tolerance for risk.

– The science behind why this works outlined in the TED talk by social psychologist, Amy Cuddy

Mindlessly run through a routine

My routine is comprised of two parts that go hand-in-hand: Physical habits and mental frameworks.

Physical habits

Habit 1: write before you design.

Start with what you know and work your way through a series of questions that will expand on that knowledge. Before I design, I write. I write down the things I know that the client’s already told me, and I list down questions when I’ve hit a dead end and need more answers. Then I go and ask them. I also write lists of adjectives that describe the brand and how I want it to be perceived through the design, so it’s there and available for me to reference when I’m ready. I find it appropriate sometimes to create a mind map.

Fellow designers have written about this here, and here.

Habit 2: thumbnail lots of options without judgment. (I like to tell myself, “the crappier, the better” to get myself in a judgment-free mode of operation.)

By allowing myself the time to explore the breadth and depth of a project, I was able to generate multiple ideas without the distraction of the tools available in software

Back in college, I had an Illustration professor that always assigned thumbnailing as part of the process for each project. Without fail, every project started with at least 50 thumbnails and each thumbnail represented a different idea. It was quantity over quality at this stage. Even though it was painful for me to do it at the time, he argued that this was an effective way of clearing out the bad and/or obvious ideas to get to the best ideas that were inside all of us. This also developed the habit of not getting too married to any one idea, which taught us adaptability. What he didn’t mention, was that this was also really effective at defeating designer’s block. I didn’t remember to integrate this habit in my professional life until I was sick of living in the funk of designer’s block. I have a newfound appreciation for it now.

Additionally, insecure and less experienced Christine would jump into Photoshop thinking that by working on the deliverables right away, I would come up with a solution faster. The opposite was actually true. By allowing myself the time to explore the breadth and depth of a project, I was able to generate multiple ideas without the distraction of the tools available in software.

Habit 3: talk to other people about the problem (designers and non-designers).

Explaining the design problem and talking about possible ideas has helped me immensely with getting hidden ideas out. I’ve surprised myself by uncovering insights and additional gaps in understanding when I’ve forced myself to articulate the problem to someone else. There’s also the added bonus of alleviating any loneliness I might’ve been experiencing after locking myself in the office and churning (as outlined in the habits above).

Mental frameworks

Mental frameworks are an important part of your arsenal, too. Some days, the creative flow seems to be effortless while on others, you’ll find yourself experiencing multiple false starts. The key here is not to allow yourself to ask stupid rhetorical questions, e.g. “Why do you suck so bad?”

For me, the following frameworks I use are:
1. “If I was an expert, what would I do? By asking this question, I was able to think of the next step instead of staring at a blank page or screen;
2. “If there was no possibility of failure, what would I do?” This allows me take more risks in my work.
To feel fulfilled in any career, it’s important to dance around the perceived limits of your ability. It’s why we have no choice but to drag ourselves through the outer boundaries of our comfort zone. But to say so is much more difficult than doing so. This is why creating a system helps. It’s a crutch that occupies our lesser minds and generates momentum for our more enlightened selves. Executing on a prior planned system creates the conditions to do work you’re proud of.

You may have noticed a lot of my tips above are action-oriented and aimed at attacking the problem directly. I’ll leave you with a quote by Chuck Close that sums up this article nicely:

Inspiration is for amateurs; the rest of us just show up and get to work.

Featured image, obstacle image via Shutterstock.

Full Themify Master Club: 47+ WP Themes, Plugins & Addons

Source
New York Times Magazine redesigns for the Web

Posted:Tue, 24 Feb 2015 13:50:40 +0000
One of the most renowned magazines in the world, The New York Times Magazine, has undergone a redesign with two key aims: to carve out a distinct identity, and to embrace the current digital climate.

When a publication with this lengthy a history — it’s been in print for 119 years, its print version is inserted into the Sunday edition of the New York Times as a supplement, and currently boasts a circulation of more than 1.5 million copies per week — goes through a redesign, much care and thought has to be invested to ensure that its readers aren’t upset.

Branding for the Web

The new look of the publication primarily centered on three, crucial areas:
- its logo;
- its suite of fonts;
- its abbreviated social media logo.
All told, the changes have worked well together to give the magazine a facelift that’s more in tune with the demands of the Web, but doesn’t make longtime readers feel like they’re reading something alien.

Revised logo

Readers will be taken by the most notable of all three changes, which is the update to the magazine’s logo. Whereas the old logo had letters that were spaced together very tightly — and, as a result, was harder to read — the new logo design features more generous tracking. This greatly increases legibility on the Web.

According to an editorial by editor Jake Silverstein that takes readers behind the scenes of the revamping, “…the new logo is more modern, more graciously spaced.” Credit for this logo update goes to typographer Matthew Carter.

New typefaces

The changes to typeface didn’t stop at the logo of the magazine. The publication has also introduced a whole new suite of original fonts. The typefaces were the creation of Henrik Kubel from A2-Type. The magazine got rid of their entire slew of old fonts to make room for this sweeping design change.

As you can see, the new collection of fonts boasts slab serifs a more modern sans serif face and pleasing serifs.

According to the same editorial by Silverstein, “Not a single letter in this relaunch issue has ever seen the light of day. They are infants. Treat them gently.” Interestingly, none of the new fonts has even been named yet. The inside joke at the magazine is that they were close to christening their new typeface “really crappy font” to prevent another outfit from ever using it, should the magazine somehow let its exclusivity get compromised.

All jokes aside, though, the reason behind the new direction in typeface is a practical one: The editor wanted to ensure that The New York Times Magazine had a more literary feel — that makes sense when you consider how the magazine is substantially different from its sister newspaper.

Unlike the paper, whose stock in trade is shorter, more journalistic articles that focus on reporting and features, the magazine’s aim has always been to publish “work with more writerly ambition than you usually see in newspapers.” By using this new collection of fonts for this publication, Silverstein is able to make readers distinguish between it and coverage found in The New York Times’ online editions. Surprisingly, Silverstein admits that, up to this point, many of the magazine’s readers had a hard time understanding that they were reading content separate from The New York Times’ articles.

Redesigning for the Web

That brings us to the next goal that the editor wanted to accomplish in this redesign: making the magazine more friendly to readers on the Web, one thing that the magazine struggled to successfully pull off…until now, they hope.

an increasing number of Times’ readers have switched to digital-only

Traditionally, The New York Times Magazine, for all its longevity, has only always been a so-called “in-betweener.” It was both trapped in the middle of the Times’ bulky Sunday print edition, as well as being a “long-form subsite” on the Times’ website. Because an increasing number of Times’ readers have switched to digital-only, Silverstein wanted to build up the magazine’s branding on the Internet, through its web edition. That’s where having a new family of custom typeface will prove so instrumental.

Shorter social media logo

As part of this new strategy to build up the web presence of the publication, it’s no surprise that Silverstein also focused on social media in the redesign, particularly the magazine’s social media logo.

Such a condensed version of the magazine’s logo is perfect for more casual settings like its Twitter page. Whereas the longer, redesigned logo with the more generous tracking would be overwhelming for a smaller profile photo, the condensed version is nicely truncated for a social media audience that’s looking for brevity.

Cleaner page layout

Now, a part of the redesign of the magazine also goes beyond just the typography. In keeping up with the design trends of minimalism in the last, few years, Silverstein also decided to introduce a much cleaner layout to the magazine’s pages.

Sporting a more stripped-down look, the publication’s pages now feature fewer columns than in the past. Currently, readers will only see seven columns, but past editions featured as many as 12. The redesign team decided that having 12 columns on a page made the magazine appear too congested and excessively symmetrical. By reducing the number of columns, each page can now “breathe,” which is vital to providing the design with a cleaner appearance.

trying to make itself more friendly to Web readers, the magazine is striving to reflect the environment around it

For a publication that’s been around for more than a century—and with no signs of slowing down—The New York Times Magazine sure hasn’t been resistant to change, to its credit. Its last redesign was almost four years ago, and the editor’s decision for another redesign so soon after is a sign of the publication’s commitment to keeping up with the times (no pun intended).

The mission of the redesign was to make the magazine stand out and emerge from the shadow of its more well-known parent, The New York Times. By constantly evolving in its design approach, The New York Times Magazine ensures that it still stays relevant to readers, even 119 years after first being published. By updating its look to simpler and cleaner minimalism while also trying to make itself more friendly to Web readers, the magazine is striving to reflect the environment around it.

Full Themify Master Club: 47+ WP Themes, Plugins & Addons

Source
The best free UI kits, February 2015

Posted:Mon, 23 Feb 2015 08:15:17 +0000

Designers love UI Kits. They’re a great way to explore ideas, and they’re a great palette cleanser after a difficult project. Another reason to love them is that they give us incredible insights into the minds of other designers, without a client complicating things. As such they’re a great way to spot trends as they develop.

Today we’ve gathered together some of the very best UI Kits from the last month, together with some slightly older kits that plug a few gaps. All of these UI kits are free to download and you’ll find resources for Photoshop, Illustrator, and Sketch, amongst others.

UI Kits are an especially good jumping off point for our own projects, so let’s jump in!

Oh no, not another UI Kit

A great flat UI kit with tons of elements, “Oh no, not another UI Kit” features simple line icons, straitforward layout and a cheeky sense of humor.

Flat UI Kit

A flat UI kit based on Twitter Bootstrap. Supplied in PSD format.

Retina UI web kit

A retina ready UI kit in which dark elements combine with Material Design colors for a powerful effect.

MixKit

A comprehensive UI kit with tons of pop culture colors.

Hero UI

Don’t be fooled by the name, this pseudo-flat UI kit is suitable for any number of projects, although it certainly gives off a comic book vibe.

Yosemite UI Kit

Designed exclusively for Sketch 3 this UI kit is perfect for mocking up Mac app screens.

L Bootstrap

This kit features over two dozen different PSDs, in the Android Lollipop style.

Basiliq

This unique UI kit is designed for prototyping, but will also give your finished designs a lovely hand-drawn feel.

Publica UI Kit

Publica is a comprehensive set of block-style UI elements ideally suited to responsive design.

Mini UI Kit

Designed for Sketch 3, the dark tones in this UI kit add an extra feel of sophistication.

Clino UI Kit

Clino UI Kit is a simple set of UI elements in PSD format, that will suit most modern design projects.

Quadruple Ferial

This UI kit is a perfect blend of minimalism and Google Material Design. It’s ideal for mobile projects.

Clean White

This sophisticated and sexy UI kit has more than 55 separate elements and is perfect for all manner of high-end design projects.

Eventray

Eventray is an amazing, comprehensive UI kit that beautifully executes Flat Design.

Number One UI Kit

This sports-based UI kit includes some great specialist UI elements like league tables, and individual sports icons.

Free Minimal UI Kit

This UI kit is based on the Twitter Bootstrap framework and is fully responsive.

Gumballz Web UI Kit

Gumballz Web UI Kit is a quirky, original take on the standard UI kit. Clean minimal design meets beach house colors.

Winter UI Kit

This UI kit has over 50 elements and icons, all supplied as scaleable vectors in PSD format.

eShop UI Kit

eShop UI Kit is a vibrant set of UI elements aimed squarely at ecommerce designers.

Free Combination UI Kit

With bold colors and simple Material Design inspired shapes, this UI kit is perfect for modern dashboard designs.

Free Android UI Kit

Free Android UI Kit gives you 8 sets of related elements for designing mobile apps.

Clean & Light Gradient UI Kit

This light dashboard UI kit features line icons and subtle gradients.

Personal Dashboard UI Kit

A bold and confident dashboard UI.

FooKit Web Footer PSD Kit

This UI kit is aimed at website footers. It includes social media links, site navigation, and more.

Boring Cards

Boring cards is a card based UI kit all designed around the golden ratio.

iPhone 6 UI Kit

The iPhone 6 UI Kit is designed for the latest version of Apple’s smartphone, but it works just as well for Android and Windows.

Full Themify Master Club: 47+ WP Themes, Plugins & Addons

Source
Our favorite tweets of the week: February 16, 2015 – February 22, 2015

Posted:Sun, 22 Feb 2015 09:04:53 +0000

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

Why Samsung Design Stinks http://bit.ly/17ehqR5 /@FastCoDesign

Faris and Rosie‘s highly unlikely but very fun 2015 predictions http://bit.ly/1An5qqN

Bringing Windows 10 Modern UI and Desktop together; this concept nails it http://bit.ly/17xNeQJ /@neowinfeed

Femme Force: The New Female Avengers http://bit.ly/1EbOer6 via @DeviantArt

Big in Japan: Web Design in the Land of the Rising Sun http://bit.ly/19ArYvs via @tutsplus

“Freelance workers available at a moment’s notice will reshape the nature of companies & the structure of careers” http://econ.st/1y4UrmY

Happy Chinese New Year 2015 http://bit.ly/1Dyiw8r http://ow.ly/i/8Ifus

Photoshop turns 25 years old today! http://www.photoshop.com

7 Awesome Open Source Cloud Storage Software For Your Privacy and Security http://bit.ly/1yfKtON

For your inspiration:@_LukeLucas‘ fonts http://bit.ly/1yZMZEx

What is Branding? http://bit.ly/1zFZGb8

Oscar Pop! The 2015 Best Picture nominees in pop art poster style http://shutr.bz/1G5kcUV

.@elliotjaystocks‘ thoughts on paying your contributors http://bit.ly/1Ld1KLd

Career Spotlight: What I Do as a LEGO Model Designer http://bit.ly/1zmGkp4 via @lifehacker

Not busy, focused http://bit.ly/VjtA5Y /@TheMinimalists

Gotham Masquerade: Beautiful illustrations by Cristina Stefan http://on.be.net/17oAQCD

Some cool stuff here RT @abduzeedo: Daily Inspiration #2002 http://bit.ly/1vfanTm

The Joel Test Updated For Programmers http://bit.ly/1yRNkt8

Nice brand identity by Sean Rees http://bit.ly/17Qqc8M

Infographic: #WordPress 4.1 gets roughly 1 million downloads every 2 days + other mesmerizing stats http://bit.ly/1Dwzum3

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

Full Themify Master Club: 47+ WP Themes, Plugins & Addons

Source