Concept and Initial Communication

The initial plan for this website was simple: create a website informing the most sushiness as possible. From my initial meetings with Emily Huang, our plan was to create a website that had a black theme with some rough textures in touch so that the website itself would look like a premium omakase place. We did not limit how many pages this website would have, and she allowed me to decide on that development. So I initially planned the website to be in this way:

Understanding the Topic

Since the topic was to describe sushi, it was not difficult to find sources from which I can draw different information on sushi. For the content of the website, I have searched through the websites that I discussed with Emily (Wikipedia), and the websites of other sushi restaurants and omakase places. It gave me a clear idea for what to have on my website overall.

Communication Process with my Creative Director

After each draft of my website, I met with Emily to receive comments and generally discuss the ways in which we can improve this website. She mainly gave me comments on the design directions, especially on the use of colors to give differentiation between content, usability of the website (which connects to formatting and the size design of each page within the website), and overall smoothness when using the website.

I translated those feedbacks onto my website through the following ways:

Challenges and Successes

Challenges

One of the challenges that I mainly faced during development was in formatting. The sushi website required a lot of content, and it was a little difficult to create a balance between the content, image, and blank space. That is also connected to my second challenge: scaling. Some images, depending on what I had, needed to be rescaled so that they did not look pixelated or too big in comparison to the other images. I also had to be mindful of different screen sizes when the website was being used, so I had to make the image size flexible enough for people to use on wider screens.

Successes

One success that I had while making this website was providing content and finding images (not altering them to fit in the website, but actually finding the images sources). Also, I had success in the initial building of the website including the design process and the coding process, since it was based off of everything that we learned in class and JavaScript learned process.

When AI Was Used

Most of the time, I have used AI when dealing with codes that required a use of JavaScript language. I have especially got help from AI in understanding how to make cards and other individual elements smoothly moving in and out of the website. Besides that, I asked AI about the design directions and in finding websites that are similar to what I would want to design. Some AI was used to generate content as well, but that use was minimal.

Final Reflection

Overall, the website really helped me to improve in HTML and CSS design. In order to create a website that was smooth and interactive, I had to study JavaScript and dive deeper into HTML and CSS. I learned a lot from both giving feedback to Esther and getting feedback from Emily, and learned more about the general process of how a website is created. From implementing my learning into the actual website, I had to remind myself of some principles of design like Jakob's law and the gestalt principles. Such practices gave me a more solid foundation in website design, which I feel I could use for the future of my website design.

Tools Used for this Project

Figma

I used Figma for visual design practice and formatting. It helped me to visualize what the website would look like before translating them into the actual HTML website.

VS Code

I used VS Code for the actual website, both HTML and CSS. I also included some JavaScript into the code as well.

Photoshop

I have used Photoshop for rescaling and editing images to fit into my website.