Arrange Studio
The goal was to demonstrate working knowledge and application of advanced layout methods utilizing one of the frameworks covered in the Web Design &Interaction class.
Time: July 2020 – Aug 2020
Tools: HTML, CSS, Bootstrap
Role: UX/UI Design + Developer
1. Planning
To build a website, I need to make a plan and collect data first such as writing concepts, contents, and collecting images before starting to work on code. In terms of topic, I choose an interior studio website. First of all, I created a stylesheet first that includes the logo, color scheme, and fonts. After that, I collected images that reflect the theme of the website. About layout design, I used a carousel for banner and a card to lists their service.
2. Process
I created low fidelity wireframe and then I started to code a banner and navbar first. I resized images by using photoshop and add buttons on different locations for each carousel slide. After finish the banner and navbar, I worked on building cards. For each card, I changed the colors from the theme. Next, I coded a form for contact information. Lastly, I typed content and test the website.
3. Refelection
I’m happy to know the bootstrap technique. It was a challenging project since the class tutorial was not enough. However, I was able to build a website successfully. Learning and using bootstrap is a great experience as a student who wants to be a developer.