Interactive Design / Exercises
Derin / 0354969 / Design in Creative Media
GCD 60904 / INTERACTIVE DESIGN
Exercises
INSTRUCTIONS
1) Web Analysis (Week 2)
Your task is to analyze an existing website and identify areas for improvement. This exercise will help you develop your critical thinking skills and gain insights into web design best practices.
Your task is to replicate an existing website to gain a better understanding of its structure. This exercise will help you develop your design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices.
3) HTML and CSS Document Development (Week 6)
4) CSS Layout (Week 8)
Technical And Digital Media Competencies – Demonstrate creative use of software, and effective use of digital media skills to promote or communicate design concepts or solutions.
- app 3/4 grid system
- web 12 grid system
- grid system is important as it helps aligning information
- studies show that people read in F pattern
EXERCISES
Exercise 1 / Web Analysis
Fig 1.1 Written Web Analysis
Exercise 2 / Web Replication
For Exercise 2, we were assigned the task of replicating the landing pages of two existing websites using Photoshop or Adobe Illustrator. This exercise assists us in honing our design abilities using software such as Photoshop or Adobe Illustrator, as well as to gain insight into the best practices of web design. The two websites I selected were People by Wagepoint and Ocean Health Index.
During class, Mr. Shamsul taught us a method for capturing a full-size screenshot of a website, which I find was super efficient instead of the long and old-fashioned way. I began the exercise by inspecting the website, which enabled me to obtain the text's font styles, sizes, and colors used across the website by hovering over the elements.
|
| Fig 2.1 Website inspection - People by Wagepoint |
Fonts used: Copernicus Bold Regular, Sailec, Sailec Bold
|
| Fig 2.2 Website inspection - Ocean Health Index |
Fonts used: Arial Regular, Arial Bold, Arial Black
People by Wagepoint
After downloading all the fonts used in the landing page, I began to replicate it using Adobe Illustrator. I personally prefer this software over Photoshop because it provides smart guides, making it easier to align objects accurately. The following is my process work step by step.
|
|
|
|
|
As I couldn't locate the icons and images I initially used on the website, I resorted to using a stock image website recommended by Mr. Shamsul for pictures and another site for icons. While it may not be an exact match, I ensured that the point size, font, colors, and other elements were consistent with the original design. Through this exercise, I gained a deeper understanding of layout and positioning in web designing, and I look forward to applying this knowledge.
|
| Fig 2.4 Final outcome - People by Wagepoint |
Ocean Health Index
|
|
|
|
Fig 2.4 Process work - Ocean Health Index
I found this website easier to replicate since its lading page was shorter. Additionally, I chose this because I found the theme aesthetically appealing. The process of working on this website was enjoyable as I had the opportunity to experiment with the gradient tool. I used the stock image website again for the background and floating cards, so again, it's not 100% accurate to the original. Overall, I am pleased with the outcome of my replication.
|
| Fig 2.5 Final outcome - Ocean Health Index |
Exercise 3 / HTML Personal Profile Page
In this exercise, we are to create a personal profile page using HTML. The goal of this exercise is to help practice our HTML skills and create a webpage that showcases our personal interests.
I first start this exercise by writing down some personal information for the website's contents.
|
| Fig 3.1 Outline of website contents |
For starters, I referred Mr. Shamsul's lecture, where he provided a comprehensive overview of HTML basics. He covered topics such as implementing tags, various how-tos, and more. Due to my limited storage capacity, I opted to use Notepad instead of the Adobe software for coding. As a beginner in coding, I PRAYED and hoped that the code I typed functions as intended.
|
| Fig 3.2 Coding in Notepad |
Surprisingly, I thoroughly enjoyed working on the project and even ventured into experimenting with different background and font colors. It turned out to be less challenging than I initially anticipated. However, I anticipate that memorizing the various codes might become tedious for me in the future.
|
| Fig 3.3 Coding process |
I added some more stuff that isn't in the website link above :3
|
| Fig 3.4 Final Outcome for Personal Profile Page |
Exercise 4 / CSS Layout
We are required to create a responsive grid layout for a website, based on the provided content (text and images). The layout should be visually appealing and functional on various screen sizes, ensuring optimal viewing on desktop and mobile devices. Once we finish the task, we need to upload the exercise to Netlify and submit the link here. It is recommended to explore media queries to ensure the website's responsiveness and different link styles to enhance usability and aesthetics.
HTML Outline
Before diving into the development process, I typed down the HTML outline. This approach allowed me to establish a comprehensive overview of the website's layout and content. By visualizing the structure and organization of the site beforehand, I am able to gain a clearer understanding of how various elements would come together harmoniously. This preliminary step not only facilitated the development process but also ensured that the end result would be cohesive and visually appealing. This time around, I used Dreamweaver to do the coding since it's used by Mr. Shamsul in the demo videos.
|
| Fig 4.1 HTML Outlining process |
|
| Fig 4.2 HTML outlining outcome |
CSS Styling
Given the limited amount of text content and the presence of multiple images, I decided it would be visually better to align the text and images side by side within each section. This approach minimizes excessive white space surrounding the text, creating a visually appealing and compact layout. Additionally, I implemented a sticky navigation bar using CSS, ensuring that it remains fixed at the top of the page even as users scroll.
|
| Fig 4.3 Text and image aligned side-to-side & sticky navigation bar |
Final Outcome
After spending a considerable amount of time coding, I finally completed the exercise and uploaded the finished website on Netlify, now ready to be shared and showcased with others. :'D
The website in question:
https://derinsweb.netlify.app
|
| Fig 4.4 Final Outcome |
FEEDBACK
Week 9
bring navigation to the center
img as background image = background size cover
div = 2 divs, 1 empty, 1 content
% for sizes, padding and margin em
Exercise 4 was a real struggle for me, being a complete beginner in Coding. I found myself resorting to endless Google searches, crossing my fingers and praying that my code would actually work. It wasn't all bad, though. I have to admit, there were moments in the midst of it all where I actually had some fun. But honestly, I've made up my mind—I'm leaving that experience behind me and moving forward, never to look back again.