User Interface′s Conceptual Framework & Principles Step 1. Define Your UI Pr

User Interface′s Conceptual
Framework & Principles
Step 1. Define Your UI Project Objectives: (PDF Report)
– Clearly identify the purpose and goals of your website or application project.
Considering the business related industries that related to your interests such
as Digital Marketing Agency, E-Commerce Stores, Online Learning Platforms,
and others. This will help you stay focused and ensure that your design aligns
with the desired outcomes.
– Outcome: 100 words of the project desсrіption
Step 2. Research and Gather Inspiration: (PDF Report)
– Explore existing websites or applications similar to your project idea from the
available resourcessuch as Printerest, Behance, and others. Analyse their user
interface designs, layouts, and functionality to gather inspiration and identify
best practices that you can incorporate into your own design focusing on
delivering user-friendly and strong branding identity.
– Outcome: 5 pages if user-interface research references based on design
choices.
Step 3. Create Wireframes and Prototypes: (PDF Report + Prototype Link)
– Begin the design process by creating digital wireframes on Canva, XMind, or
Office, and create a basic prototypes using tools such as Figma, WIX, or Adobe
XD . This will help you visualise the layout and flow of the user interface, and
allow for early feedback and iteration. Be reminded that the free version is
adequate to complete the project.
– Outcome: Wireframe + Prototype using the tool of your choice
Step 4. Develop a Visual Aesthetics: (PDF Report + Prototype Link)
– Select a colour palette, typography, and imagery that align with your project
objectives. Create a consistent visual style across all pages or screens to
ensure a unified and professional look and feel.
– Outcome: Visual look and feel of the previous wireframe + prototype link to the
Figma/WIX or Adobe XD platforms.
Step 5. Design for Usability: (PDF Report + Prototype Link)
– Prioritise usability by creating intuitive and user-friendly interfaces. Consider
user flows, information hierarchy, and accessibility guidelines to ensure a
positive user experience.
– Outcome: 5 pages of user-friendly navigation chart stating user flows
throughout the platform. E.g. When users interacting with the home pages,
what are the options to go for next steps with a call-to-actions such as buttons,
highlighted links, or multimedia.
Step 6. Incorporating Creative Programmes: (PDF Report + Prototype
Link)
– Utilise tools like Canva, Adobe Photoshop, or Adobe Illustrator to create and
edit multimedia assets such as images, videos, or icons that enhance the visual
appeal of your design. Make sure that you import all creative assets and assign
its features and functions effectively.
– Outcome: 5 pages of creative original visuals that implemented by student′s
own work such as logo, color theme, visuals of products and services,
photographs, and videos.
Step 7. Build a Complete Site with Figma/WIX: (PDF Report + Prototype
Link)
– Utilise the Figma/WIX platform to bring your design to life. They offers a userfriendly drag-and-drop interface, allowing you to easily build and customise
websites based on your creative approach. The ideal complete site consists of
Home Page, Menu Bar, Footer, About Page, Product/Service Page, and
Contact Page. You are also have the flexibility to implement the social media
account that compliment your UI project.
– Outcome: complete website with Figma/WIX
Step 8. Ensure Responsiveness and Encourage Interactivity: (PDF Report
+ Prototype Link)
– Test your design on various devices and screen sizes to ensure that it is
responsive and adapts well. Use Figma′s responsive design features or WIX′s
built-in responsiveness options to make necessary adjustments.
– Outcome: Test website for responsiveness and interactivity
Step 9. Conduct Self-Usability Testing and Review Submission: (PDF
Report + Prototype Link)
– Validate your design by conducting self-usability testing before submitting your
final project for a review. Be reminded that the fully-functional and visually
appealing projects will be the key to be approved for the final project
presentation. The format will be a pdf report that includes all progressions from
the beginning of the course with prototype link.
– Outcome: Usability tests
Step 10. Final Project Presentation Preparation: (PDF Report + Prototype
Link)
– Build final project presentation
– Outcome: 10 slides of the final project presentation