Weekly notes of what I learned about web design this summer.
Throughout this week we made more custom UI designs and started submitting some our prototypes and designs into a contest where we could vote on the ones we liked. We also fixed up our coded website and double checked it for bugs and errors using these websites our teacher gave us. One day we also made custom logos in Adobe Illustrator. To close this course, we had a quick review of everything we learned and had an awards ceremony on the last day.
This week we were given a lot of time to create and perfect our designs on XD. Using the given class time, I created many different designs on XD and put some of them onto the homepage of my website using fancy box. We were encouraged to look on websites such as one page love to get inspiration and examples for our own websites. One day we went out to take our own pictures around campus that we could then use on our website designs. That same day we designed our own logos. After this little lesson, we continued to work on our final projects.
The focus of this week was on prototyping our different website designs. To prototype our designs we used Adobe XD. The first thing we did was create and design our sub pages that we then connected to our home page to prototype. We then learned about the different web design terminology like IA, UX, and UI. In this lesson we also learned about the steps web designers typically take to create a professional website. Some of these steps are making wireframes, site maps, and mockups. Using all the information and tools our teacher gave us, we started working on our final projects.
This week we focused on computer graphics. We were introduced to the different types of computer graphics such as raster and vector at the beginning of the week. Then, our teacher showed us the digital media software we could used to design these different graphics. The applications he introduced us to all belonged to Adobe. We went deeper into two of these applications. These were Adobe photoshops which is used for raster graphics and Adobe illustrator which is used to design vector graphics. We were then told to play around with these applications and just have fun with them so we could get to know how to use them. Using these digital media softwares applications, we designed and fixed up our original summer logos. Next, we were introduced to Adobe XD, which is used to prototype websites. Using Adobe XD, we got to prototype our own web sites. This is my web site prototype I created using Adobe XD: My Prototype.
At the start of the next week, we had to delete all of the CSS we uused for styling last week. This then enabled me to add essential HTML and CSS, like common structural markup (ex. header, nav, footer, etc.). Next, I made my first three lists on my homepage that are category-based. Two sub pages were then made to keep the home page company (abot.html and blog.htmml). My About page will show you the links to the main rescourses and technologies I used and learned about in class. My Blog page will tell you a short summary of what I completed in class by week. As this week came to a close, I had a live, working web site with three pages: Home, About, and Blog.
The very first thing we did was set up a live website on Githb using an accont Mr.G already created for us. The root username respostitory I created was then named iwebstudent001.github.io. Next, I had to clone my repo and local computer desktop together using the Terminal app. Using a code editor known by the name of VS Code, I edited the readme file (using a langage called markdown). Inside VS Code, I then created an index.html file (the home page) and a style.css file. Each day as class came to an end, I had to save my changes using a procedure where we saved, commited, and pushed using github. Finally, as the week came to an end, there was a live, working website I could call my own: https://iwebstudent001.github.io