Creative and Collaborative Web Design

Changes in the Creative Process

In today’s arena, ideas are no longer communicated strictly visually, but interactively. Responsive Design has changed the game: Web designs are no longer static, but need to provide different layouts to devices based on the size of the browser window.

Understand limitations, and small things designers can do to make the hand-off to the developer a smooth transition. Designers are ensuring their designs translate better into a web-based medium with a basic understanding of programming languages.

The Creative Process and the Developer

It’s imperative that graphic designers and developers collaborate. Too often a designer has a vision…promises the client…and runs into a wall when they take it to the developer. Below are the 5 steps to the creative process, and where the developer fits.

dev-infographic

Identify

  1. Understand the project, research, prepare and brainstorm. Investigate your audience, and how to achieve a visual solution to the problem. What is the purpose of the website? Ask relevant, targeted questions of the client and understand their motivations. Where the Developer fits in: The developer should attend initial client meetings to ensure form follows function. Find out clients needs both immediate and long term. A simple portfolio site could eventually end up as an ecommerce stock photo site. Allow the developer to have input on technological possibilities and limitations.
  2. Saturation
    Synthesize ideas using imagination. Conceptualizing themes and examine possible angles and directions. Begin to more clearly visualize an idea that captivates. Where the Developer fits in: This step is largely creative, but the developer should be kept in the loop. If the designer comes up with an idea that involves interactivity, or a shift in the user experience it’s best to run it by the developer to ensure feasibility.
  3. Incubation
    Let your ideas mature. Evaluate your idea and make sure all pieces of the puzzle really fit together. Revisit the original goals of the client and switch gears accordingly. Does it make sense? Is it fulfilling the goals in the Identify phase? Where the Developer fits in: Collaborate with the developer to ensure everyone is on the same page. Both designer and developer talk about how the ideas relate to the user experience, and how those ideas will be realized on the development side.
  4. Conceptualization
    After mulling over several ideas, you’re ready to start compiling your ideas. Look for ways to be inspired, and filter out concepts that don’t fit. Make sure both form and function are given equal balance. Where the Developer fits in: Collaboration ramps up between designer and developer. A developer typically thinks about how a page is going to work, not how visually pleasing it is. Designers need to be present so both needs are met. Manage expectations by strong communication.
  5. Execution
    Turn your ideas into the final product. Follow continuity and consistency throughout the process. The developer now takes over a large part of the process. Where the Developer fits in: The developer should have a strong grasp of what  is required, and the designer must understand that much of the development is “behind the scenes” programming that isn’t immediately resulting in a visual product. The designer is kept in the loop to ensure the vision is consistent.

So What do I do?

Following these steps are very important for every graphic designer. Also knowing how to leverage the tools we already use, such as Photoshop or Illustrator is important. A class such as Web and Mobile Design with Photoshop CC helps designers understand how to use grid systems, and properly create and save files so the developer’s job is easier.

Groups like Ascend Training also offer many free seminars helping you to make the transition from simply a designer to a well-rounded professional.

 

Adobe Creative Cloud Guide

In May of 2013, Adobe walked away from selling boxed-versions of software and moved exclusively to selling subscriptions to software such as Photoshop and InDesign. What does that mean for you?

What is Creative Cloud?

Adobe’s Creative Cloud, CC replaces the old model of Adobe “CS.” Users pay a monthly fee to access Adobe’s entire software library, cloud storage and more. You are able to install the software on 2 computers, Mac or Windows.

  • Full versions of the Adobe desktop applications: Adobe Photoshop, InDesign, Illustrator, Dreamweaver and more
  • Services to help create mobile-ready websites, content and apps
  • 20GB of cloud storage
  • Access to Béhance ProSite for portfolio development and hosting
  • 1 Year commitment billed monthly (yearly billing also available)
Guide to Adobe's Creative Cloud Software

Guide to Adobe’s Creative Cloud Software

Share this Image On Your Site

Please include attribution to AscendTraining.com with this graphic.

I use Photoshop, does that mean Photoshop is “in the cloud” like Google Docs?

No. The software is installed on your computer, but a license check is performed every 30 days. Photoshop and your files reside on your hard drive, just like before. You will need internet the first time you install CC.

If I cancel my subscription, do I lose my files?

No. You will need to make sure you save your files as compatible formats with earlier versions.

What exactly do I get with my subscription?

Acrobat Professional
After Effects
Audition
Bridge
Digital Publishing Suite (DPS)
Dreamweaver
Edge Animate
Edge Inspect & Edge Code
Edge Reflow
Edge Web Fonts
Flash Professional
Ideas
Illustrator
InCopy
InDesign
Kuler
Lightroom
Muse
PhoneGap Build
Photoshop
Photoshop Touch
Prelude
Premiere Pro
Scout
Speed Grade
20 GB Cloud Storage
Béhance Online Portfolio
Adobe Typekit

Any other benefits?

This is a big change for those in creative communities. One real benefit is that this model helps facilitate team-based workflows. If you have multiple people working at an organization, Team Licenses is the way to go. Team licenses give management the ability to add users, transfer software to a different user, or revoke licenses. So if someone quits, it’s very easy to transfer their license to the replacement employee.

 

So You Want to Develop Websites?

So You Want to Make Websites: Which Camp do you Fit Into?

The face of the internet is provided by two very different groups: Web Developers and Graphic Designers. They both have different roles with their own unique purpose. Graphic Designers fit on the creative spectrum, and excel in telling a visual story with branding, logos, banner ads, websites or any other visual imagery. Website Developers have the less creative job of planning and programming websites. They use programming languages to set up the structure and functionality of websites.

So the question is this: Are you a warm fuzzy creative person who needs to get that exact shade of purple for your logo, or are you a technical person who can’t live without clean code?

While there are some exceptions, designers and developers are usually 2 very, very different people. That said, there’s no law that Graphic Designers can make themselves more valuable by learning some code, and programmers can’t find their way around a pixel.

web-design3

Share this Image On Your Site

Please include attribution to AscendTraining.com with this graphic.

The Graphic Designers Role

graphic-designerThe creative person in the process is extremely important. If websites were all code and no graphics, the intent would be a pretty dull place. It’s the graphic designers job to gather all the information from the client and gain clear objectives. The Graphic Designer then creates different visual concepts that reflect the message the client requires. In most cases, then they hand off their images to the developer to put the pieces together.

The Web Developers Role

The Web Developer (or programmer) sets up the structure and code to create a website. They are also responsible for interaction between databases to create things like registration pages or shopping carts. Web Developers use such technologies as HTML, Javascript and CSS.

What’s the Job Market?

Now you know where you fit, what about getting a job? The US Department of Labor Statistics describes Graphic Designer as someone who creates visual concepts to communicate ideas. In 2012, the median pay for Graphic Designers in the United States was $44,150, with 259,500 jobs. The job outlook was expected to increase at a rate of 7%, slower than average.

Web Developers are described by the US Department of Labor Statistics as those who analyze needs and implement web content through code. In 2012, Web Developers in the United States had a median pay of $62,500, with 141,400 jobs. The job outlook was expected to increase at 20%, faster than average.

Graphic Designer/Web Developer Morph

So we see that the job outlook for Web Developers is pretty hot. Graphic Designers don’t have to be left out in the cold when it comes to the programmer mentality. A new trend is that Graphic Designers are breaking barriers and learning code.

This is a great idea because:

  • Graphic Designers can better prepare their images and understand coding roadblocks: What we see on the web can be radically different from the PSD or AI file. Learning code helps make the transition from Photoshop to HTML more seamless.
  • Better communication with programmers makes the process much, much easier. Designers don’t need to be a coding guru, but being able to talk the talk makes the walk much easier.
  • Graphic Designers can make smaller changes on their own without constantly running to the programmer.
  • They become more valuable: It’s a new world of cross-training. Adobe InDesign users are creating iPad apps with DPS, and Photoshop and Illustrator designers are learning HTML and CSS to become more valuable employees.

“Learning HTML and CSS creates a really valuable way for people to efficiently design for the web. For every pixel I put down in photoshop, I know exactly how I’m going to code that in HTML and CSS.” – Asher Hunt, Head mobile designer at LivePerson.

win-win strategy

So yes, according to the US Department of Labor Statistics, Web Developers make more money. But that doesn’t mean the creative visual designers have to be left out in the cold. By learning as much HTML and CSS as possible, Graphic Designers can make themselves more valuable, and elevate salaries.

The bottom line is that Graphic Designers learning code creates a “win-win” scenario for jobs and salaries.

– Jori Curry