Context

Throughout the previous phases, planning and analysis, the desired features and tech-stacks are determined. Here are the details:

Goals:
Help readers to understand my work experience and projects.
Allow creators to build its own portfolio.

Needed Features:
Content Management
Authentication
Accessible layout

Tech-stack:
Angular, .NET Core, and PostgreSQL

When it comes to design stage, the UI/UX design should be done. According to the information above, the interaction between system and users should be well designed.

Interface Design

There are many famous tools for UI/UX design, and one of them is Figma. I will choose Figma for my UI/UX design tool because it is the only one I am familiar with.

On the website, there will be three pages for separately About Me, Work History, and Projects. On the page of About Me, user can read personal summary and skill. The Work History page will show creators' work history, including job title, duration, company name, location, and description. Lastly, the project information will be put on the Projects page. It will illustrate the details about each project, such as project name, the links related to the projects, technical stack, etc.

At the top of the website, user can read different contact information, for example, email address, links to LinkedIn profile, links for downloading creator's resume.

That is all contents not only contained in the website, but also created by creators. After the creators logged in their account, they can update these contents through the management panel.

Under the "Needed Features", an accessible layout was specified. The mock-ups above are for desktops or tablets only. They will become terrible while displaying in a mobile device. Therefore, mock-ups for mobile devices should be developed separately. In this case, all interface designs for mobile are based on iPhone 16, and they will look like below.

Conclusion

In this phase, interface design is finished so far. However, user interface is just one of the components. There is another thing to do; that is user experience. The design of user experience will be declared after the interface design is finished.