Project 1 & 2 - Landing Page Design Prototype / Working web
Jennifer Huang / 0352990
Bachelor of Design in Creative Media
Interactive
Design
Project 1 - Landing Page Design Prototype
Our task is to create a landing page for an existing website of our choice that we feel has a design problem. A landing page is the first page that visitors see when they arrive at a website, and it is crucial for making a good first impression. landing page should be designed to improve the user experience and address the design issues we have identified on the original website.
Instructions:
Choose an existing website with design problems that we would like to address. Analyze the website's design and identify the areas that need improvement. Develop a concept for the landing page that addresses the design issues and improves the user experience. Create a wireframe or a mock-up of our landing page design. Develop your landing page prototype using any prototype software of your choice (Figma or Adobe XD).
Deliverables:
A one-page design concept that describes our landing page and the design issues we're addressing.
landing page will be assessed based on the following criteria:
The creativity and effectiveness of your design concept.
The quality of your wireframe or mock-up.
The overall user experience of your landing page.
Reflection on your e-portfolio.
Requirements:
Your landing page should include a clear and concise headline that describes the purpose of the website. The landing page size
width is 1366 pixels. Follow the preset in Figma or Adobe XD. The landing page should include a call-to-action (CTA) a button that directs users to the most important part of the website. It should be visually appealing and easy to navigate. The landing page should adhere to web design best practices, including accessibility and usability.
CHOSEN WEBSITE
For this Project, I chose the website from Kemdikbud Indonesia. Basically this website belongs to the Ministry of Education and Culture in Indonesia.
Link : https://www.kemdikbud.go.id/
Figure. 1 (Original Website Design)
The reason I chose this website is simply because I don't like the overall design and to be honest it could be better. The design has a weird placement of the navigation button (In the middle) Secondly, the design is old and boring, its simply unacceptable especially for an education website which should be at least colorful and organized to gain more interest to viewers. So yeah, I would like to re-design this website's Landing page into my own preferable design.
WIREFRAME DESIGNS
Before Making the Landing Page, I made 5 different Wireframes to explore and figure out the best layout to be used for the final design. Before doing the wireframe I did some research and manage to find inspirations on pinterest so it was rather quite fun process. This mockup and the Final design later was done on Adobe XD.
Figure. 2 5 Wireframe designs.
This was the first attempt in making wireframes for landing page design. I was completely lack of exploration and courage to try out different layouts back then. As you can see, the layouts are just moved into different placements. And when I thought I might love the result (Fifth Wireframe), It hits me that it turned out totally different from what I want it to be. So then I explore more concepts and redesign the whole thing.. Also I haven't found the right font to be used.. so yeah, definitely needs more improvement.
On class, Mr. Shamsul gave some feedback regarding my design that day. as in navigation panel its rather old design if I put it that way so its better to put it bellow, change the home logo into the Ministry logo. To make the headline readable, drop a gradient behind it and reduce the opacity. The rest is okay. Mr. Shamsul also stated that its important to pay attention to the white spaces in the design.
Figure. 3 First attempt of landing page design.
Here's the second attempt, I finally get that minimalistic and
clean design, But I'm still not entirely satisfied with it so then I
modified and changed more.
Figure. 4 Final Landing Page Design
So then, This is the final landing page design that I've finalize. In
this design I tried to place different layouts for the pictures and
texts so that it'll be less boring, also dropped shadows behind images
so viewer can feel the design more interesting and not flat. Overall,
I'm quite happy how it turned out in the end. The goal of my design is
to keep it clean, minimalistic, to the point, readable and
interesting.
Project 2 - Working Web
Use HTML and CSS to translate the design elements into code, ensuring a faithful representation of the original prototype.
Aim for pixel-perfect precision while maintaining responsive design principles to ensure compatibility across different devices and screen sizes.
Upload the file in Netlify and submit the link here. Update your e-portfolio with all the processes documented in the blog.
Learning Goals :
1) Strategic Communication Competencies - Conduct oral and verbal presentation to persuade and illustrate ideas and concepts in a multidisciplinary setting as a team or an individual.
2) Critical Thinking Competencies - Use ideation strategies to synthesize assess and evaluate prototype product outcomes for further development.
These are some screenshot of the index.html of this website..
.png)
Fig. 5 html code.
Css code that are used for the website include..
.png)
Fig. 8 Final Website
FINAL REFLECTION
I've learned a variety of information and abilities that have helped me become an expert web developer as a result of the coding and creating a responsive website. I am an expert in HTML and CSS and recognise their critical importance in producing and styling digital content. I can now create websites that fluidly adjust to different screen sizes thanks to my adoption of responsive web design principles, delivering an excellent user experience on all platforms. My attention to detail has improved as a result of this experience, where I've learnt how to perfect media queries, typography, and layouts. In addition, I've developed skills for problem-solving and troubleshooting, overcoming difficulties that arose during the development process. My understanding of user experience (UX) has substantially increased, and I now place a strong emphasis on the value of user-centric design and readability. Overall, the experience of creating a flexible website through code and design has given me useful skills, a sense of success, and the will to continue developing as a web developer in a constantly changing digital environment.
Comments
Post a Comment