App for people who want to grow
EACH PERSON WANTS TO BELONG to a group, team, or community. To an environment where people share similar goals and values. Today, such environments must be easy to access and contain all sorts of resources to help its members.
overview
Client
Fictitious company that helps people to progress in different aspects of their lives.
Task
In three weeks create a high-fidelity adaptive prototype using unfamiliar software (in this case AXURE RP 10) to reach an intermediate level with the new software. Implement at least five principles of design.
Team
Solo project
(me, myself, and I)
Role in Project
Concept development
Site Map development
Choosing design principles
Prototyping
concept
This website intends to help people around the country to improve themselves in different spheres of their lives. It has to provide access to a variety of resources aimed at personal development.
Users have to be able to:
- View information about the community
- See what is going on in the community
- Join the community
- Participate in the life of the community
- Access useful resources
sitemap
On each page of the website, the user can see a menu button in the top-right corner that allows to navigate through the website. After clicking on the button drop-down menu with links to other pages appears. For the mobile version, this menu slides from right to left and covers the whole screen.
The pages are:
- Home
- Events
- Who we are
- News
- Programs
- Sign up/Log in
Principles of Design
Design principles are the rules a designer must follow to create a compelling and attractive composition. Following the requirements for the project, five design principles were implemented.
Most elements on all pages are aligned to the center and all content is aligned within its elements to create proper spacing (margin and padding).
All colors, spacing, and shapes on pages were implemented in a way to make the design visually symmetrical and balanced. In this case, it is horizontal symmetry which means that the visual weight of the left and right sides is almost the same.
All fonts and colors of fonts were implemented to highlight what text is more important and which is less important. The same principle was applied to the color of elements on the page.
The sizes and positioning of buttons on pages were optimized, so users do not have to do extra moves on the screen to reach the expected result.
All shapes and colors are systematically repeated throughout the page, so users have a consistent experience while using the website.
Prototype
During prototyping, I went through the process of creating low-fidelity, mid-fidelity, and high-fidelity prototypes. Since the main task of this project was reaching an intermediate level with new software, some small parts of prototype were not fully developed (lorem ipsum text and same stock photos).
Low-fidelity
Mid-fidelity
High-fidelity
Reflection
In three weeks website with six pages and five adaptive sizes was completed. All requirements including implementation of principles of design have been met. Because of the short term, some elements of the design were not developed properly and need to be improved.
Click on the image to see the final result →
