INSTRUCTIONS
EXERCISE 2 - WEBSITE REPLICATION
For the second park of our interactive design exercise, we were to replicate 2 websites that had a good design. Initially, we were to replicate 2/5 of the websites chosen for our previous exercise however I found out that websites that had videos in them were not easily replicable on Adobe Illustrator as you cannot capture the full screenshot of the website's homepage. Thus, after consulting this issue with Mr Shamsul, I decided to do two good designed websites, namely:
At first I wanted to do this website replication on Figma as I'm very familiar with the software and was confident in my abilities in it however after asking Mr Shamsul once more, it turns out he specifically wanted it on Adobe Illustrator—an application I had never EVER used before. Honestly, I was worried. I had to learn how to use a whole new software AND replicate two websites in it in under a week? It was an intimidating task for sure and I definitely procrastinated more than I should have. However, as always, you just gotta keep pushing through when it comes to design! So push through I did and ventured into the realm of Adobe Illustrator and web replication.
Thankfully though, Mr Shamsul showed us a step by step process of how to do this task in Illustrator and I made sure to take the notes I could take when he was explaining. That certainly helped me out tremendously and I am very grateful I was properly and specifically guided through this process. Here is a little peek at the (awfully formatted) notes I made:
GOOGLE DRIVE LINK
(https://drive.google.com/drive/folders/1-kOGMatHw5-D9Up4IX6MvEBN3hIJS-_Z?usp=sharing)
Here is my google drive link containing all the images and icons, steps, the full size screengrab and of course, my illustrator files!
Steps
The below instructions/steps show how I broke down the website replication process from start to finish!
Step 1:
Creating an artboard image, resize it and place your full site screengrab in. After that, identify and start blocking the main sections + components of the website by using different colours to differentiate the sections. Honestly, this is optional but I like it cause it helps me visualise what kind of thing goes in which place + it helps keep everything aligned)!
Make sure you use lots of layers! In my case, I used quite a lot! The reason was so I could easily stack what goes on each other which came handy for the next few steps! Additionally, also make sure all the items (minus the text but you can if you want to) you add onto the screengrab has LOWERED opacity so you can actually follow the website layout!
Step 2:
Next, you want to block all the images and icons! This will not only help you figure out where each thing goes, but also if you're using images and icons, this will help you easily clip and mask each one and make the process wayyyy smoother!
Step 3:
Finally, add your images and typography! I saved typography for last cause naturally, text would go on top of any other visual elements such as boxes and images (which I did first)! This step took me a while because I'm still not very familiar with how exactly the text feature works in AI but I tried my best! At first, I didn't realise how little fonts actually came with so I had to go to Adobe Fonts and add a whole bunch to my creative cloud!
Font Used:
Images Used:
WeMake
.png)
Original WeMake Website Screengrab
Steps
The below instructions/steps show how I broke down the website replication process from start to finish!
Step 1:
Step 2:
Specific element blocking! This is where some of the design elements of the website come in and where I block images, icons, menus, etc!
Step 3:
Image inserting! Based on the elements blocked, insert images accordingly like this!
Step 4 (FINAL STEP):
Finally, do the typography and turn the opacity back up! Tadaaaa! Website Replication is now complete!
Font Used:
Images Used:
- All images used can be found here! The images all come from Pexels, while the icons come from FreePik (however do note that the logo images used in the website replication came directly from WeMake's website through individual logo screenshot and removing the background)
Reflection
Honestly, at first as I mentioned, it was pretty daunting. I mean—first time ever doing an exercise similar to this, first time using Illustrator, 10% of my grade—it felt really REALLY intimidating to tackle this. I ran into a few blunders with using Illustrator and I'm definitely still not adapt at it but as I progressed through, especially after I had finished the Adidas site replication, it felt SO much easier to use and is a tad bit more user-friendly than Photoshop (still prefer Figma though HAHAH). The WeMake site replication felt like a breeze cause I knew what to do and what the process was like having done the Adidas site prior. I believe I learnt a lot through this, not only in regards to my Illustrator knowledge but also my app/website design skills as well after having previously jumped right into App Design 1 AND 2 without any prior fundamentals which this module (Interactive Design) teaches. So, jumping back into learning exactly what makes a good site through replication them was so so valuable to me. From the use of white space, the use of a variety of fonts (which was sometimes a pain to type out especially if it were next to each other), a well-established colour palette that makes sense in regards to the brand identity and so much more in order to create more visual interest was so good as with my previous designs, I feel like I didn't have enough proper usage or even knowledge of that so I'm glad I'm revisiting website design fundamentals before I jump into the professional world (as my 3rd year is completely work-based learning where I'm attached to an ACTUAL proper company EEEK). I definitely enjoyed doing this, no matter how confusing and tough it can get sometimes and I really think I want to continue doing more application and website UI/UX based projects in the future as well so I can't wait to learn more through this module!
Comments
Post a Comment