Hey guys, In case any of you are interested in web or graphic design, I'm thinking I will post a little about the work I do for Simply Three. Just now (it's 1:45AM) I finished making the new splash/landing page for the site. It's the one that has links to iTunes, Amazon, and Google Play and says "enter site" (I will probably update it as of April 23rd, when our new music video comes out). I have been wanting to make a landing page like this for quite some time now, and since our debut album was just released on iTunes, etc., I thought it would be the absolute perfect time to make one! To see it, click here.
The way I get my ideas is by looking around at other artists' websites to see what they do. Today I mainly referenced maroon5.com. Their landing page used to be the tour dates with Owl City, but now it is the new one featuring Kelly Clarkson and the Civic Tour. Anyway, I really like their top bar, the one that stretches across the screen and says enter maroon5.com with those symbols " »«". So I basically stole this top bar, except I made it in our color blue and our font. There are so many little details that need to be sorted out, and this all takes time. For instance, how do you type the «» symbols?! Well, since I work on a PC, I google "windows alt codes", and there is a list of special symbols/characters that you can type via your PC, using special codes. So you can scroll down and find "»«" and discover that they are alt+0187 and alt+0171, respectively. Try it! If you own a PC, go to type somewhere, and then hold down the "alt" button, type "0171" on your number pad, then let go of the alt button. Voila! When I discovered alt codes even existed I was excited for like six hours.
Well, our site is Wordpress. If you're looking for a website that is FREE, and can handle ANYTHING YOU CAN IMAGINE, go with Wordpress. We used to use Weebly, and I looked into other sites like Wix, but Wordpress is just sooooo much better, and it's FREEEEEEEEEEEEE. For goodness sake people, the choice is clear. All you have to do is learn a bit of .php .html/css coding. And it's a piece of cake once you figure out the underlying rules. Seriously; if you have questions, leave them in the comments below. I would be happy to answer basic questions, and for more complicated coding questions, I can direct you to somebody who will know.
So about the new splash page: All in all, in order to make the splash page, I first needed to create a custom page template. Piece of cake. I just copied one that already existed then renamed it "splash." Then, I had to figure out how to change the current header and footer (basically, I just wanted to delete them, so I could start from a blank slate). Well, the header.php and footer.php files are separate files, and the rest of the website is using them. So I discovered you can create custom header and footer files (header-splash.php and footer-splash.php). I had no idea you could do this, so I was excited when google showed me this morning! So again, easy; I just duplicated my current header.php and footer.php files, renamed them as stated before, and then started deleting chunks I didn't want. Then, once I ran it down to the bare essentials, the rest was CSS; styling what was there. This always takes me forever, since I never actaully learned how to do it. Granted, I have learned by doing, but my knowledge is limited. So I open up Mozilla Firefox, right click, inspect element, open up the style inspector, and start guessing properties that I think would work and just see what happens. Chrome also lets you do this in real time, without refreshing, but I like Mozilla's layout better.
For the buttons with the logos, I used Photoshop to resize the icons, saved them as a PNG, then uploaded them to my server (images/file.png). Then I used the background property in CSS to put the image behind the box of text (ie. BUY ON ITUNES). Then, to get the text below the image, I just used margin-top (or was it padding?) to move the text down below the image. I had to be sure to add "center no-repeat" to my background images, cuz they were repeating down the span of the padding. As you can tell, it was just guessing and checking, moving things around, then googling to find out how to do something I was struggling with, like "css center multiple links" to get all three of those images/links to be centered with each other. There were lots of other things involved in making the splash page, but that was the gist! All in all, I think I have been working for 5 hours straight tonight. And I worked a couple hours on it earlier today, too. I am a perfectionist, so I don't stop until it's just the way I want it!
Well, that was all stream of consciousness and confusing I'm sure. But it's 2:03AM; what else did you expect? :) Again, if you have any questions for me, I will be happy to answer them! Sign in and comment below.
Zack