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.

 

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

What’s New in Adobe CC

creative cloud logo

Adobe’s Creative Cloud represents a fundamental change to the way the industry leader will be distributing its products. Creative Suite has been a mainstay for creative professionals for years and we have all become used to the linear version releases, but now it’s official: there will be no CS7.

The next generation of Adobe applications will follow the principles of ‘software as a service’. Creative Cloud is to be charged via a monthly subscription which gives you constant access to all 26 programs and toolkits. You can then pick and choose the applications you wish to download and install, and receive updates and new features as they are rolled-out, instead of having to wait for the next CS release as before. It is like a car company adding features to the car while you are driving it, rather than making you wait for the next year’s model. Essentially you now pay for the ongoing services of Adobe in their development of the applications. You can still use the programs offline, but you do need to connect to the internet at least once a month so the programs can verify that your subscription is valid.

It is a big change, but a necessary one. In just the last few years we have seen the explosion of enormous brand-new markets centering around mobile devices. Creative Cloud gives Adobe’s software the ability to evolve at the same aggressively fast rate as the industry; to react more quickly and give designers what they need when they need it.

This is a fairly drastic modernization of Adobe’s business model and we have been hearing a few recurring questions from our students about the transition. In particular the new subscription types take some explaining:

If you have never purchased CS3 or later, full Creative Cloud subscription is $49.99/month. If you are an existing customer (own a valid serial), the first year is $29.99/month, and for teachers and students signing up before June 25th 2013, the first year is $19.99/month. These individual plans come with 20GB of Cloud storage and are a 12 month commitment.

For businesses, it is $69.99 per team member per month, which includes 100GB Cloud storage and extended one-on-one support. And again, if you already have a CS3 or later serial, the first year is $39.99.

The services provided are intended to go beyond mere software. With Cloud storage, enhanced file syncing through CC Connection, and other tools emphasizing live collaboration, Creative Cloud is recognizing the increasing mobility of todays creative professionals. It addresses the growing need we have for access to all of our resources from whatever location we’re at, and whatever device we’re on.

Part of this modernization is the introduction of web services like Behance. Hailed in this year’s MAX Keynote presentations as “the ultimate creative ecosystem”, it serves as online space for creatives to showcase their work in a format reminiscent of Pinterest, but with the self-promoting elements of LinkedIn. You can even share unfinished projects directly from the program you’re using and receive live feedback from the creative community – coined ‘the credible mass’ by Adobe.

CC also seems to have a theme of creating synergistic workflows between several existing programs. Below is a rough example of a comp started in Photoshop, made responsive in Edge Reflow, and tested in Edge Inspect to make the design compatible on multiple devices:

Comp made in Photoshop...

Comp made in Photoshop…

...layout configured with media breakpoints in Edge Reflow...

…layout configured with media breakpoints in Edge Reflow…

...and tested in Edge Inspect on my smartphone.

…and tested in Edge Inspect on my smartphone.

Essentially the vision is for there to be an always-accessible, swirling cloud of resources, support and inspiration from the creative community above our heads, and an equally collaborative and intuitive suite of programs under our noses; signaling a new-age for the creative design process.

Judging by the reviews on the Creative Cloud site, this transition will be a hectic time for Adobe’s customer service staff. The drastic changes to the pricing structure may have alienated more casual users, and the option of a single program subscription for $19.99 per month does little to appease them. But amongst those with higher levels of usage at least, the benefits outweigh the apparent cost commitment and CC seems generally well-received.

Ascend’s scheduled classes will start being taught in CC 30 days after the official release from Adobe on June 17th.

Converting Flash animation to HTML5 using CreateJS

2e19351a9c80281d002b10b09461d277An animation today needs to be independent of the hardware it is sitting on. This is the only way developers can realistically roll their work out across the entire multitude of devices that are out there. With the continuous evolution of Web Standards and the power of today’s coding libraries; what can be achieved within the constraints of a web browser alone has become increasingly impressive. As a result, many developers are looking to convert existing Flash elements into pure, stand-alone HTML5 code.

To help with this transition, Adobe has been backing a new set of tools known as CreateJS.

CreateJS is a collection of prewritten code libraries geared up to make it easy for those who are used to working in Flash, to create in languages like HTML5 or Javascript. The tools let you export the HTML and Javascript code that manages the preloading of graphics, sound, and animation in a Flash file. This way you can take Flash assets and convert them to work in an HTML5 canvas. There is even an extension toolkit for Flash Pro’s developer tools which allows users to work entirely in Flash and then export to HTML or Javascript.

It is far from perfect at this stage, but it does allow the conversion of vector, bitmaps, classic tweens and sound to HTML5. However more complex animations are not yet accommodated by CreateJS, so keep an eye on their updates for shape tween, mask and blends support, among other things.

 

Adobe Edge Reflow: Adapting with ‘Responsive Web Design’

We live in an age of screens. You are looking at one right now, and so am I. In our modern lives we are constantly staring at screens of various sizes, and as the diversity of resolutions and aspect ratios has grown over time, so has pressure on web developers to adapt their designs to the changing demands of the end-user.

The first reaction of many developers to having to cater to different screen sizes has been to create multiple static comps for the same project. But the drawbacks of this approach quickly become apparent when you imagine trying to design 4 or 5 versions of the same website, while trying to keep the design clean, functional and aesthetically consistent. You would then have to update each one separately every time the client makes a change. This could rapidly turn into a time-consuming nightmare!

So the need for intuitive designs that can automatically adapt to different screen widths can no longer be ignored. We coined this philosophy ‘Responsive Web Design‘ but until now developers have mostly been forced to either try and repurpose their existing tools to find work-arounds they were not designed for, or work directly in code  - which despite being accurate and clean, can hinder the artistic spontaneity that can be so important to the design process.

The newest addition to Creative Cloud, Edge Reflow, allows you to simultaneously design for different screen sizes using a visual workspace to set media breakpoints and is one of the only tools specifically designed with Responsive Web Design in mind.

Screen Shot 2013-03-14 at 11.14.47 AM

Screen Shot 2013-03-14 at 12.07.10 PM

 

As content is added, resized, edited and moved around on the canvas visually, Reflow translates these changes into CSS script in real-time in the background. This gives you the choice of working either visually, using the canvas to create a layout as you would in Illustrator or InDesign, or by editing CSS values in the context-sensitive side panel to alter the individual attributes of an object:

 

Ever-present at the top of your canvas is the media breakpoint bar. This is where you set color-coded breakpoints for each screen size:Screen Shot 2013-03-15 at 12.59.14 PM

Once you have settled on a layout for one, clicking on the next breakpoint causes the page’s content to manouevre automatically to try and fit within the new width (normally in an unhelpful way). You can then tweak the layout, replace or remove objects and reformat text until you are happy, and then move onto the next breakpoint.

Screen Shot 2013-03-15 at 1.15.39 PM

Reflow is very clever in its use of color-coding for content-specific attributes in the side-pane. When an object is selected, the backgrounds of related attributes change to match the color assigned to the layout in the breakpoint bar. This allows you to quickly see if a value is specific to the breakpoint you are looking at, or if it was originally set on another.

The beta still lacks the ability to choose your own colors for these labels, and although the CSS code Reflow writes as you design is very clean and uses a full array of CSS formatting controls, it does not yet allow you to name layers or text styles.

There are of course other flaws that will hopefully be addressed once the beta has been picked apart and the full version is released, but there is also some very nice extended functionality potential in Reflow being used as part of the Edge suite. Such as being able to preview your design on different devices in real-time using Edge Inspection, and the possibility of incorporating assets created in Edge Animate.

We are looking forward to the full release. It should tide us over until they come up with round screens, or say, 3D websites… and when that day comes, may the God of Responsive Web Design have mercy on us all!!

Photoshop CS6 at your fingertips

Being a designer means working to deadlines – which means time is always of the essence. Working quickly and efficiently within Photoshop is essential and there comes a point when your poor mouse just can’t scurry around the screen fast enough to keep up.

Adobe have always included keyboard shortcuts to reduce the little guy’s workload, but one issue with these is that they have been tweaked and moved around over the years, and it can be a little irritating to have to go against muscle memory, established over countless hours of working, to learn the new shortcut for something you have always used. My fingers still seem to be reminiscing about the good ol’ days of Photoshop 7: holding down cmd+Z to start the ‘undo’ time machine. I still forget to press shift every time!

Another, less trivial drawback has been that shortcuts have never taken into account that a tool as incredibly diverse as Photoshop allows (nay, encourages) us to pursue our desired results in a plethora of different ways. We all have our favorite tools and no two users work exactly the same way – so why do we all have to use the same shortcuts? If I constantly use smart objects, then I’m going to want my keyboard to be littered with ergonomically friendly shortcuts for adding and editing them. Someone else may never use smart objects and would make better use of those same convenient keys for, say, zooming controls.

Well, CS6′s answer to the problems with shortcuts was to give us another shortcut:

cmd+opt+shift+K

(ctrl+alt+shift+K in Windows)

…which opens the new keyboard shortcuts customization menu:

Photoshop CS6 Keyboard Shortcuts Customization Menu

This new feature for CS6 allows you to optimize your shortcuts for exactly the way you like to work. You can overwrite default shortcuts that you may have a grudge against, bring back retro shortcuts that your fingers still try to use, or you can introduce entirely new ones to save yourself even more time.

Through this menu you are able to edit shortcuts for menu commands, tools, and palette menus. More than one key command can be assigned to one action, and Photoshop will tell you if you have any conflicting commands and show you the duplicates so you can fix them.

One very useful feature, especially if you often use Photoshop on multiple computers, is the ability to save your configurations and export them as a handy .kys file. Being able to save means that our preferences can now survive version updates and the obsessives amongst us can now gradually build our dream set of optimal shortcuts (some dreams are cooler than others) and keep them forever!

Quick Tip: Using Dreamweaver for your CMS Development with Drupal, WordPress, Joomla, etc

Drupal, WP and Joomla icons next to each other

Are you looking to do some theming or plugin development for a common CMS (Content Management Systems) such as Drupal, WordPress or Joomla? If that’s the case, then this tip may be useful for you. Dreamweaver CS6 has a neat option to provide code hinting for common CMS’. Start by setting up your server and local environments in the Manage Sites panel then open up one of the PHP scripts for whatever CMS you may be using. Once you have a document open, go up to the Sites menu once again and find the item “Site Specific Code Hints”. A window will come up, but as long as it is a common CMS, Dreamweaver should automatically recognize which CMS it is, so all you should have to do is click OK. After you have done this, Dreamweaver will add a config file to your local site and from then on out you will have code hinting for your custom web development with your CMS of choice.

Text Formatting in Photoshop CS6

Type styles in Photoshop CS6 enable us to have far more control over text, similar to Adobe InDesign. In the past, global changes to text were just not possible. In Photoshop CS6, we can now define styles for both paragraphs and characters. Normally Paragraph styles are most used, with Character styles used within paragraphs for special emphasis.

In addition, you can change several type layers at the same time by selecting all of them and making the change, and even insert a Lorem Ipsum text.

  • Character Styles: Defines attributes derived from the Character panel such as font size, kerning, leading.
  • Paragraph Styles: Control both character and paragraph attributes including alignment, spacing, indents.

We now have InDesign style formatting in Photoshop CS6.

 

A New Way to Debug your Website on Many Devices

Adobe Shadow Icon

 

Adobe has just released a public beta for yet another useful application for web development. The current title is Adobe shadow. Now I haven’t had much time to play around with it as of yet, but I’ll provide the run down.

 

What Adobe Shadow is used for is previewing your website on not only your browser, but also any mobile devices you can find. The application has two pieces: the application itself, which can be downloaded as a beta currently at Adobe Labs; and second is a Google Chrome extension. This means you will need to use Google Chrome currently when debugging your website, but if you aren’t already using Chrome, you should be. It is in my opinion the best browser and is also rated as the most secure browser.

 

Once you have installed both pieces, you then register all of your mobile devices. iPhones, iPads, and Android devices are currently supported. After the setup you can view and debug your website simultaneously on your computer and all your devices. This is great to not only see how your site works on all of your testing devices but also debugging your Javascript and other code that exists on your website.

 

This will work great testing your HTML 5 and jQuery applications and will also be quite powerful in conjunction with Dreamweaver CS5.5 and it’s mobile support.