Design a mock website homepage.
Process (Programs, Tools, Skills)
- I took the business identity that I created for the last project and decided to create a basic homepage for that business.
- I first started by sketching out three different layouts for how I wanted the website to look. After looking at each of them, I decided to go with the sketch with the sidebar design.
- After deciding which sketch I wanted to run with, I went into Illustrator and I started to lay everything out using smart guides and my own personal guides to align everything and make it look unified.
- After creating my wireframe, I started to add in the actual content onto the page.
- My final design wasn’t very different from my original sketch and wireframe and it all was able to fit nicely together.
In class, we had two different critique processes that we did. The first one we opened our drafts in Photoshop and we would create a new layer and, using the brush tool, drew a line for where our eyes go when we first look at the page. This was to help us understand where people’s eyes go when they look at our webpage and helps us determine if our design works the way it should.
The second critique process divided everyone into small groups to give peer feedback and critique each other’s designs. These processes really helped me make my design look visually pleasing and fix some issues that I didn’t know I had.
The Workshop is here to help with all of your car problems.
Anyone looking for a reliable workshop to get their car fixed.
Top Thing Learned
One thing I learned is that I prefer Illustrator over Photoshop any day. It just is so much easier to me.
Another thing that I learned is how to crop a photo using the pen tool to create new anchor points on the image frame where I wanted the frame to crop and then just delete the outside corner points and conjoin the new corner points and it crops the photo how I want it.
Gray and Red
Title Font Name & Category
Factoria // Slab Serif
Copy Font Name & Category
Verdana // Sans Serif
Thumbnails of Any Original, Unedited Image(s) Used in the Project
Source of Each Image (website name and hyperlink)
The logo is my own creation.
The photo of the pouring oil is from Adobe Stock:
The other photos are from Pixabay.com: