Diary of a Webpage - Avocado Records

I wanted to make a tutorial (sort of? not really) of how I put together my webpage layouts. Currently, I'm putting together a single page layout for my fictional record company - Avocado Records. The main things I wanted to include were spaces for a sampler tracklist, a media player and some fake advertisements...

Lets go! (๑•̀ ᴗ•́)૭✧

1. What do I want the layout to look like? Basically all my web layouts are in someway inspired by other website layouts, mainly 2000s websites because I like them the best. I always try to collect as much inspiration as possible from different sources so I don't accidentally copy someone elses. However, when I started making layouts I would practice by recreating a layout I liked just to see how it fit together - this is very helpful! Good places for layout inspiration are archive.org, 00s Blog Layouts on Instagram, Web Design Museum and CreateBlog. Pinterest is good too but the selection isn't very diverse, you can also get layout inspiration from modern websites but be careful not to get too inspired as people don't appricate getting their ideas stolen!

For this layout much of my inspiration comes from record label websites from the 2000s. Particularly, the Island Records website from 2004. Find it here!

The collage effect is awesome!

 I have never made a layout which fits together like this, so I wanted to give it ago!

2. Putting the layout on paper. This step is quite self-explanatory but before I even open PhotoShop I always make sure I've got a few sketches down of what I want the page to look like. These sketches can range from mega detailed to super simple - whatever works for you!

First sketch

3. Digital 'map'. After I'm happy with my sketches I'll create a version of the layout on PhotoShop (any editing software is good, adobe sucks!). Making a digital version of the sketch is a good way to figure out what colours and fonts you might want to use. From here - depending on what you're making - you can go straight into building your layout using CSS and HTML or stay in an editing software.

Pink and black... edgy...

 4. Making images to go on the web page. This is probably the biggest step depending on what your site is going to look like. The page I'm making here is going to be all flat colour backgrounds and tabs so I don't need to make any prior adjustments before I start coding. For this page I wanted to create some adverts and "celebrity cameo" pics to make it look more (or less) authentic. They look very silly LOL (ᵕ,,—ᴗ—,,)

Geoff Rickly of Thursday outside Avocado Records HQ!

 

 

Ryan Ross LOVES Avocado Records?!

 

 

 

I saved my images straight from PS as pngs. This means you don't have to make lots of different documents.

5. Coding the webpage. After you have all the assets done, you can begin creating your page using HTML, CSS and JavaScript (if ur fancy). W3 Schools is the best website to learn how to do this. I used to use the Neocities code editor but now I use Visual Studio Code (ew.. microsoft), VSC actually makes things loads easier. Most of my pages have the same look so usually I reuse my old code and add my new layout on top. From there the creation begins...

These days I like to use Flex and CSS Grid to build by pages which works well if you want a structured look, however, this isn't that helpful for more free flowing designs.

For a two column website both Flex and CSS Grid are great!

6. Completed Webpage! It's always fun to see sketches come to life! I like to think of layouts as being constant works in progress, and it's awesome that compared to say a painting I can keep adding and developing it whenever I want to. 

100% authentic record label

Check out the finished product: avocadorecords.net
 I hope this helps anyone or was at least fun to read LOL!