Lecture Notes: Website Design in Adobe XD

Overview

• Introduction to creating website designs using Adobe XD.
• Key focus on understanding wireframes and mock-ups.

Wireframes

• Wireframes are outlines or sketches of a product or screen.
• Used to figure out the overall structure of a website or app.
• Can be created on paper for quick brainstorming or digitally for refined designs.

Mock-ups

• Mock-ups are high-fidelity static designs representing the final product.
• Include more visual and UI elements to visualize the final state.
• Used to make multiple iterations without affecting functionality.

Differences Between Wireframes and Mock-ups

• Wireframes: Static images, outline content without detail or color.
• Mock-ups: Include color, typography, and iconography; help visualize user journey.

Creating a Mock-up in Adobe XD

• Process involves transforming wireframes into visual designs.
• Begin in Adobe XD by setting up artboards and referencing wireframes.

Steps to Create a Mock-up

1. Open Adobe XD and select the artboard with the wireframe.
2. Create a new artboard for mock-ups below the wireframe artboard.
3. Start with the navigation bar by:
   • Drawing a rectangle and setting its color.
   • Adding logo and text elements (e.g., Search, Discover).
4. Use the property inspector to style text and align elements.
5. Save design elements in the assets panel for consistency.
6. Use features like Repeat Grid for efficiency.

Designing Specific Components

• Navigation Bar: Create and style text boxes, align elements.
• Hero Image: Use rectangles for images and text descriptions.
• Popular Books Section: Use Repeat Grid to replicate book items.
• Footer: Match design to navigation bar, include library logo and contact info.

Prototyping and High-Fidelity Designs

• Transition from mock-ups to high-fidelity prototypes.
• Set up user flow connections and interactions.
• Use triggers and animations for dynamic interfaces.

Creating Responsive and Accessible Designs

• Ensure designs are accessible using Web Content Accessibility Guidelines (WCAG).
• Use annotations, hierarchical headings, and labels for better usability.

Design Systems

• Design systems provide reusable elements and guidelines for consistency.
• Elements include typography, color palettes, and visual styles.
• Using design systems saves time and ensures brand consistency.

Working with External Design Systems

• Import external design systems into Adobe XD (e.g., Google Material Design).
• Customize elements to fit the specific project needs.

Conclusion

• Encouragement to apply learned skills in personal projects.
• Importance of accessibility and consistency in design.

These notes provide a summary of creating website designs in Adobe XD, focusing on the transition from wireframes to mock-ups, creating high-fidelity prototypes, and ensuring design accessibility and consistency through design systems.