Website Design Inspiration and Initial Ideas

Standard

As I am not very confident using Adobe Dreamweaver CS3 but I want to create a unique and realistic artist website I have decided to start researching it already and looking at various tutorials for what I want to do on my website. 

As we have already filmed the music video I wanted to start focussing on both the digipack and website as I know if I leave it until January I won’t have enough time to do any indepth research or planning for either of these things.

Pictures For the Website:

The most practical solution for this is when I take photographs for the digipack I will also take photographs that can be used for the website. I will only be able to start contructing the website when I have completed the digipack as I have decided that I want an ‘Enter’ page advertising the digipack I have made with phantom links to iTunes and Amazon where you can hypotethically buy the album.

Enter Page

I have decided to create an enter page as I believe if I were to realisitcally create a website for a band then this would be ultimately free advertising for the digipack I am going to create.

I am going to create the enter page in HTML and try and keep it as simple as possible. Ideally I only want a picture of the digipack and links to buy it on iTunes and Amazon as I really want these things to stand out on the page. I really want to make sure the page doesn’t look cluttered as I think if it does the advertising won’t be as effective as it could be.

I will also use CSS formating inside of the HTML page to make sure the design looks neat and organised so I can make it look as uncluttered as possible. This is an example of the sort of design layout I want for my enter page:

Even though this enter page isn’t connected to my genre and is in fact connected to one that contrasts mine completely I believe the effect this creates is ideal advertising for any genre. The only things I would change is the album thumnail as a Hyperlink and would just have the iTunes and Amazon icons. I also like the idea of the links to facebook, myspace and twitter at the bottom of the page. I would ideally like the image to cover the whole of the page however this all depends on the image I am going to use for my digipack as if I use one with too much in the background or with digital inserts it wouldn’t work as well. The ideal image for this is probably something with a central image, muted colours and contrasting colours so it is noticable but doesn’t take away too much attention from the links on the page itself. Unlike many enter pages I would also like to avoid having a scroller on the right hand side. I really want it to just fit the size of the screen as I think it looks a lot tidier and professional and this is something I would like to do with a lot of the pages like the home page.

I was also considering having something along these lines on the front page:

The two arrows I have circled are the design element I am looking at here. Although I want to predominantly advertise the digipack I create I also thought it would be a good idea to have music videos on here.

However as I want to keep the design simple and organised which is why i’m going to use a CSS format on the HTML page I am unsure about whether to use this for the enter page or whether I should use it for the home page which would probably make more sense as it would be showing ideal contents available on the page. I could even have each members bio when you click the arrow and have a page dedicated to each of them.

Feed Computer icon.

RSS Feed (Really Simple Syndication)

On the news section of my artist website I want to create an RSS feed which is often used for publishing frequently updated things. The RSS feed is web based, desktop based and mobile device based, so when looking at hypothetically creating an artists website this sort of programming would be ideal.

The RSS reader checks regularly for new work, downloads any updates that it finds, and provides a user interface to monitor and read the feeds. RSS allows users to avoid manually inspecting all of the websites they are interested in, and instead subscribe to websites such that all new content is pushed onto their browsers when it becomes available. By giving my artist website such great technology and devices it allows fans of that band to access their information in various ways and gives an alternative to other slightly outdated pages.

 It allows you to easily stay informed by retrieving the latest content from the sites you are interested in. There are many benefits to RSS feed and web feed as it allows you to subscribe without giving out your email details which is appealing for the user as it means they are much less likely to recieve spam or viruses.

When looking through tutorials for Adobe Dreamweaver CS3 on youtube.com I came across a tutorial for a floating sidebar menu which would be ideal for the RSS feed and other links such as the band/artists YouTube acount, Facebook, MySpace and Twitter.

PART ONE:

PART TWO:

HOME PAGE FEATURES

For the home page I have decided I would like a CSS horizontal drop down menu as I have seen these present on many other artists websites like Kings Of Leon, Vampire Weekend and Katy Perry. I would like to avoid menus like on Silversun Pickups artists website as I think it looks outdated and doesn’t conform to what the contemporary website viewer wants. Through using structured HTML and simple CSS, it makes it possible to create a visually appealing drop-down menu that is easy to edit and update, and that works across a number of browsers, including Internet Explorer. Better still there is no JavaScript required for it.

There are a lot of helpful and useful codes here 🙂

  • Works in modern browsers withoutscript support.
  • Compatible with Internet Explorer 5 (Win and Mac OS9).
  • Based on nestedLists.
  • Current page link appears selected.
  • Sub-menus for the current page are visible by default.
  • Stylesheets are CSS hack-free.
  • In case there is no script support, Top Level List Items are linkedto top level documents (mostly for Internet Explorer).
  • In modern Browsers and Internet Explorer, this menu is Keyboard friendly (offset links are accessible).
  • It uses only one hookper Top Level list items.
  • It is Standards compliant.
  • It addresses Accessibility Guidelines.
  • It is Search Engine Friendly.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s