Application Design II - Exercises

Ahmed Yaman Ibrahim (0341119)

Application Design II

EXERCISES

Week 1

Was not present for this week as I was still confirming my modules during Module Add/Drop. Referred to a classmate and was told that the week's exercise was a refresher on HTML/CSS by creating a portfolio website for ourselves.

Week 2

This week we were tasked to recreate an app page provided by Mr Razif in HTML/CSS.


We were given this page in Figma and asked to recreate it using HTML/CSS. In my first attempt I had trouble making the page responsive so I set it to be static and created the page at a fixed mobile size.


Week 3

This week we worked some more on the previous exercise in class.
After a few more attempts I was able to make the page responsive, but I chose to set a max width for the page as a full desktop-sized screen would make the main band image quite large with the code I wrote. I'll experiment some more to make the page more usable on a desktop screen.


Week 4

This week we were introduced to JavaScript and the HTML DOM structure, and tried out a few basic scripts on our previous exercise such as changing the color of some elements upon clicking and opening a basic side menu.


Week 5

This week we tried a few more scripts using GSAP, such as animating icons and such. We also made a basic splash page for the app and animated the side menu from last week's exercise.

Popular posts from this blog

Major Project

Image
Ahmed Yaman Ibrahim (0341119) Major Project *Professional Development Week reflection is in the Week 8 section of this post. Week 1 Ideas 1. Gamification platform for schools Based on dissertation topic - An app that gamifies the school experience for students - providing features such as leaderboards, rewards for turning in work on time and for making extra effort, as well as setting sequential objectives and class-wide goals for schoolwork and homework. Teachers would be allowed to reward students based on their performance with badges and other benefits. It would be built as a web app so it can be used with any operating system and can be simultaneously accessed from a mobile phone and a desktop. Sample layout for homepage Main features: Class subjects as individual topics with sequential objectives Reward and scoring system for work submission, to be reflected on a leaderboard Leaderboard that displays students based on performance to encourage competition Badges as a part of rewar...
Read more

Advanced Typography - Exercises

Image
26/08/20 - 23/09/20 (Week 1 - 5) Ahmed Yaman Ibrahim (0341119) Advanced Typography Exercises LECTURE NOTES Lecture 1: Briefing & Typographic Systems 26/08/20 (Week 1) Our first lecture consisted of a briefing of the module to all students followed by a lecture on our first exercise topic: Typographic Systems. We were shown excerpts of the book Typographic Systems by Kimberly Elam for reference. Typographic Systems The 8 typographic systems mentioned above are Axial, Radial, Dilatational, Random, Grid, Modular, Transitional and Bilateral. These systems are meant to serve as a sort of organizational framework for arranging type on a composition in a way that is functional and visually sound. 1. Axial System In the axial system, type is aligned to either side of an axis. This is especially helpful when organizing lists, or several bodies of text on a composition. Fig. 1.1: Axial system examples 2. Radial system In this system, the type extends outward fro...
Read more

Information Design - Individual Projects

Image
21/1/20 - 24/1/20 (Week 3 - Week 7) Ahmed Yaman Ibrahim (0341119) Information Design Individual Projects LECTURE NOTES Project 1: Recipe infographic Week 3 - Week 7 Project 1 consists of creating an A3 infographic poster for a food recipe of our choosing. Lecture 2: Animation Week 3 - Week 7 Project 2 involves creating an animation (max one min.) or looping gif of the recipe. INSTRUCTIONS PROJECTS Project 1: Infographic poster I chose tiramisu for my recipe as I felt it wasn't overly complicated while also not being too simple to fit into a one-minute timeframe for the animation. I looked up a few recipes online to figure out the most common elements in the recipe and began sketching how I could lay out the poster. Fig. 1.1: Project 1 (Layout sketches) I then moved to Illustrator to visualize the design better as I went along creating it. I decided I'd try an isometric design for the tiramisu illustration, so I created a basic i...
Read more