Preparing Your Photoshop Files for Development

Web Graphic File Formats

   

JPEG: Joint Photographic Experts Group

• Best for continuous tone photographs, glows, gradients, drop shadows, etc.
• Supports 24 bit color

PNG: Portable Network Graphics

• Superior File format to use with transparency 
• Use PNG 24 or 32

GIF: Graphic Information Format 

• 8 bit color (256 indexed colors)
• Use for flat or simple graphic images
• Transparency and GIF animations

Optimizing Graphics

JPEG compression is called lossy and will cause your image to lose quality each time it is compressed. It reduces file size by discarding information, so if you need to make a change, go back to your original psd file and re-optimize.

Save for Web...

1. Go to File > Save for Web
2. Choose file type

Saving as PNG

To get the best quality transparency use PNG 24 or 32. The file size is larger than the GIF but it is superior in quality.

Saving as JPEG

1. Use the 2/4Up tab to view the image in different compression ratios
2. Select JPEG
3. Change quality and look at the difference in compression and image quality

Extract Assets... 

(Only available in AdobeCC)

Make sure your layers are cleaned up, delete any layers you are not using and have them all named properly before you go to extract assets.

1. Select the layers you want to save out
2. Go to File > Extract Assets

By selecting the "Extract" button, it will export your layers based on what file type you select. The files will be saved to the designated folder of your choice. 

FILE MARKUP (REDLINE)

As you are working on your design, you need to make sure to check the sizes of your design elements.

How wide is your page?
What size is your header, footer?
What is the width of your column(s)?
Do they add up to the total width? 
What are your font specs?
What typeface, size, style, etc. are your fonts?
What is the leading?
How many pixels do you want between paragraphs? 


You can either printout a copy of your design and mark it up with the dimensions of all your elements or do it digitally. The development team (or you) will need this document so they know what your specs are and can develop exactly what you designed.



FTP AND THE PRATT SERVER

For your site to show on the web, you must upload or FTP (file transfer protocol) them to your web hosting server. If you don't have one, you can use the Pratt server, and you will need an FTP program. There are many free ones; Pratt has CyberDuck.


Here are your ftp settings:
Pratt uses SFTP which is secure.

server: mysite.pratt.edu
name: user name
password: same as email and onekey


Server info

1. Make sure you have a public_html directory.
2. If you don't, then create one.
3. Copy all your files to this folder.
4. Remember that the first file to load will always be your index.html file.

Designers & Developers: Working Together

“…developers have a huge amount to add to discussions about design.” And because of this, it’s very important to include the development team (or developer) in the conversation early on. 

When developers are not included in the conversation, what may seem like a small change in the designers eyes, may very well have a huge impact on the website and its performance. In addition, a lack of communication can also “lead to designs that are impossible to build, designs that introduce unnecessary technical complications, endless back and forth between the designer and developer as they struggle to fix problems created by the designer, wasted days of revision and iteration — [and] all because the developer wasn’t consulted.”

Not only is the developer affected by this, but the client is as well. If the client signed off on designs before you showed them to the developer, it reflects poorly on the whole team if the developer isn’t able to execute the designs. “The decisions we make as designers have far greater ramifications than we are aware of.”

Developers might also suggest an idea that the designer may have never thought of or dismissed as impossible. Because many designers are not well versed in development, they don’t know all the capabilities possible. By collaborating with the development team, they could possibly take your ideas and build upon them, taking them further than you could have ever thought. 

Something else to keep in mind is that developers make design decisions all the time. “…as a developer delves into building a project, they will have to make decisions that affect and refine the design. By involving the developer in the initial design discussions, they will be in a better position to fill in the blanks. And when compromises in the design must be made, they will be in a better position to make those calls.”

And finally, getting developers involved will result in the developer feeling more engaged in the project. “Too often, developers are at the end of a long chain of decision-making. Their voice isn’t heard because they’re brought into the process far too late. This leaves them feeling no ownership over the project. By bringing them in earlier, they will feel more connected to the work and more appreciated too.”

As you can see, your work flow can only benefit from collaborating with and working closely with the development team. Take a look at Matt Gemmell’s article: How Designers Can Help Developers, in which he points out some great tips. 

Designers Helping:

• Use an intelligent method of version-control
• Keep your layers
• Name all your layers meaningfully
• Use groups, and do so sensibly
• Prune unneeded layers
• Use Layer Comps
• Keep everything as vectors and scaleable effects

Helping Developers:

• Learn how to preserve rounded corners while resizing
• Design at 72ppi
• Snap to whole pixels
• Always use RGB mode
• Asset-preparation is part of your job
• Be careful with fonts
• Mimic the platform’s text-rendering (where possible)
• Be sure of design dimensions
• Use the platform’s idioms
• Consider screen-size and their contexts 
• Use genuine or at least realistic content
• Respect the global light source
• Make navigational or organizational constructs explicit
• Export cut-ups without compression
• Ask about shadows
• Understand how buttons are constructed

Gemmell also wrote a follow up: How Developers Can Help Designers. 



References:

1. http://www.smashingmagazine.com/2014/11/21/why-you-should-include-your-developer-in-the-design-process/
2. http://mattgemmell.com/how-designers-can-help-developers/

The Basics of User Experience Design

What is UX?

“User experience (abbreviated as UX) is how a person feels when interfacing with a system. The system could be a website, a web application or desktop software and, in modern contexts, is generally denoted by some form of human-computer interaction (HCI).”  –Jacob Gube

UX is relatively new, and the term “user experience” was coined by Dr. Donald Norman, from the Nielsen Norman Group, a cognitive science researcher who was also the first to describe the importance of user-centered design – the idea that design decisions should be based on the users needs' and wants. 

User Experience encompasses many different factors. Some are controlled by designers and developers, and some are environmental or simply just the user's preference. These factors include: usability, accessibility, performance, design/aesthetics, utility, ergonomics, overall human interaction and marketing.1

Although they are related, it’s important to note that UX is not the same as usability. UX is the experience, emotion, intuition and connection a user feels when using a site or product. Whereas usability is more about the effectiveness of a site design and how user-friendly it is; it’s a key component of the overall user experience.

UX is NOT one size fits all, and it won’t work in every situation for every user. Why? Because everyone is different. What works for one user, might have the opposite effect on another. The best we can do is design for specific experiences and promote certain behaviors, but we can’t manufacture, impose or predict the actual experience itself…A design must be tailored to the goals, values, production process and products of its website.2

“In terms of design, user experience is just as important as visual identity…It doesn’t matter what your site or app looks like if people don’t know how to interact with it. And moreover, they need to enjoy that interaction.” –Carrie Cousins

“Experience design is the design of anything, independent of medium, or across media, with human experience as an explicit outcome, and human engagement as an explicit goal.” –Jesse James Garrett

Who Does UX?

User Researcher

• Informs strategy by identifying user needs and behaviors through interviews, surveys, and existing data
• Carries out user testing
• Compares performance and measures success
• Deliverable Examples: Usability test report, heuristic analysis, personas, user scenarios

Content Strategist 

• Determines content requirements
• Informs content creation by establishing content level goals 
• Ensures content is right for both the business and the users
• Deliverable Examples: Content Inventory, Content Gap Analysis, Competitive Analysis, Content Matrix, Content Plan

Information Architect (IA) 

• Defines the structure of a system
• Defines how content is organized and discovered
• Focuses on overall relationships between bodies of information 
• Deliverable Examples: Site map, wireframes, high-level flows

Interaction Designer (IxD) 

• Defines interactions, affordances, and feedback of a system
• Focuses on how the user interacts with an interface to carry out their goal.
• Deliverable Examples: Task flows, wireframes, prototypes, storyboards

What is an Affordance?
A potential action that is made possible by a given object or environment; especially, one that is made easily discoverable.3

To state it more simply, affordances are those design elements that help the user understand how to use the interface.

UX Process

There are many processes when executing good UX design, and you’ll find different opinions on which is best. Some of those processes are:

5D’s or Waterfall Process

1. DISCOVER

• Gather information
• Lead brainstorming 
• Define project scope
• Do a competitive analysis 
• Define personas
• Create user stories, use cases

2. DEFINE

• Develop the interaction model
• Define content & functionality requirements 
• Define the information architecture
• Create a project plan

3. DESIGN

• Sketch
• Create paper prototypes
• Evaluate usability of sketches
• Create wireframes, more prototyping 
• Explore visual designs

4. DEVELOP

• Architecture Design, UML diagram/Class diagram, Daily Scrum, Code iteration cycles, Interim installers, Release management, Unit testing, Code refactoring, Documentation
• Deliverable: working system model and source code

5. DELIVER

• Use cases, Test cases, Testing, Regression testing, Test reports, Build releases
• Deliverable: Shippable release

The problem with the 5D model is that it suggests each of the steps are independent, like a waterfall. In reality, it is cyclical and therefore UX SHOULD BE ITERATIVE!



Lean UX – An Agile Process

Jeff Gothelf’s Lean UX Process

Lean UX vs Agile UX

Don’t let process become an obstacle. Be ready to adapt your process based on type of project, size of team, and your client. No mater what process you choose, UX designers perform various tasks during the process. 

What does UX look like?

• Research & Evaluation of current system
• User Surveys 
• Usability Test Report
• Features & Functionality Requirements
• Experience Maps
• Competitive Reviews or Analysis
• Develop Personas or Archetypes 
• Social Strategy
• Structure & Systems Diagrams
• Sitemaps
• Sketches
• User Flows
• Taks Flows
• Wireframes: sketch, low/high-fidelity, annotated
• Prototyping

“In the end deliverables are merely artifacts of the design process. They are not the final design, they are not the artifact of experience. The end user never interacts with them...they interact with the product or service that is actually delivered.”4

What the #$%@ is UX Design?

3 Ways Good Design Makes You Happy

UX Resources:
UX is NOT UI
Spectrum of UX
Jesse James Garrett
Adaptive Path
UX Myths
User Experience Professionals Association
Why User Experience Cannot be Designed
Lean UX Manifesto
25 UX Videos Worth Your Time
Agile vs Lean UX
Lean vs Agile US: Is There A Difference?
Nielsen Norman Group
UX Mastery Resources/Techniques
Video: User Interface Techniques



References:

1. http://designshack.net/articles/why-does-user-experience-matter/
2. http://www.smashingmagazine.com/2010/10/05/what-is-user-experience-design-overview-tools-and-resources/
3. http://en.wiktionary.org/wiki/affordance
4. http://52weeksofux.com/post/346650807/deliverables-vs-delivery

Activity!!

Rules:

• One thought per Post-it
• Make thought as clear as possible, in least amount of words 
• Sketches are encouraged
• Keep corners clear (in case you need space for additional notes)
• Be specific

Once you have your thoughts down, it's time to group! Organize your thoughts into groups based on one of these types of layouts:

References:
http://www.slideshare.net/luxrco/become-a-stickynote-ninja-workshop-ux-week-2008
http://stickynoteninja.com/

Responsive Design

Responsive Design. What is it?

“Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.”1

That said, with the abundance of different screen sizes, it’s not realistic, efficient or even practical for that matter, to design for all of them individually. Instead, designing with breakpoints in mind is one way to take advantage of designing responsively. 'Smashing Magazine' has a great article: Logical Breakpoints for Your Responsive Design, for further reading. 

Responsive web design requires a more abstract way of thinking. More than just adjustable screen resolutions and automatically resizable images, it requires a new way of thinking about the design as a whole. Some of the concepts currently being practiced are: fluid layouts, media queries, and scripts that can reformat web pages and mark-up (code) effortlessly or automatically. Let's take a look at these features, and others, in more detail.


Adjusting Screen Resolution
As previously mentioned, there’s a wealth of varying screen resolutions, definitions and orientations. Many new devices are able to switch from portrait to landscape and vice versa at the user’s whim. But how is a designer supposed to design for these situations?

One option is to group screen sizes into major categories, design for each of them, and make each design as flexible as necessary. But that can be overwhelming and inefficient. Plus, who knows where technology will be in the next few years? Since more and more screen sizes and resolutions are introduced so frequently, how do we deal with this situation?

Flexible or Fluid Layouts are when structural elements break a layout's form when pushed enough. When first developed, designs weren’t that flexible and often couldn’t adjust from large to small screen. Now, we’re able to make things more flexible. Images can be automatically adjusted, and there are other workarounds. While this isn’t a complete fix, flexible layouts give designers and developers more options.


Flexible/Fluid Images
Working with images in a fluid layout can be tricky, but there are a number of techniques to resize images proportionately, many of which are easily done. The most popular option is to create a CSS property for max-width. 

As long as no other width-based style overrides this rule, every image will load in its original size, unless it becomes narrower than the original width, and the code would look like this:

One key thing to keep in mind when working with images is space and download time. Be sure you know the current best practices and communicate with the dev team to ensure that image resolution and download times are efficient.


Custom Layout Structure
If your design has extreme size changes, you may want to consider changing the layout altogether. You can do this either through a separate style sheet, or more efficiently, through a media query. Types of Media Query Methods are: CSS 2.1 and CSS3 Media Queries, and JavaScript.


Showing or Hiding Content
When moving from a larger screen to a mobile device, showing every piece of content usually isn’t necessary, nor is it always the best option. There are some best practices for mobile environments: simpler navigation, more focused content, lists or rows instead of multiple columns.

Fortunately, CSS has been allowing us to show and hide content with ease for years, and it’s done by using the display property in your CSS document. Values can be: none, in-line or block. This shouldn’t be confused with the property visibility; this just hides the content, whereas the display property gets rid of it altogether.


Touch screens vs Cursors
Touch screens obviously have a whole different set of design guidelines than traditional mouse-based interactions, as well as different capabilities. Fortunately, adapting your design for both doesn’t take a lot of effort, but it does require keeping additional concerns in mind. For example, there are no hover states on a touch screen and you can't do swiping gestures with a mouse, etc. 


With the mobile world continually changing, responsive design is not the only option, it’s but one trick in the bag. When implemented correctly, responsive design can improve the user experience. That said, besides saving designers and developers some frustration, responsive web design also happens to be best for the user. Every custom solution makes for a better user experience. With responsive design, we can create custom solutions for a wider range of users, on a wider range of devices. 

It might not completely solve it for every user, device and platform, so as new devices, resolutions and technologies continue to be available, designers and developers need to continually be aware of best practices. 



Additional Resources
Responsive Web Design Guidelines and Tutorials
Responsive Web Design Guidelines and Tutorials
Responsive Images Done Right: A Guide To <picture> And srcset
70 Stunning Responsive Sites for Your Inspiration
Adapting To A Responsive Design (Case Study)
Fluid Grids from A List Apart


Image Sizing Resources
Fluid Images
Responsive Images: Experimenting with Context-Aware Image Sizing
Responsive Images and Context Aware Image Sizing



References

1. http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/#more-75660

Mobile & Table Design Basics

How is mobile different?

“The first thing we need to understand about mobile design is that it’s different – and not just with regards to size. The physicality and specifications of mobile devices impart different design affordances and requirements. Because mobile devices are lighter and more portable, we often find it more convenient to use them. Consequently, through this more regular use, we feel a unique, emotional connection to them.” 1

Because mobile devices have fundamentally changed the users expectations, it’s important that designers design with a user-center design process to arrive at their solution. 

There are four mobile delivery methods that a designer can use to achieve a user-centered design: 

Mobile-specific site - which is optimized for mobile devices.
Responsive site - this type of site reorients itself for mobile devices.
Native app - an application that’s installed on the user's device. These are self-contained, and every screen of the app is defined up front. 
Hybrid app - this can offer a little more flexibility, as it’s viewed in a browser. It loads content from the web and provides users with an “app-like” interface.

"People appreciate iOS apps that feel as though they were designed expressly for the device. For example, when an app fits well on the device screen and responds to the gestures that people know, it provides much of the experience people are looking for. And, although people might not be aware of human interface design principles, such as direct manipulation or consistency, they can tell when apps follow them and when they don’t. As you begin designing an iOS app, be sure to understand what makes iOS devices unique, and learn how to incorporate HI design principles so that you can deliver a user experience people will appreciate.” iOS Human Interface Guidelines

Mobile Information Architecture (IA)

Some of the more popular patterns that are practiced in mobile and tablet design are: Hierarchy, Hub & Spoke, Nested Doll, Tabbed View, Bento Box and Filtered View.

Hierarchy pattern is a standard site structure with an index page and a series of sub pages. If you are designing a responsive site, you may be restricted to this; however, introducing additional patterns could allow you to tailor the experience for mobile.

Hub & Spoke is pattern gives users a central index from which users will navigate out. It’s the default pattern on Apple’s iPhone. Users can’t navigate between spokes, but must return to the hub instead.

Nested Doll leads users in a linear fashion to more detailed content. When users are in difficult conditions, this is a quick and easy method of navigation. It also gives the user a strong sense of where they are in the structure of the content due to the perception of moving forward and then back.

Tabbed View is a collection of sections tied together by a toolbar menu. This allows the user to quickly scan and understand the complete functionality of the app when it’s first opened.

Bento Box or dashboard pattern brings more detailed content directly to the index screen by using components to display portions of related tools or content. This pattern is more suited to tablet than mobile due to its complexity. It can be really powerful as it allows the user to comprehend key information at a glance, but does heavily rely on having a well-designed interface with information presented clearly.

Filtered View allows the user to navigate within a set of data by selecting filter options to create an alternative view. Filtering, as well as using faceted search methods, can be an excellent way to allow users to explore content in a way that suits them.

It’s important to understand how mobile and tablet interactions differ when compared to their desktop counterparts and designers need to consider the above methods and patterns throughout the entire design process - from R&D (Research & Development) to the final product - when designing for mobile because they impact the user. 


There are also some interactions designers need to pay attention to when designing for mobile and tablet devices. These include: ergonomics, gestures, transitions, and mobile-specific interaction patterns.


Ergonomics
It’s important to pay attention to device dimensions as well as the practical components of a device. The way the user holds the device can influence how easy it is for the user to reach parts of the screen or “hit areas.” These are the areas of the screen the user touches to activate something and require enough space for the user to touch - the smallest button size is 44px square. 


Gestures
All devices enable gestures which makes it a crucial component of mobile interaction design. Some of the gestures include: press, long press, double press, small swipe, large swipe, pinch/spread. There are some standards and patterns for developing gestures on touch-based devices that you can read more about here. 


Transitions
These are interactions between application states that help tell a story or establish a gestural metaphor, and they help facilitate recall and prevent users from getting lost. Some of the basic interactions include: 

Common Patterns
Because mobile devices have less space, along with the users viewing conditions often affecting their experience, it can be a challenge for designers to provide users with an efficient and positive user experience. Some of the most valuable interaction patterns include those used to improve navigation, select content, sign in/out, and negotiate forms.

Main Navigation
Main or “primary” navigation is a visual manifestation of our website's or application’s information architecture.

Selecting Content
Pressing links to activate content facilitates flow, making it easy for the user to quickly select content with one hand. If done well, this transition also increases user engagement.

Sign-In
Entering a username, email and password is an essential process for some applications. As designers, we can ensure that it’s as painless as possible.

Forms
Filling out forms on a mobile device can be a frustrating experience, especially if that form appears on a website designed for a desktop and lacks a mobile version. Make the process easier for the user by paying attention to the small details. You can also use native forms.


Getting the interactions accurate on a mobile device is essential. Today’s solutions become tomorrow’s standards and guidelines. It’s important to keep in mind the details that define a mobile layout and mobile-specific interactions. In doing this, designers can create intuitive mobile experiences that are then translated through the visual design. Below are some additional things to keep in mind when designing for mobile and tablet.

• The structure of the layout needs to be taken into consideration as well as how to best utilize the available screen space; a grid system will help to achieve this. 
• Keep in mind that on a mobile device the user typically only moves vertically through content, whereas on desktop, the user is able to view content in any direction one wants. 
• Interactions must be user-friendly, and the visuals need to reinforce those interactions. 
• Sizing and placement of elements should ensure ease of use, and space to scroll and swipe must be sufficient to allow a user to easily navigate through these elements. 
• Group like or related items and establish a vertical rhythm that supports the communication of the content hierarchy. 
• As previously mentioned, by utilizing a grid system and placing elements on the baseline grid, it will make reading and understanding content easier, as well as create structure within the design.
• And finally, using color is a valuable tool for communication. While it can be very subjective, it can be used to convey tone or style, to differentiate between sections, static items and interactive functionality and can also be used in communicating status changes. 

References

1. http://www.uxbooth.com/articles/designing-for-mobile-part-1-information-architecture/
2. http://www.uxbooth.com/articles/designing-for-mobile-part-2-interaction-design/
3. http://www.uxbooth.com/articles/designing-mobile-part-3-visual-design/
4. http://www.smashingmagazine.com/2012/08/10/designing-device-orientation-portrait-landscape/
5. https://css-tricks.com/a-couple-of-best-practices-for-tablet-friendly-design/
6. http://www.lukew.com/ff/entry.asp?1197
7. https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/

Web Design Elements Continued

According to Patrick McNeil, there are 10 Web Design Elements that you Shouldn’t Overlook. They are:

1. Links
2. Forms
3. Button Behavior
4. Form Validation
5. Status Messages: Errors, Warnings, Confirmations, etc.
6. Extending the Background on Larger Screens
7. Base HTML Elements
8. Website Emails
9. Page Stretching
10. Animations: Pop-ups, Tooltips, Transitions, etc.

Designers who keep the above elements in mind, plan and design for them, will come out further ahead. Aside from keeping the developers guessing, it gives the designer more control over the design of the finer details. You’ll be creating a higher quality product, and in the long run, you’ll also reduce the cost of production. Let’s take a look at the above elements in more detail.


Links
Include the following states for ALL links on your website: 

• Normal - default state of a link
• Visited - link whose target HAS been visited
• Active - link being clicked by user
• Hover - when user mouses over link

Forms
Two of the most important considerations when laying out a form are:

• Form label - description of the forms purpose
• Input fields and labels - plan for how these fields will be styled and oriented relative to the fields (inside box, above, left, etc.)

Button Behavior
The four states of a button are:

• Default - default state of a button
• Hover - when user mouses over the button
• Click - button that HAS been clicked
• Disabled - typically used for a validation process

Form Validation
This is the critical point where the website communicates the user requirements and errors in a form. There are three things to consider:

• Required Fields - these fields should be clearly indicated (usually by asterisk).
• Real-time Validation - informs the user of any problems with the data they entered
• Post-back Validation - happens after the user submitted the form

Status Messages: Errors, Warnings, Confirmations, etc.
Users typically need feedback after performing actions on websites. Be sure to consider actions that a user might go through on your website and plan for the messages that will need to be communicated.


Extending the Background on Larger Screens
If you’re not using a simple background for your website, e.g. solid color, then you need to think about how your site will look on larger screens. If you’re using an image or pattern/textured background, and you’ve designed it to a 960 pixel width, be sure to design and communicate with the developer what it will look like beyond the 960 pixel width. Does the image fade? Does it extend? etc.


Base HTML Elements
For copy-heavy websites, the design and styling of base HTML elements are fundamental and should not be overlooked. Here are the base elements to always plan for: 

• Paragraphs 
• Headings 1 through 6
• Unordered and Ordered Lists
• Tabular Data
• Form Fields
• Images 
• Bold and Italicized text

Website Emails
Carefully review the contents of the website at the planning stage to look for any emails that might be sent. Some of the most common are:

• Mailing list sign-up confirmation
• Registration confirmation
• Form-completion confirmation (e.g. contact form)
• Order verification after a purchase

Page Stretching
How will the design of your website “stretch” to accommodate additional content? Preparing alternate versions of a layout with much more content can be extremely helpful in demonstrating how to plan for such a scenario.


Animations: Pop-ups, Tooltips, Transitions, etc.
Each of these animated elements has a distinct visual style that must be accommodated all on its own. Some of the most common places animations show up are in:

• Tooltips - those pop-ups when users mouse over elements.
• Image rotators - slideshow transitions and styles.
• Lightbox - you can style not only the lightbox itself, but also the transition to it.