Design Phase Constraints

When creating images during the design phase, a designer must consider a range of technical, aesthetic, functional, and contextual constraints. Here are the key categories and specific constraints to take into account:

1. Technical Constraints
   • Resolution and Size: Match image resolution (e.g., 72 DPI for web, 300 DPI for print) and pixel dimensions to the output medium.
   • File Format: Choose appropriate formats (e.g., JPEG, PNG, SVG, WebP, TIFF) depending on quality, transparency, and compression needs.
   • Compression and Load Time: Optimize images to reduce file size without sacrificing quality—important for mobile and web performance.
   • Color Mode: Use RGB for digital screens, CMYK for print.
   • Platform Limitations: Consider platform-specific requirements (e.g., iOS app icon sizes, responsive web design).
2. Aesthetic Constraints
   • Brand Guidelines: Follow color palettes, typography, logo use, and image styles specified by the brand identity.
   • Visual Hierarchy: Ensure clarity and focus by guiding the viewer’s attention through contrast, size, and layout.
   • Consistency: Maintain visual coherence across multiple images, screens, or sections of a product.
3. Functional Constraints
   • Purpose of the Image: Does it inform, persuade, entertain, or direct the user? This defines its composition and content.
   • Accessibility: Include alt text for screen readers and avoid color combinations that are hard to distinguish for colorblind users.
   • Responsiveness: Design for multiple screen sizes and resolutions (mobile, tablet, desktop).
   • Interactivity: If the image includes clickable elements (like hotspots), ensure proper usability and feedback.
4. Content Constraints
   • Audience and Context: Consider user demographics, cultural sensitivities, and content appropriateness.
   • Licensing and Copyright: Use only images with appropriate usage rights; avoid infringement.
   • Localization: Prepare for translation and regional variations (e.g., reading direction, symbolism).
5. Project Constraints
   • Time and Budget: Complexity of images must match available resources.
   • Tool Compatibility: Ensure image files are compatible with design tools (Adobe XD, Figma, Sketch, etc.) and developer workflows.

Summary Checklist:

Constraint Type	Example
Technical	Web: SVG icons, ≤ 100 KB; Print: 300 DPI
Aesthetic	Brand color #0066CC; Font: Roboto
Functional	Must work in dark/light mode
Content	No copyrighted stock images without license
Project	Must deliver mockups in Figma by Friday

Would you like a downloadable checklist version of these constraints for use in your design workflow?

There are a number of issues and constraints to consider when creating images for the Web. If you strategize about these issues during Design, you will be able to avoid problems during Development. The following Slide Show will illustrate three issues that are basic to using graphic images on the Web.

Members of your team in the Creative roles will have much more extensive knowledge of some of the issues and strategies around creating effective images for the Web. The three topics from the Slide Show, file formats, file sizes, and Web-safe colors, are topics that any Web professional should be familiar with.
You will be able to predict the look of your site fairly well if you stick to the 256-color palette. However, keep in mind that the same color will look slightly different on every brand of monitor, so you do not have absolute control over exact color, as you would with printed materials.
Question: What is a rough estimate of a reasonable total size for a web page?
Answer: Somewhere around 30-50 KB, including image files. This may change over time as increased numbers of users upgrade their bandwidth access, or as new developments in servers, computers, or protocols increase typical download times. Exceptions are possible when the user group is known to have access to higher bandwidths, for example, at-work users of a corporate intranet.

• Process Model
  Where are you in the Web Site Development Process Model when you are creating images? Planning for image creation occurs during Definition and Design. The actual creation of images begins to occur with sketches in the Design phase, and the heavy-duty work of image creation happens in the Development phase. Some revisions may occur during Post-Delivery, after you've evaluated the success of your signs and metaphors, through metrics, testing, and client and customer feedback. In the next lesson, you will learn the principles that guide the creation of effective type for the Web.