1. Procedure Title
Name of the Process: Website Mockup
2. Purpose
Brief Description: A website mockup is a visual representation of a web page’s design, typically used in the early stages of web development.
3. Scope
Involved Areas: Graphics
4. Responsibilities
Roles and Responsibilities:
1. Understanding Project Requirements
Responsibilities:
- Collaborate with stakeholders to gather detailed requirements.
- Understand the target audience, business goals, and desired functionality.
- Align the mockup with the project’s objectives and branding guidelines.
2. Designing the Visual Layout
Responsibilities:
- Develop a clear and visually appealing structure for the website.
- Include key elements like headers, footers, navigation menus, buttons, and images.
- Ensure proper placement of content for readability and accessibility.
5. Definitions and Key Terms
Glossary:
Wireframe: A low-fidelity, skeletal outline of a website layout focusing on structure and functionality.
Prototype: A higher-fidelity, interactive version of the mockup that demonstrates user interactions and navigation flow.
UI (User Interface): The visual elements of a website, including buttons, menus, and overall layout.
UX (User Experience): The overall user journey and how intuitive and satisfying it is to navigate the website.
Responsive Design: A design approach ensuring the website adjusts seamlessly across devices and screen sizes.
Call-to-Action (CTA): Interactive elements (e.g., buttons or links) encouraging users to take specific actions like “Sign Up” or “Learn More.”
Typography: The selection and arrangement of fonts to convey the website’s message and aesthetic.
Color Palette: The set of colors used consistently throughout the mockup to reflect branding and improve aesthetics.
White Space: Empty space between elements that improves readability and layout clarity.
Grid System: A framework used to structure and align visual elements within a mockup.
Navigation Bar: A menu system that helps users move between pages or sections of the website.
Placeholder: Temporary elements (e.g., “Lorem Ipsum” text or dummy images) used until final content is ready.
Style Guide: A document defining design standards, including colors, fonts, and spacing, for consistency.
Visual Hierarchy: The arrangement of elements to prioritize their importance, guiding the user’s attention.
Hero Section: The prominent section at the top of a webpage, often featuring a headline, image, or CTA.
6. Procedure Details
6.1. Preparation and Prerequisites
The preparation process for a website mockup involves defining objectives, understanding the target audience, and gathering requirements like content and technical needs. It includes researching design trends, creating user personas, and planning the site structure with sitemaps and wireframes. Tools, assets, and design systems are set up to ensure consistency, and initial ideas are aligned with the client for feedback before starting the design. Proper preparation streamlines the process and ensures a functional, user-focused outcome.
6.2 Timeline for Task Completion
The total time to create a website mockup can vary depending on several factors, such as the complexity of the website, the level of detail in the mockup, and your experience.
6.3. Step-by-Step Procedure
Creating A New Folder
- If it’s a new client, click the “+ Project” button in Figma and name it accordingly.
-
Ex:
-
Acronyms – Full name of the client
- AS – Authority Solutions
- Take note that the acronyms should all be capitalized.
- Click the “Design file” button in the folder you created. Name the file according to the type of project you are working on.
Ex:
- For Mock-up Websites or any related to website creation
- Client acronym – Mock-up Website
- DBH – Mock-up Website
- AS – Black Friday Sale Mock-up Website
- ARSH – LeadGen Mock-up Website
- SCFO – Blog Mock-up Website
-
For other graphic projects
- Client acronym – Title of the project
- AS – Social Media Banners
- BCC – Brand Guidelines
- CPA – Blog Featured Images
- Inside the Design File, there are pages displayed in the upper left corner of the screen. You can label them with names like new versions, final, or approved layout, etc.
Ex: V1, V2, Animation, Color scheme, Final layout, etc.
Website/ UI/ Landing Page Notes
- When creating a homepage, there should be a subtitle, title, description, and four bullet points. The same applies to the child pages.
- Always use the Grid960 grid for spacing consistently across all websites.
- The CTA buttons’ colors should be vibrant on the website, utilizing principles from color theory such as triadic, complementary, and split complementary schemes to ensure they stand out effectively.
- Description text should be 16 pt is the smallest, and 22 pt is the maximum size of the font.
CRO for Home page, About, Services, and Blogs
Main CRO Tips for a Website
- State your business clearly. Don’t make site visitors dig for what you’re all about. Make it clear up front why your business exists and what it does.
- Make your value proposition simple. write in simple, clear language why people should care about your business or your product.
- Have a clear call to action. What is the primary action you want customers to take when they come to your site? You might want them to:
Buy a product, read an article, install an app, click a link, watch a video, Request more information, or Share with a friend
Whatever it is, highlight that action on the page, and then optimize the page’s design to make it clear that’s the next step.
- Offer clear support/customer service information. Make the service and support contact information visible on the page, giving customers an easy way to get in touch with you.
This is especially helpful for companies that sell services or products. Customers want to know that if something goes wrong, they have options for getting assistance.
- Offer third-party validation/testimonials.
- Be trustworthy.
- Focus on your customers’ needs (not yours). Don’t let your own experience overshadow your customers’. Ensure that your website is professional, functional, and fully in service to what your customers need to feel confident in your company.
About Design
- Keep the design simple, fresh, and unique.
The homepage should answer – who you are and what you do. Don’t overload your homepage with a lot of text and images.
- Showcase your products and services
- Website Purpose Your website needs to accommodate the needs of the user. Having a simple clear intention on all pages will help the user interact with what you have to offer. What is the purpose of your website? Are you imparting practical information like a ‘How to guide’?
- F-shaped Pattern Reading the F – based pattern is the most common way visitors scan text on a website. Eye-tracking studies have found that most of what people see is in the top and left areas of the screen. The F-shaped layout mimics our natural pattern of reading in the West (left to right and top to bottom). An effectively designed website will work with a reader’s natural pattern of scanning the page.
- Visual Hierarchy This is done by size, color, imagery, contrast, typography, whitespace, texture, and style.
- Content an effective website has both great design and great content. Using compelling language great content can attract and influence visitors by converting them into customers.
- Grid-Base Layout Grids help to structure your design and keep your content organized. The grid helps to align elements on the page and keep it clean.
6.4. Tools and Resources
Software Tools
1. Design and Wire Framing Tools
These tools help in creating the visual layout and structure of the mockup.
- Adobe XD: For wire framing, mockup design, and interactive prototypes.
- Figma: A collaborative tool for designing and prototyping in real time.
- Sketch: Popular for creating high-fidelity mockups with an intuitive interface.
- InVision: Combines design and prototyping with feedback features.
- Balsamiq: Simplifies creating low-fidelity wireframes quickly.
2. Graphic Design Tools
These tools enhance visual elements like images, icons, and branding assets.
- Adobe Photoshop: For detailed image editing and pixel-perfect designs.
- Adobe Illustrator: Ideal for creating vector-based graphics and icons.
- Canva: For quick design elements or pre-made templates.
7. Safety and Compliance Measures
Applicable Regulations:
Privacy Compliance: Include links for privacy policies and terms of service. Design cookie consent banners and minimize data collection in forms.
Accessibility: Use WCAG-compliant color contrast, alt text placeholders, and keyboard-friendly navigation.
Security Features: Mockup secure login options (e.g., 2FA), masked passwords, and HTTPS indicators. Avoid displaying real or sensitive data.
Content Safety: Use placeholder text/images and include moderation tools for user-generated content.
Legal Compliance: Design spaces for disclaimers, age verification, and industry-specific compliance (e.g., HIPAA, PCI DSS).
User Communication: Create designs for alerts, warnings, error messages, and CAPTCHA-secured forms.
Testing and Documentation: Plan for usability, security testing, and maintain design version control.
8. Quality Control and Evaluation Metrics
Performance Indicators: It focuses on visual appeal, usability, and alignment with project goals. Key aspects include consistent design elements, brand alignment, clear navigation, and accessibility. The user experience is assessed for logical content flow, simplicity, and mobile responsiveness, while content is evaluated for clarity, hierarchy, and balance. Functionality checks ensure required features are well-placed, and client feedback confirms alignment with goals. Finally, the mockup is evaluated for feasibility in development and scalability, ensuring it meets both design and technical requirements.
9. Exception and Problem Handling
Assess the problem’s scope and impact on the design process or timeline.
- Be open to revising the design or project plan to address challenges.
- Set clear boundaries for revisions to prevent scope creep.
- Explore different tools, resources, or design approaches if the original plan fails.
- Utilize templates or pre-made assets to save time when under pressure.
- Test mockup compatibility across tools and platforms to identify issues.
- Collaborate with developers to ensure technical feasibility.
- Reflect on the situation to identify lessons for future projects.
- Document the issue and solution to improve processes and prevent recurrence.
10. Documentation and Record Keeping
Documentation Requirements: Figma and SOP Google Drive
11. Procedure Review and Update
Review Frequency: This procedure may be updated in the future as new apps or programs are updated annually.