Browsing For Web Design Inspiration

Just for some ideas, I like to browse around to see what other's have done with creating web sites for particular topics. I may start working on a new website with a musician and I am searching for inspiration. Fortunately, I follow a number of independent music acts on Twitter. So it was real easy for me to find good sites for examples. 

From what I could see right away, most of the artists use Bandcamp or Soundcloud as their main web presence for their music. I think that is good. Others just use Facebook which I don't like. You can upload videos and links but FB does not seem very well geared for music. Plus people get easily distracted on FB so your message or product will get lost.

Others use Wordpress or some other blogging platform. What is great about Wordpress is that you can incorporate themes and it seems pretty easy to use. Originally, I thought about using Wordpress to create my own blog but as you can see, I went with Blogger. Wordpress is good for those who are not web developers because you can update your content without having to contact someone such as myself for help, an another web developer, or having to learn web coding languages to update yourself. I think a Wordpress site would be a good way to go but I still need to research how Wordpress would treat audio files. Here are some examples of some musician's Wordpress sites I looked at:

http://benmyersonline.com/  <-- I don't like this site but it's functional.

http://www.evertheory.com/ <-- I like this one but I think you should see the music for listening to right away on the home page.

A few other artists use a good old fashioned website without the additional blogging interface. Here's some that I like:

http://www.empathytestmusic.com/ <-- I like this site because the music is right on the homepage. Plus it looks like the music is hosted on Bandcamp's server so that saves money with web hosting (which is usually pretty cheap anyways). However I have no clue how they coded it because all I see is a bunch of JavaScript and very little HTML and CSS. But I could do something similar.

http://seasonofghosts.com/ <-- This is a really nice website. Very well put together but it seems really big.

I am still waiting for feedback on this web design, so we shall see.

Another Update to My Website

Homepage with slideshow, crumpled-ripped paper.

Super Busy! Despite all that I have going on, I managed to update my website yet again. After the last update, I was not content with the homepage, footer, about page, and wanted a slideshow. So I did those things, go check it out: http://gabrielohhmedia.com/.

The homepage needed to show off my graphic art skills and I thought it would be really cool to have some crumpled/torn up paper with text on it. First, I tried making a graphic with regular HTML paragraphs superimposed on the graphic. I hard a hard time with that so I included the text on the graphic itself. I made the crumpled up torn paper in The GIMP. Love The GIMP! I used a tutorial you can find here.

In addition, the homepage needed a slideshow, because nowadays, every homepage has a slideshow. To accomplish this, I borrowed a bit of JavaScript from a class I had last May. I just replaced the pictures and tweaked some of the timing. Worked out great. I did find that the images where taking a long time to load so I had to resize the pictures in The GIMP. Again, love GIMP!

I felt that the footer was really boring. I see footers on websites that are cooler than the content of the main article. So I wanted to spruce up my footer. Fresh out of ideas I figured I could use my header graphic, which is just a picture of me, Warholized. I flipped in the image and added some gradient. Nice.

Unintentionally, I changed the font. I wanted a different font for the crumpled up paper on the homepage. Like typewriter style. As I mentioned earlier, I wanted to superimpose my HTML text over the graphic, so I changed the article fonts to monospace. This changed the font to monospace on every page so I decided to stick with it. Plus monospace is available on every computer, making it easy on the download.

The about page, the page that explains me, is still needing some work. Maybe another picture of me somewhere. I added a gradient to the article content so as you read down to the bottom, the colors get darker. Well work on that later.

New Website Published

Examples of free art from Pixabay.com used on my site

Finally found the time to put the finishing touches on the code for To Katch A Kitty.com. It's a website about trap, neuter, release for feral cats. My goal with the site was to make it as informative, easy to read, and engaging as I could. Most of my research came from the many well established feral cat and animal welfare organizations out there such as Alley Cat Allies, Neighborhood Cats, and the Humane Society of the United States. Other bits of information came courtesy of my local animal shelter, the Placer SPCA.

Other resources for elements such as graphics and pictures were used thanks to the various Creative Commons licensed material available on Flickr, Wikimedia Commons, and Pixabay. Although most of the site's content was produced by myself, I could not have rounded up all of the the elements needed without these free-licensed materials.

Mouseover the tabby to see what message he has for you.

The website employs some of the latest CSS3 :hover techniques that I have learned recently. I used the CSS transform and transition properties on several photos to not only engage the user but to provide attribution to photos used that were not my own.

For the overall design, I wanted the main article to appear as a sheet of transparent glass hovering over the background and I think I achieved that. The images in the background are sized in percents so they change size depending on the device screen width. I used the CSS background-attachment property to fix the images to the background so that they do not move. Also, I created two additional stylesheets for screen widths smaller than 900px and 700px. I found that at smaller screen widths, the cat face graphics get in the way of the background so I removed them at smaller widths. There is also a stylesheet for the printed page that removes certain elements that are not necessary to print.

There is a bit of JavaScript on the page. I used JavaScript to help iOS devices with the CSS :hover. I also used JavaScript to include a site search bar in the footer and add some sound effects.

Overall, I am glad the website is up. It has been about a two-three month project. The site could have been up sooner but I have had some personal issues arise that has made it difficult to find time to work on my projects.

Uploaded My 1st Website

It took about 4-5 weeks but I finally uploaded my first website! I was much more excited when I was able to connect to the webhost server via FTP and finally upload my files. I had trouble with connecting to 000webhost via the file manager (to upload via the web) and FTP. Late last night I was able to connect with FileZilla and transferred all my website's files. I did put in a trouble ticket with 000webhost and received some feedback but wasn't much help.

My first website - Coding HTML with Free Text Editors for Linux

My website is about Coding HTML with Text Editors for Linux. Go to http://texteditorsforlinux.uphero.com to check it out. It took me awhile to put together the research (I actually used all mentioned editors to put together the site). I wrote about GUI-based editors Geany, gedit, Leafpad, and TEA. I plan to add some WYSIWYG editors such as Kompozer, Seamonkey, and command-line editors such as Vi and Vim later. Anyways, I hope it can be of use to others coding HTML on a Linux-based system.

My current Twitter profile background image

In other news, I am planning a few more websites as well as enrolling in another course (Introduction to CSS3 and HTML5) at ed2go.com. For those interested in learning some new skills online (not-for-credit classes), I would highly recommend ed2go. So far my experience with them has been very good.

The next sites I am planning include a site about Twitter backgrounds. I plan to create a series of generic-themed backgrounds for people to download and use on their own Twitter profiles and possible draw some attention to myself as a graphic designer, maybe make a few duckets here and there ;)