Thursday, November 30, 2017

Published 2:01 PM by with 0 comment

10 Ways for Designers to Woo Developers

Hey designers, are you driving your developer peers crazy?
Chances are that you have some habits that don’t translate particularly well to code, and it is making life tough for the developer working with you on projects. Want to be a better coworker (and friend)?
Learn how to better communicate and design so that developers will love you. It will speed up projects and make work life easier. And it’s not a matter of bringing candy to meetings either. You can make developers love you by making slight changes to the way you work.


The biggest problem between designers and developers is that they often work in bubbles. The individuals or teams don’t start talking about a project until the first draft of the design is finished. Then there’s a handoff from the designer to the developer.
That’s just not the way to work. Designers and developers should be involved together from the beginning to talk about how a project will come together. While the designer might focus on color and typefaces and imagery, the developer can provide insight into usability, function and performance.
Designers and developers should have a good idea of what the other side looks like. Designers should understand enough code and usability to speak with developers and understand challenges; developers should have a little knowledge of design theory so they can make suggestions when design ideas aren’t right for the web.


One of the biggest things a designer can do is prep and package files in the same way every time.
How many times have you opened a Photoshop document with hundreds of unnamed layers? Don’t give this type of file to a developer. Every layer and style—regardless of what software you use—should be named appropriately.
How many times have you opened a Photoshop document with hundreds of unnamed layers?
Styles, color swatches and typography should be consistent throughout the design. (A button shouldn’t look different from page to page.)
Name files and styles in the same way for each project. Group like elements in a similar manner and use a consistent folder system. That way the developer doesn’t have to relearn how to find parts and elements with each new project.


One of the biggest challenges for design projects that include print and digital pieces is typography management. Don’t use desktop fonts for print projects for web or app designs and just assume they will work. (Often they don’t.)
For digital projects, opt for Google Fonts for typography. This means you might have to find a similar typeface for the web to match what you are using for print. (That’s OK.)
Don’t make the developer do this for you. Pick out the comparable Google Fonts and use them from the start. You can even note print versus digital typefaces in your style guide.
The reason behind this is simple: Embedding fonts can get a little tricky. Plus, Google Fonts are free and will ensure that you don’t incur additional project costs. (While you are at it, consider doing the same thing with icons and use a package such as Font Awesome, which allows the developer to style icons using CSS, not import a bunch of image files!)


While we are on the topic of image assets, exporting and packaging files properly is super important. While a developer can open and export all image files to meet their needs, you could ask what they need and do it along the way.
This ensures you get the crops you want on images, while compressing files to help your website load quickly.
Don’t try to do this on your own. Ask the developer how files should be saved, named and compressed for best use.


There are just so many device sizes and aspect ratios to think about when designing websites and mobile apps. As a designer, you need to know the canvas size, margins, padding, etc. to create a mockup that’s actually usable.
Talk to the developer before you start drawing to ensure that you know what the design environment looks like before you start. There’s nothing worse than a design that looks amazing in Photoshop or Sketch and falls flat in production.
You need to know these things in advance:
  • If the framework has specific padding specs at different sizes
  • The gutter width between columns (and if it varies)
  • The size of the most narrow screen size the developer will code


It’s been mentioned a few times already, but communication between the designer and developer really is the key to making all this work. Communication can make or break projects, impact deadlines and influence the end project design and functionality.
Communication can make or break projects
Take your developer to lunch. Get to know them. Ask plenty of questions along the way. If you aren’t sure whether something will work or not, just ask. Developers aren’t scary people and it’s a lot easier to answer a question early in the process than have to rethink and entire concept.


While you are talking with the developer and asking questions, dive deeper. Learn some development basics if you don’t already have these skills in your design arsenal.
Designers working on digital projects should verse themselves in:
  • HTML and CSS (you should be able to change a font size or color and understand how the two are different)
  • Common user patterns (design for the way users will interact with content)
  • Accessibility standards (so your design will work for more users)
  • What types of elements need to be served as images and what can be created using pure CSS
  • How breakpoints work in responsive layouts
  • Trends in website design
You may never actually write code, but learning development principles will make you a better designer because you will understand the value of the tools and workflows.


The design process extends to development as well. Designers, you need to recognize that the developer is just as vital to the design process as you are.
With that in mind, create a “living” style guide that not only includes color and fonts but components as well. Everyone should be able to access and update the document as the project comes to life.
A good style guide will help everyone working on a project maintain consistency with visual elements, provide context for design choices, serve as a point of collaboration for the project and help standardize code. The living style guide allows everyone to share ideas and provide guidance throughout a project. It’s not just a document that someone creates right before a design goes live.
Put the following information in the style guide to make the most of it:
  • Logo styles
  • Color palette
  • Font palette
  • Icon palette
  • Navigation menu elements (and there they link to)
  • Layout options for different pages
  • Code snippets that get reused throughout the site (such as buttons)


Respect the grid. In responsive website design, the grid is more than just a guideline for placement of elements on the screen, it can also dictate where elements go at different screen sizes and how columns stack and shuffle.
The grid can help you design and maintain flow. (The challenge is that you can’t arbitrarily break design rules.)
Think about it like this: Your design has four content blocks lined up across the screen in a row (with equal gutter widths) on a full-screen desktop monitor. Then on a tablet, those blocks shift to form two columns, with two rows. On a mobile device they shift to form a single column with four rows.
Understanding how the grid impacts the size of objects and how objects will shift on different devices is important because it can dictate how you design for the content you have. Think about that same scenario again. What if you had five content blocks? It would require a redesign to ensure that you create a consistent visual outline.


The real key to ensuring projects come together with ease is to be flexible. Design techniques and standards for the web change all the time. Whereas some projects do allow you to be a stickler for details and unmoving, responsive design doesn’t really work that way.
The golden rule when it comes to working with developers is…don’t be a jerk.
Designers that are easy to work with will earn more respect and have better relationships with developers. This will lead to better and more successful projects. It should go without saying, but too often there’s a lot of jerk-ish behavior out there. Don’t fall into that trap.
Be flexible, open and talk things out with your developer. They will love you for it.
By Jake  Carrie Cousins - Orginal Post:
Read More
Published 1:59 PM by with 0 comment

12 Best Web Design Podcasts

The best way to keep up with industry news is through podcasts. So much happens on a monthly basis and keeping a list of the best podcasts can help you stay on top of major industry changes.
We’ve curated some of our top picks here with a nice variety of topics. These podcasts offer a mix between frontend web development topics along with more UI/UX design topics for visual designers.


If you’re big into development then you’ll want to bookmark Developer Tea. Episodes can vary in length from 15-20 minutes up to an hour but the content is always superb.
New episodes come out every couple days so it’s one of the most up-to-date podcasts you’ll find. Developer Tea follows ideas in web development beyond just coding such as web optimization and security.
But even newbie developers can find a lot of great tips in here with advice for coding bootcamps and handy learning resources. Well worth checking out especially due to the volume of content.


The world of frontend development is always expanding with new libraries and hot new tools. Front End Happy Hour is a weekly podcast updating listeners on the happenings in the web dev world.
Anyone who builds websites should really study frontend development first. It’s the gateway to building great websites and it’s much simpler than backend development which has so many different languages to pick from.
And if you’re just getting into frontend dev work then Front End Happy Hour is sure to entertain.
This podcast is very laid-back so it feels like a friendly conversation rather than business talk. Certainly a more appealing style for devs who enjoy ramblings and opinions along with dev convos.


The ShopTalk Show is a wildly popular podcast hosted by web legends Dave Rupert and Chris Coyier. It’s also a weekly podcast with some really interesting topics that delve pretty deep into modern techniques.
Chris actually founded the well-known CSS Tricks website and he also helped create the online IDE CodePen. You’re in good hands with these two hosts as they wax on about browser quirks, new W3C changes, and the future of the web.
I recommend this for pretty much anyone who runs or manages websites.
It does have a technical barrier to entry so if you aren’t a developer many of these episodes will go right over your head. But the topics are super insightful so you’re bound to learn something along the way.


Corporate brands and company websites all need style guides. These are essential for keeping the same look and feel over many pages and building a consistent design across many mediums (ads, landing pages, mobile apps).
The Style Guides Podcast is actually hosted on the awesome website. This site curates a bunch of style guides along with design assets, tips, tutorials, and books covering the process of designing great style guides.
Naturally the podcast is just one more amazing resource for anyone who wants to learn about this process.
Currently in season 2 this podcast offers close to 20 episodes (and counting) with a bunch of talented designers. It’s a niche resource but incredibly valuable for anyone studying style guide design work.


Here’s another niche podcast focusing on responsive web design and how it’s changing each year.
If you do any frontend dev work I highly recommend the Responsive Web Design Podcast. It’s hosted by two industry pros Karen McGrane and Ethan Marcotte, both of whom have extensive knowledge in this area.
Ethan literally wrote the book on responsive web design so you know this is a podcast you can trust. Some episodes talk about trends in the industry, others bring on guests like this episode with the Salesforce team.
Either way this is the de-facto resource for RWD and modern web design in general. It’s great for designers but especially valuable for developers.


Looking to get into the web dev scene but unsure of where to start? There are tons of free resources to help you learn but it also helps listening to others’ paths breaking into this space.
CodeNewbie is a podcast dedicated to interviewing coders and talking about their journey into the field. It updates roughly once a week with interviews from programmers, frontend developers, and other tech-oriented folks who’ve made coding a career.
Some episodes offer more advice for beginners while others talk about specific subjects like website load time and web accessibility. Each episode is a goldmine for newbies just getting into web development.


Val Head and Cennydd Bowles host the fast-growing web UX animation podcast Motion And Meaning.
Both Val and Cennydd have a long track record of incredible design work and they’re experts on the topics of animation, microinteractions, and how these tie into the user experience.
Each episode usually has a special guest who joins to discuss a specific topic in detail. This topic can be general motion graphics or specific techniques like mobile UX prototyping.
If you have any interest in motion design or animation for the web then you’ll find a lot of value in this podcast.


For something a little more general check out the CTRL+Click Cast. Lea Alcantara and Emily Lewis host each episode with special guests and tips for everything web-related.
Most episodes follow trends in web development with topics on workflow tools like npm and tech stacks. But you can find plenty of episodes on more general web concepts like the mobile web and more design-oriented trends.
This podcast dates back to 2009 so it’s been online for almost a decade. It’s gotta be one of the oldest web-related podcasts and each new episodes delivers even more value.


Let’s Make Mistakes is a general design podcast covering ideas beyond just the web. Although it does focus a lot on web design it’s also a podcast for anyone who loves digital design work.
This is another very casual show and it’s not 100% business all the time. You’ll certainly learn a lot but it’s also a podcast for listening to personalities and soaking up design culture.
Totally worth checking out if you’re into digital design or looking to get into it.


The Non Breaking Space Show brings on a new guest every week related to web design.
It’s been running since 2012 so there’s a long list of episodes to go through. But since the web advances so fast it’s best to stick with episodes from the past 1-2 years (unless you find a guest you love!)
Most topics revolve around web development which can include SVG work, accessibility, APIs, and JavaScript advancements. If you’re into coding then you’ll dig these incredible guests but this may not be as useful to non-techie listeners.


On the flip side Design Life is very much a designer’s podcast. It’s hosted by two digital designers Charli Marie and Femke who share their thoughts on design industry news, landing jobs, creating portfolios and other related tips.
This is a true design podcast so it’s absolutely stellar for anyone who loves the design side of things.
New episodes come out on a weekly basis and they date back to 2016 so there’s a sizable archive to go through.


JavaScript Jabber is the best resource for picking up tips on JS coding and related libraries.
Each episode brings on a new guest and topics range from Node to Vue.js and even lesser-known JS APIs.
In case you couldn’t tell by the title, this is pretty much 100% JavaScript focused. You should already have experience with JavaScript before listening to these episodes or you’ll wind up lost and confused.
But for developers who can’t get enough JS highlights the JavaScript Jabber podcast is always a great listen. They even have a suggestion page if you wanna toss out topic ideas for future episodes.
By Jake   Jake Rocheleau  - Orginal Post:
Read More