Code vs Design Process Discussion

Article Source: Click Here

A Call To Arms. In defense of Photoshop

Although mark-up can provide a truer experience for clients, Photoshop is clearly an important part of the design process. Ridding it from our toolbox could prove disastrous. What we need is not to change our methodology, but rather to amalgamate our tools. We need a tool that supports the creative process but at the same time gives us access to the subtleties of our medium.

Modern WYSIWYG editors are off the mark. We need something more like Photoshop, but with capabilities that allow us to create DOM elements as easily as we can create shapes. John Nack seems to be on the right track with his idea of HTML layers, which would enable users to create and style HTML elements and render them with the WebKit engine all within a standard PSD file. While this idea is not completely practical, it gives us something to work with. Imagine opening the layer styles dialog and being able to add CSS3 styling to an element. What bliss!

HTML is a language with roots in library science. It doesn’t know or care what content looks like. (Even HTML5 doesn’t care what content looks like.) Neither a tool like Photoshop, which is all about pixels, nor a tool like Illustrator, which is all about vectors, can generate semantic HTML, because the visual and the semantic are two different things.

I have to agree. Any tool that is meant to translate visual elements from canvas to code will inevitably fail in the semantic realm. Computers are monolingual: they need us to make that translation. However, do we need perfectly semantic code if we’re only creating a mock-up? Why can’t we accept the reality that we’re not crafting the final product and simply spit out HTML and CSS that’s “good enough” for mock-up purposes. Once the design is approved, we’ll put on our foreman hat and begin the real construction.

Until our paradigm is rocked by some killer new app, Photoshop will reign as the best tool for designing websites. Although it doesn’t currently speak to our medium the way we wish it did, it proves itself priceless when it comes to the process of designing. Photoshop is a virtual playground of experimentation; dropping it from the process only prevents your design from being fully developed. So, before you switch to the mark-up methodology, understand that you’re sacrificing creativity for a few browser capabilities, which could be explained to clients anyway. For the sake of your client, creativity and work,stick with Photoshop.

12 Things Highly Productive People Do

Article Source: Click Here

Being highly productive is not an innate talent; it’s simply a matter of organizing your life so that you can efficiently get the right things done.

So, what behaviors define highly productive people?  What habits and strategies make them consistently more productive than others?  And what can you do to increase your own productivity?

Here are some ideas to get you started…

1. Create and observe a TO-DON’T list. – A ‘TO-DON’T list’ is a list of things not to do.  It might seem amusing, but it’s an incredibly useful tool for keeping track of unproductive habits, like checking Facebook and Twitter, randomly browsing news websites, etc.  Create one and post it up in your workspace where you can see it.
2. Organize your space and data. – Highly productive people have systems in place to help them find what they need when they need it – they can quickly locate the information required to support their activities.  When you’re disorganized, that extra time spent looking for a phone number, email address or a certain file forces you to drop your focus.  Once it’s gone, it takes a while to get it back – and that’s where the real time is wasted.  Keeping both your living and working spaces organized is crucial.  Read Getting Things Done.
3. Ruthlessly eliminate distractions while you work. – Eliminating all distractions for a set time while you work is one of the most effective ways to get things done.  So, lock your door, put a sign up, turn off yourphone, close your email application, disconnect your internet connection, etc.  You can’t remain in hiding forever, but you can be twice as productive while you are.  Do whatever it takes to create a quiet, distraction free environment where you can focus on your work.
4. Set and pursue S.M.A.R.T. goals. – These goals must be Specific, Measurable, Attainable, Relevant, and Timely.  Read more about this here.
5. Break down goals into realistic, high impact tasks. – Take your primary goal and divide it into smaller and smaller chunks until you have a list of realistic tasks, each of which can be accomplished in a few hours or less.  Then work on the next unfinished, available task that will have the greatest impact at the current time.  For example, if you want to change careers, that goal may be driven by several smaller goals like going back to school, improving your networking skills, updating your resume or getting a new certification.  And each of these smaller goals is supported by even more granular sub-goals and associated daily tasks.  And it is these small daily tasks that, over time, drive larger achievement.
6. Work when your mind is fresh, and put first things first. – Highly productive people recognize that not all hours are created equal, and they strategically account for this when planning their day.  For most of us, our minds operate at peak performance in the morning hours when we’re well rested.  So obviously it would be foolish to use this time for a trivial task like reading emails.  These peak performance hours should be 100% dedicated to working on the tasks that bring you closer to your goals.
7. Focus on being productive, not being busy. – Don’t just get things done; get the right things done.  Results are always more important than the time it takes to achieve them.  Stop and ask yourself if what you’re working on is worth the effort.  Is it bringing you in the same direction as your goals?  Don’t get caught up in odd jobs, even those that seem urgent, unless they are also important.  Read The 4-Hour Workweek.
8. Commit your undivided attention to one thing at a time.  – Stop multi-tasking, and start getting the important things done properly.  Single-tasking helps you focus more intently on one task so you can finish it properly, rather than having many tasks started and nothing finished.  Quickly switching from task to task makes the mind less efficient.  Studies have shown that changing tasks more than 10 times during an 8-hour segment of work drops a person’s IQ by an average of 10-15 points.
9. Work in 90 minute intervals. – In an interview with The Globe and Mail, Tony Schwartz, author of the NY Times bestseller The Way We’re Working Isn’t Working, makes the case for working in no more than 90 consecutive minutes before a short break.  Schwartz says, “There is a rhythm in our bodies that operates in 90-minute intervals.  That rhythm is the ultradian rhythm, which moves between high arousal and fatigue.  If you’re working over a period of 90 minutes, there are all kinds of indicators in your physiology of fatigue; so what your body is really saying to you is, ‘Give me a break!  Refuel me!’”
10. Reply to emails, voicemails, and texts at a set times. – This directly ties into the ideas of single-tasking and distraction-avoidance.  Set specific time slots 2-3 times a day to deal with incoming communication (e.g. once at 8AM, once at 11AM, once at 3PM), and set a reasonable max duration for each time slot.  Unless an emergency arises, be militant about sticking to this practice.
11. Invest a little time to save a lot of time. – How can you spend a little time right now in order to save a lot of time in the future?  Think about the tasks you perform over and over throughout a work week.  Is there a more efficient way?  Is there a shortcut you can learn?  Is there a way to automate or delegate it?  Perhaps you can complete a particular task in 20 minutes, and it would take two hours to put in place a more efficient method.  If that 20 minute task must be completed every day, and a two-hour fix would cut it to 5 minutes or less each time, it’s a fix well worth implementing.  A simple way of doing this is to use technology to automate tasks (email filters, automatic bill payments, etc.).  Also, teaching someone to help you and delegating work is another option.  Bottom line: The more you automate and delegate, the more you can get done with the same level of effort.
12. Narrow the number of ventures you’re involved in. – In other words, say “no” when you should.  The commitment to be productive is not always the biggest challenge, narrowing the number of ventures to be productive in is.  Even when you have the knowledge and ability to access highly productive states, you get to a point where being simultaneously productive on too many fronts at once causes all activities to slow down, stand still, and sometimes even slide backwards.

2007 - Steve Jobs and Bill Gates Historic Interview. One I had to post for the records.

Photoshop Combo Moves

Article Source: Click Here

Legend:
( ) = Repeat as desired
{ } = Manual Input Required

10. Cloak of Invisibility

Remove everything from the screen except for your file.

• F, F, F | Cycle through Screen Modes
• Tab | Remove Tools and Palettes
• Ctrl+H | Hide Extras (Grid, Guides, Slices, etc.)
• Ctrl+R | Hide Rulers

9. Quick Brush Jab

Quickly and easily customize a brush. This combo is a staple for digital painting.

• B | Brush Tool
• Right-Click and Select or F5 and Select | Open condensed or full Brush Palette
• or . or , or Shift+. or Shift+, | Cycle through brushes or jump to first or last brush
• [ or ]: | Shrink or enlarge brush radius
• Shift+[ or Shift+] | Decrease or increase brush hardness
• {Numeric Input} | Change brush opacity (e.g. ’5′ = 50%, ’55′ = 55%)

8. Quick Brush Jab Path Stroke

Stroke a path with a customized brush.

• {Draw Path} | Use any tool to draw a path
• B | Select Brush Tool
• Quick Brush Jab | Use the Quick Brush Jab Combo to customize brush
• Enter | Stroke the path with your customized brush

7. Gaussian Attack

Apply a filter, fade it and apply again. Good combo for fine-tweaking filters.

• {Apply a Filter} | Manually choose and apply a filter (warning: using the Lens Flare filter may result in a swift kick to the mouse balls)
• Ctrl+Shift+F | Fade the filter
• (Ctrl+F or Ctrl+Shift+F) | Reapply filter with or without dialog box

6. Shadow Maker

Create a basic shadow based on a chosen layer.

• {Select Layer} | Select the layer the shadow will be created after. The transparency of this layer needs to resemble the desired shape of the shadow.
• Ctrl+J | Layer via Copy
• Ctrl+[ | Move layer down
• D | Reset color defaults
• Alt+Shift+Backspace | Fill with black and preserve transparency
• Ctrl+T | Free transform
• {Transform} | Modify to your liking
• Enter | Commit

5. Layer Catcher

Select, group and mask layers. Often easier than using the layers palette.

• V | Selection Tool
• Ctrl+Click or Ctrl+Shift+Click or Ctrl+Shift+Right-Click | Select your layers
• Ctrl+G | Group Layers

4. OCD Layer Sort

Rearrange your layers quickly and easily. Great cure for you neuroticism.

• F7 | Show Layer Palette
• Alt+[ or Alt+] or Alt+, or Alt+. | Select a layer
• Shift+Alt+[ or Shift+Alt+] or Shift+Alt+, or Shift+Alt+. | Select more layers
• Ctrl+[ or Ctrl+] or Shift+Ctrl+[ or Shift+Control+] | Move layers down or up or send to bottom or bring to top

3. Ultimate Flattener

Merge All Layers (even those hidden). Quick way to flatten a file.

• Alt+. | Select Top Layer
• Shift+Alt+, | Select all layers between currently selected and bottom layer
• Ctrl+E | Merge the selected layers

2. Infinite Dupe

Duplicate and evenly distribute or transform items. Nice way to distribute something like nav buttons.

• Ctrl+T | Transform
• {Transform/Move} | Manually Move or Transform
• Enter | Commit Transform
• (Ctrl+Alt+Shift+T) | Duplicate and transform relative to the newest item

1. Finishing Move – The Web Extractor

Extract a selection and save it for the web. Extremely useful when pulling individual elements from a design, such as buttons or rules.

• {Create Selection} | Select the area you want to extract
• Ctrl+Shift+C | Copy Merged to clipboard
• Ctrl+N | Create New Image based on selection size
• Enter | Confirm New Image
• Ctrl+V | Paste from clipboard
• Ctrl+Alt+Shift+S | Save for the Web

Illustration Inspiration - Adobe Illustrator from Lainlee 3 design  ”Assemble”. - More Here 

Illustration Inspiration - Adobe Illustrator from Friks84 “McFly since 89” - More Here 

Illustration Inspiration - Adobe Illustrator from Friks84 “Fadeaway Perfect” - More Here 

The Power of Keynote

Article Source: Click Here

Stop the press:
There exists a world outside of the Adobe Creative Suite. And it’s called Keynote.

I should start by saying I am by no means a Keynote ‘pro’ compared with many of our web team who could use it in their sleep. In fact, when I first started working at ESPI last July, I was very surprised to find out that designers were using Keynote for laying out presentations. My surprise turned to alarm when I found out that they were also using it as a design tool to build UI designs for websites and apps. It turns out that I was absolutely wrong. Keynote is an incredibly powerful design tool. Less then one year later, I now rarely (if ever) use InDesign to layout presentations, and I have started using Keynote almost exclusively for any web layouts I do. And not just UX wireframes, but full UI designs. On a recent project, I also used it for poster mock ups, banner designs and a bunch of other formats.

Most of the web team here at ESPI are what I like to call Keynote aficionados. They use the program for virtually every project, rarely dipping into Photoshop except occasionally to create some small graphic elements. An example of this is Red Bull Music Academy website that was completed last year.  With the exception of some vector iconography created in Illustrator, it was all designed in Keynote.

Why use Keynote?

This is by no means a definitive list, but here are some of the key features for a designer using Keynote.

1. Ease and spread of use

It’s made by Apple, so this is a given. Nonetheless, Keynote’s ease of use is still worth a mention, as it is exceptional. No more ‘placing’ images or videos, or worrying about missing files – all the images, videos, etc. are embedded directly in the document. In turn this makes it extremely efficient allowing you to work at a very fast pace. The web team at ESPI often move from sketch to Keynote quite quickly and have a very tangible result. It is much faster than Photoshop. Speed of mock ups works well integrating into an agile workflow –the team only develop mock ups with enough detail, then goes straight into code where they can iron out the details and polish. Also, if you can’t do it Keynote, it is unlikely you could achieve it in HTML/CSS.

2. Flexibility and non-destructive editing

One of the most powerful features of Keynote is that is will take virtually any file that you throw at it. Images, vectors, video, audio, etc. can all be simply be dragged or pasted into your work area. Once in the work area, they can be resized nondestructively. This adds huge flexibility to your workflow, as the same layout used for web can also be printed at a lovely 300dpi. This is particularly useful for iPhone/iPad design, as it means a single source version of artwork for Retina and non-Retina displays. Keynote files can be exported as QuickTime movies, PDFs, HTML or image files, or if you really have to, a Powerpoint file.

3. The cleverest grid lines I have ever met

It’s almost as if these lines can read my mind. I want equal space between these images? No problem. I want the centre point? Easy. I want these irregularly sized objects to all line up perfectly? Done. These lines are particularly useful for UI layouts;  automatically creating equal gutter widths that all other objects snap to. In short, these yellow grid lines are magic – it’s like having your own Josef Müller-Brockmann inside the interface.

4. Animation tools for prototyping

When you combine the words ‘animation’ and ‘presentation software’, it instantly evokes unpleasant memories of garish PowerPoint presentations you were forced to sit-through in high school, complete with sparkly ‘animate-in effects’ and probably some Comic Sans. Park these bad memories when it comes to Keynote. The animation tools are powerful, tasteful and tremendously effective. In particular, the ESPI web team uses them frequently for app mock ups to demonstrate functionality and walk-throughs of features. These Keynote documents can then be played full screen on an iPhone/iPad, giving a real demonstration of an app’s UI experience for a client. The narrative structure allows you to visualize flows and interactions better, meaning you get working prototypes that look real faster.

When the web team were developing prototypes in a service design project for Volkswagen, the native Keynote app didn’t cut it at the time (because hyperlinks were not supported), instead they linked everything using the hyperlink tool, then PDFed it and used the Good Reader app to demo it to clients and use in user testing. 

Keynote can also be used to prototype animation moving storyboards, which will later be polished into motion graphics in After Effects. For example, Erik has used the tool to sketch an animation for Deutsche Bahn.

5. Third party add-ons/libraries

Many resources/libraries are available (often for free) to make visualization and mock ups even faster (e.g. Keynote KungFu, Keynotopia). Also when you combine this with tools like Glyphish you can have testable solutions quickly rather than getting bogged down in details.

Conclusion

Of course, this is not to say that Keynote is perfect. I’m still getting used to not having the usual set of Adobe hotkeys, the Keynote ones are quite limited. Also, I really miss things like graphic styles and proper tools for drawing vectors (there is a Bezier tool, but it is very limited). Another issue is the lack of detailed kerning options, although to be fair, the typographic tools in general are good. Some basic blending options (Multiply, Overlay, etc.) would be the proverbial icing on the cake. I have my fingers tightly crossed that some of these features is incorporated into the next release. And, knowing Apple, it’s very possible that some of them will be. 

Keynote has worked its way into the ESPI workflow, and for good reason. The team here continues to push how this powerful design tool can be used, and it is exciting to imagine what will be possible with it in the future. It is available on the Mac App Store if you haven’t got it yet.