Category Archives: Artists Website

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.
Advertisements

Website Design Research

Standard

WEB 2.0

For creating my artist website I have done some research on Web 2.0. When I did my online questionaire over half of the 20 people I asked said they expected an indie genre artists website to be in a blogging format so I started thinking about Web 2.0.

A third important part of Web 2.0 is the social Web, which is a fundamental shift in the way people communicate. The social web consists of a number of online tools and platforms where people share their perspectives, opinions, thoughts and experiences. Web 2.0 applications tend to interact much more with the end user. As such, the end user is not only a user of the application but also a participant by:

  • Podcasting
  • Blogging
  • Tagging
  • Contributing to RSS
  • Social bookmarking
  • Social networking

For marketers, Web 2.0 offers an opportunity to engage consumers. A growing number of marketers are using Web 2.0 tools to collaborate with consumers on product development, service enhancement and promotion. Companies can use Web 2.0 tools to improve collaboration with both its business partners and consumers. Among other things, company employees have created wikis—Web sites that allow users to add, delete, and edit content — to list answers to frequently asked questions about each product, and consumers have added significant contributions. So this type of website really would be ideal for a band as it would encourage an online community and forums on the artists website creating more hits.

WEB APPLICATION FRAMEWORK – ARCHITECTURE

Most web application frameworks are based on the model–view–controller (MVC) architectural pattern. The model-view-controller is a software architecture,currently considered an architectural pattern used in software engineering. The pattern isolates “domain logic” (the application logic for the user) from the user interface (input and presentation), permitting independent development, testing and maintenance of each (separation of concerns).

THE MODEL – VIEW – CONTROLLER (MVC) ARCHITECTURE

Many frameworks follow the model–view–controller (MVC) architectural pattern to separate the data model with business rules from the user interface. This is generally considered a good practice as it modularizes code, promotes code reuse, and allows multiple interfaces to be applied. In Web applications, this permits different views to be presented, such as web pages for humans, and web service interfaces for remote applications.

WEB TYPOGRAPHY

Web typography refers to the use of fonts on the World Wide Web. When HTML was first created, font faces and styles were controlled exclusively by the settings of each Web browser. There was no mechanism for individual Web pages to control font display until Netscape introduced the <font> tag in 1995, which was then standardized in the HTML 2 specification. However, the font specified by the tag had to be installed on the user’s computer or a fallback font, such as a browser’s default sans-serif or monospace font, would be used. The first Cascading Style Sheets specification was published in 1996 and provided the same capabilities.

A common hurdle in Web design is the design of mockups that include fonts that are not Web-safe. There are a number of solutions for situations like this. One common solution is to replace the text with a similar Web-safe font or use a series of similar-looking fallback fonts.

Another technique is image replacement. This practice involves overlaying text with an image containing the same text written in the desired font. This is good for search engine optimization and aesthetic purposes, but prevents text selection and increases bandwidth use. Also common is the use of Flash-based solutions such as sIFR. This is similar to image replacement techniques, though the text is selectable and rendered as a vector. However, this method requires the presence of a proprietary plugin on a client’s system. Another solution is using Javascript to replace the text with VML (for Internet Explorer) or SVG (for all other browsers). However font hosting services allow users to pay a subscription to host non-Web-safe fonts online. Most services host the font for the user and provide the necessary @font-face CSS declaration.

Here is a list of web safe fonts I have the option of chosing: WINDOW FONTS/ MAC FONTS/ FONT FAMILY

Arial, Arial, Helvetica, sans serif

Comic Sans MS, Comic Sans MS 5, cursive

Courier New, Courier New, monospace

Georgia 1, Georgia, serif

Impact, Impact 5, Charcoal 6, sans-serif

Lucida Console, Monaco 5, monospace

Lucida Sans Unicode, Lucide Grande, sans-serif

Palatino Linotype, Book Antiqua 3, Palatino, serif

Tahoma, Geneva, sans-serif

Time New Roman, Times New Roman, Times, serif

Trebuchet MS 1, Trebuchet MS, sans-serif

Verdana, Verdana, Geneva, sans-serif

Symbol, Symbol (Symbol 2, Symbol 2)

Webdings, Webdings (Webdings 2, Webdings 2)

Wingdings, Zapf Dingbats (Wingdings 2, Zapf Dingbats 2)

MS Sans Serif 4, Geneva, sans-serif

MS Serif 4, New York 6, serif

 

I have decided I will use: Palatino Lunotype, Book Antiqua 3, Palatino, serif

 

WEBSITE WIREFRAME

A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together. The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content. In other words, it focuses on “what a screen does, not what it looks like.”

Wireframes focus on

  • The kinds of information displayed
  • The range of functions available
  • The relative priorities of the information and functions
  • The rules for displaying certain kinds of information
  • The effect of different scenarios on the display
The website wireframe connects the underlying conceptual structure, or information architecture, to the surface, or visual design of the website. Wireframes help establish functionality, and the relationships between different screen templates of a website. An iterative process, creating wireframes is an effective way to make rapid prototypes of pages, while measuring the practicality of a design concept. Wireframing typically begins between “high-level structural work—like flowcharts or site maps—and screen designs.” Within the process of building a website, wireframing is where thinking becomes tangible.

Artist Website

Standard

lil Wayne

Website Enter Page

The website enter page is very striking and as we can see above is primarily used to market and sell his new album. The main image featured has contrasting colours to the plain white canvas textured background. On the righthand side to the picture there is a link to download the album on iTunes which also reflects how technology has changed the industry.

The format of the enter page isn’t very conventional to the Hip-hop/Rap genre whereas the home page is more stereotypical of the associated genre. The image of the enter page convays how important CD covers are to the sales of albums as this artist has used it to portray himself as an artist when a fan first enters his website. It also establishes the tone of the artists current music which could either deter or entrance more visiters on the page.

 

Home Page

The home page is very bland and after the enterance page is quite disappointing and almost an anti climax to the website. There is minimal content on here and the only unique thing about it is the music played on the left hand side of the screen. It feels like the website is only half completed as even the ‘Life Feed’ element of the page doesn’t work – this page is rather disappointing and for a home page is also quite bland. The photograph is of the artist against a solid colour background and has a dotted pattern layered on it across the whole page. The photograph has been awkwardly placed and isn’t positioned properly. If I could change this page I’d move the photo to the left hand side so his face wasn’t covered by script as soon as you went on the page and then as the website viewer scrolled down his photo would be sent to the back and act like a normal background.  The video aspect is a good idea where you can scroll through his different videos however it too is positioned awkwardly and this puts a negative feature on this element. All in all the page doesn’t look as though it belongs to one of the most popular rappers worldwide and actually looks quite messy and unprofessional.

 

News Page

 This page is much more improved than the home page and actually looks like it should be the home page. The photograph has been positioned much better on the page and hasn’t had attention taken away from it due to it being covered. I like the colours used on this page as they emote a relaxed feeling and this is complemented by similar colours shown on the album cover that is on the news feed. However with a colour like this as a background it is very likely that 9 times out of 10 the images on the website won’t go with the colours of the background or complement it and will instead look messy and unproffessional.

 

Bio Page

 This page has the same problem as the home page did as the photograph has also been positioned wrongly. As I said about the previous page, with such a distinctive background colour the images on the website will often clash with it which is what can be seen here. Not only that, but the image doesn’t fit with the tone of the rest of the page – it feels quite grungy whereas the background feels quite well put together.

Shows & Events Page

 This page looks very bland and has a similar problem to the other pages as it doesn’t have enough content on it. If there were content on the left hand side of the page it wouldn’t look so out of place however all the content on the right hand side doesn’t look like it fits well and this throws the balanced of the website off. It looks messy and as if it hasn’t been positioned properly. At this stage if I were the viewer on the website I would consider that the website hasn’t been managed or looked at in quite a long time.

Music Page

 This is a much better page which is perhaps because of the solid colour background. However this page doesn’t actually go with the rest of the website which is a shame because it establishes a negative elment to the best page on the website. The positioning of all the photographs have been done well and the page on a whole looks quite clean and well managed.

Video Page

 Even though I refreshed this page numerous times nothing appeared on the left hand side of the page. At first I thought it must be an HTML error or my server wasn’t able to read the script but after looking at it in more detail I realised the only active content was on the right hand side. The fact that even though there is no content and the Videos box is stretched down to half way down the page shows a lack of continuality as on the Shows & Events page the box is actually shortened due to the fact it has no content. Even though it is bad the content box is empty it is still good that they have made that clear unlike on this page. This is a majorly negative element to the website as it will confuse the viewer and they will think the server is playing up before coming to the same conclusion that I did. This will make the viewer be cautious on returning to the website as they will think it is hard to navigate.

Photos Page

 This page is also badly positioned, the photogrpah behind the smaller image is the same which looks repetitive and too similar. Instead of having to scroll down to see the other images there should be ‘next’ and ‘previous’ buttons to keep the page short and ideally without the viewer to have to scroll down. This page, like many on this website feel unbalanced due to the fact that if there is content on the right hand side the likelyhood is that there won’t be on the left.

Store Pop-up Page

 I do like the fact that the ‘Store’ page is a pop up as usually artists have them on the same website. This adds a unique element to his website which goes in favour towards it. I do however think that some viewers won’t like this as it will clogg up their computer and usually it is simpler to continue the artists store on the same website. I also don’t think the artist should have kept the same background and should have actually gone with the plain solid black background due to the fact that this would allow the products to be shown more effectively.

Login/ Signup Page

I like the fact that you can log onto the website with one of your existing social networking websites. This will make it a much quicker element to signing up and if the website were in better condition would probably enable many more sign ups that usual.