DesignM.ag » design http://designm.ag Articles and Resources for Web Designers Sat, 19 Apr 2014 01:48:12 +0000 en-US hourly 1 http://wordpress.org/?v=3.6 Tips and Techniques for Designing Powerful Band Websites http://designm.ag/design/tips-for-band-web-design/ http://designm.ag/design/tips-for-band-web-design/#comments Mon, 10 Feb 2014 05:11:33 +0000 Jake Rocheleau http://designm.ag/?p=82846

Advertise here with BSA


With the popularity of music-based social networks there isn't as much demand for bands to create their own websites. But hosting your own website offers more creative control over content, photos, and merchandise. Any serious band or solo artist should consider launching their own website to provide an official online resource for fans of the music.

In this article I want to cover just a few techniques I've noticed on many band or musician websites. Designs often vary drastically based on the homepage and other important details. However, page content is generally mirrored in a way that visitors become familiar with the interface browsing through different band websites. The goal is to promote your music in a clear, fashionable manner.


Advertise here with BSA

]]>

Advertise here with BSA


With the popularity of music-based social networks there isn’t as much demand for bands to create their own websites. But hosting your own website offers more creative control over content, photos, and merchandise. Any serious band or solo artist should consider launching their own website to provide an official online resource for fans of the music.

In this article I want to cover just a few techniques I’ve noticed on many band or musician websites. Designs often vary drastically based on the homepage and other important details. However, page content is generally mirrored in a way that visitors become familiar with the interface browsing through different band websites. The goal is to promote your music in a clear, fashionable manner.

Live Streaming Samples

Once you have some tracks recorded try putting them up online to gather feedback. Popular networks like Bandcamp or SoundCloud offer free audio hosting and streaming services. Plus you can even setup prices for individual track downloads, or let viewers download the files completely free of charge.

Both of these services can work as a free audio streaming host without allowing downloads at all. You as the musician have a choice to decide how you wish to distribute music over the Internet. Offering a few streaming tracks can go a long way towards winning over some new fans. People might gladly purchase your new EP if they recognize a couple songs.

streaming audio band player website ui

If you have the technical ability I would recommend setting up audio streaming directly on the band website. Lots of people browse through Bandcamp and other networks, but your personal site is the place to show off what you can do. You might try embedding music videos from YouTube as a similar alternative. This streaming audio player could be on the homepage or an inner page, but regardless please avoid auto-play. Music playing out of nowhere is very annoying to those who aren’t expecting it!

However you approach this concept, just know it is an easy way to draw some attention. Let people hear what you can do and they can be the judge of talent. Word of mouth is a powerful marketing tool that can drive up sales quicker than you might imagine.

Unique Personalization

The band’s music should be given a large focus on the website. But fans who check out your site also want to know about the band itself – maybe some brief history, info about the members, your musical themes, etc. Try to give “behind the scenes” access whenever possible. Unique member bios coupled with a short history of the band will yield a very personal touch.

mastodon metal band homepage fullscreen website layout

You should also take into account the website’s homepage and how this comes across at first glance. Could visitors make an educated guess about the band or your music? Can they see your band logo or possibly a photo of the members? Try to be as personal as you can without revealing too much(this limit is different for everyone).

True fans will love to study a bit of history surrounding their favorite music. You might be surprised how curious people can be – and the effects of this curiosity on the band. Personalization is tough because it will be a different process for everyone. Brainstorm how your website can provide a deeper connection to your visitors and don’t be afraid to push new unchartered boundaries.

Gallery-Style Pages

Long paragraphs and blocks of text are nice to some degree. But easily-digestible content usually appears in the form of quick lists or thumbnails. Grid-style gallery pages are perfect for various forms of content on a band’s website.

daughtry band website photos gallery layout

Think about a photo gallery with pictures taken on tour. Different venues might be cataloged into photo albums for a more organized browsing experience. You might also create a discography page including a brief description next to each album cover.

This same gallery theme can be extrapolated to the band’s online blog, using a featured image to represent each blog post. If you build on a CMS like WordPress or Drupal then blogging is quite a simple process. This official online blog provides a release point for updates about your band, new EP/LP release dates, along with anything else you might deem interesting.

Online Purchases

Although this can tie into the concept of digital streaming, merchandise would be a whole separate topic. Fans should be able to purchase digital copies of your music from marketplaces like iTunes, Last.fm, Amazon, or even Bandcamp. But what about fans who would prefer to buy a physical CD of your album(s)?

bandcamp homepage bands music website network

This can earn more money and it’s a way to provide tangible merchandise. Naturally this could extend to similar items like t-shirts, beanies, wristbands, anything relatable. Unfortunately local retail stores won’t be carrying merchandise for non-mainstream bands. A solid alternative would be selling products directly from your own personal website.

WordPress has plugins like WooCommerce that can tie right into the backend. You could build simple pages, blog posts, and online products within the same CMS. The online ThemeForest marketplace has a large collection of impressive music & band website templates. The best themes come with built-in support for selling merchandise in your own personal online shop.

Once the band goes on tour you might also try selling tickets for each venue. If you can’t make time for managing ticket sales it might be easier linking to other specific vendors. Even if you can’t handle the payments yourself, external sites like Ticketmaster still get you sales and publicity. Try to provide some method to visitors who would purchase your goodies in support of the band’s music.

Design Showcase

To understand creative layout design try looking over some prime examples. In wrapping up this article I’ve collected a large handful of band websites featuring many of the ideas listed above. These examples can offer a better sense of design, branding, content structure, backgrounds, and even newer ideas you might try on your own website.

Goo Goo Dolls

goo goo dolls band website layout

Stone Sour

stone sour band website layout

In Flames

in flames death metal band website

Givers

givers band website homepage layout

3 Doors Down

3 doors doors band website

Samiam

samiam band website homepage layout

Third Eye Blind

third eye blind band website layout

Three Days Grace

three days grace website homepage

Stone Temple Pilots

stone temple pilots band website design

Red Hot Chili Peppers

red hot chili peppers band layout

Matchbox Twenty

matchbox twenty band homepage design

Puddle of Mudd

puddle of mudd website design

Ween

ween rock band website layout

Maroon 5

maroon 5 website design homepage layout

Disturbed

dusturbed metal band website homepage

Slayer

slayer metal band website homepage

Cryogen

cryogen death metal band homepage layout 2014

Kreator

germany metal band kreator homepage website

Gin Blossoms

gin blossoms band website

Counting Crows

counting crows website band layout design

The Cranberries

the cranberries band website layout

Rage Against the Machine

ratm rage against machine design homepage

The Strypes

the strypes band website design

Green Day

green day band website homepage design

Bowling for Soup

bowling for soup band website design

Smash Mouth

smash mouth band website layout homepage

Staind

staind alternative rock band website

Bad Religion

bad religion homepage band music website

Simple Plan

unique band homepage website simple plan

Iron Chic

nyc iron chic rock band dark website design


Advertise here with BSA

]]>
http://designm.ag/design/tips-for-band-web-design/feed/ 0
10 Useful Screen Capture Websites http://designm.ag/design/10-useful-screen-capture-websites/ http://designm.ag/design/10-useful-screen-capture-websites/#comments Mon, 13 Jan 2014 17:49:33 +0000 Michael Jolly http://designm.ag/?p=82505

Advertise here with BSA


As a web designer, I'm always finding useful ways to use website screenshots to benefit my work, and streamline my workflow. Whether I'm creating mood boards, presenting concepts to a client, comping up web templates, or just collecting examples for inspiration, a useful method for capturing multiple screenshots comes in handy. I've listed below, in no particular order, a collection of useful screen capturing websites that I use on a regular basis, along with they're specific benefits. 1. Snapito In comparison to other sites, it's quick, and offers a selection of multiple capture sizes. This interface is relatively simple to use, as well. snapito

Advertise here with BSA

]]>

Advertise here with BSA


As a web designer, I’m always finding useful ways to use website screenshots to benefit my work, and streamline my workflow. Whether I’m creating mood boards, presenting concepts to a client, comping up web templates, or just collecting examples for inspiration, a useful method for capturing multiple screenshots comes in handy. I’ve listed below, in no particular order, a collection of useful screen capturing websites that I use on a regular basis, along with they’re specific benefits.

1. Snapito

In comparison to other sites, it’s quick, and offers a selection of multiple capture sizes. This interface is relatively simple to use, as well.

snapito

 

 

2. Site2pic

This site doesn’t include many sizing option (actually, none at all), but it’s quick, and easy.

site2pic

 

 

3. Shrink The Web

This site offers a free, and pro version — I’ve used both. The free version is great for quick and easy screen grabs, while the pro version offers an extra set of added benefits, like custom sizing, and designation of file type.

ShrinkTheWeb

 

 

4. Thumbshots

This site offers paid, and unpaid version, along with many levels of functionality and benefits. The only downside is you have to create an account.

Thumbshots

 

 

5. Websnapr

This site offers free small and micro screenshots, but requires a premium account if you wish to capture larger images. But, it’s quick and easy.

Websnapr

 

 

6. Web-Capture

It’s free, and easy to use, and allows you to choose from a number of different file extensions, including SVG graphics.

Web-Capture

 

7. Screenshots

Simple to use, and offers multiple screenshot images to select from. The only downside, screenshots are not always available from more obscure sites.

screenshots

 

8. Brow Shot

This site has a relatively easy to use interface, and is really quick. It takes quality, full resolution screenshots, but occasionally, I have trouble withe the custom sizing feature.

BrowShot

 

9. Page Peeker

This site is a little different, in that it specializes in producing website thumbnails and preview images. Nonetheless, still a useful tool for the right job.

PagePeeker

 

10. ctrlq

It’s simple, stripped down, and might be a beta version, but it get’s the job done in a pinch. And apparently, 137,ooo people like it on Facebook.

ctrlq

These are only a handful of the available web screenshot tools available, and I always recommend exploring on your own to find the perfect tool for you and your workflow. There are also a number of downloadable screenshot software programs, with a wider array of features and functionality. But, if you’re looking for quick, fast and free, quality web screenshots, these are some of the best I’ve come across, so far.


Advertise here with BSA

]]>
http://designm.ag/design/10-useful-screen-capture-websites/feed/ 0
40 Mobile Game App Website Layouts using Creative Designs http://designm.ag/design/40-mobile-game-app-website-layouts/ http://designm.ag/design/40-mobile-game-app-website-layouts/#comments Thu, 02 Jan 2014 04:34:37 +0000 Jake Rocheleau http://designm.ag/?p=81600

Advertise here with BSA


How many new Android + iOS mobile games are released each year? The user interfaces and graphics have been improving rapidly to create a large marketplace of mobile games. Marketing-savvy developers will usually create a personal website or webpage dedicated to information each new game release.

In this gallery you'll find 40 brilliant examples of mobile smartphone game website layouts. Some are hosted on their own domain while others are subpages within a game studio's website. But the design is always focused around the game itself, pushing curious visitors to look deeper into the features and maybe purchase a copy. If you're looking for design ideas to build into your own mobile game website, this showcase has a lot of great concepts.

Angry Birds

angry birds mobile ios app website layout


Advertise here with BSA

]]>

Advertise here with BSA


How many new Android + iOS mobile games are released each year? The user interfaces and graphics have been improving rapidly to create a large marketplace of mobile games. Marketing-savvy developers will usually create a personal website or webpage dedicated to information each new game release.

In this gallery you’ll find 40 brilliant examples of mobile smartphone game website layouts. Some are hosted on their own domain while others are subpages within a game studio’s website. But the design is always focused around the game itself, pushing curious visitors to look deeper into the features and maybe purchase a copy. If you’re looking for design ideas to build into your own mobile game website, this showcase has a lot of great concepts.

Angry Birds

angry birds mobile ios app website layout

One Epic Knight

one epic knight game mobile smartphone website layout

Infinity Blade

infinity blade mobile ios app game website

Carcassonne

carcassonne iphone app website layout texture

Band Stars

band stars iphone mobile app website layout colorful musicians

Hipster CEO

hipster ceo mobile game app website layout

Kingdom Rush

mobile iphone website layout inspiration homepage kingdomrush

Lume

lume ios app game website layout

Run That Town

run that town mobile website layout inspiration

Dead Ahead

dead ahead zombies mobile ios game layout website

SpellTower

spell tower spelling ios ipad game mobile website layout

Karateka

karateka 8bit classic mobile video game website

Plants vs Zombies

mobile ios game plants vs zombies website

Broken Sword

bs5 broken sword mobile game website layout

Transistor

transistor mobile game app website layout bright

Fruit Ninja

fruit ninja website mobile app layout

Cannon Cat

blue sky background cannon cat iphone game website

Terraria

terraria trees rpg video game mobile website layout

Run Roo Run!

run roo run

Ridiculous Fishing

ridiculous fishing mobile app video game website

Fog of World

fog of world website app mobile layout iphone ipad ios

Where’s My Mickey?

mickey mouse disney mobile app game website layout wheres

Incredipede

incredipede game mobile colorful illustration background website

Machinarium

machinarium amanita games mobile website layout

Bee Leader

bee leader project flightless inspiring design

Usagi Yojimbo

usagi yojimbo karate game inspiration website layout

Theatrhythm Final Fantasy

theatrhythm final fantasy square enix iphone ipad mobile game website

Badland

red dark machines badland website layout inspiring homepage

Osmos

osmos blue dark game website layout mobile

My Singing Monsters

my singing monsters website colorful iphone android game

Pou!

poume pou mobile game smartphone website simple clean

Conquist II

conquist 2 mobile smartphone app game website layout

Ittle Dew

ittle dew mobile app game simple white layout design

Super Crate Box

super crate box homepage website layout

Fieldrunners

fieldrunners subatomic mobile app game website

Time Surfer

illustration website mobile app game layout time surfer

Home

benjamin rivers horror adventure mobile game home website

Knightmare Tower

knightmare tower ios iphone mobile smartphone game website layout purple graphics

Bad Piggies

bad piggies mobile game website layout design

Tasty Tadpoles

textures colorful water tadpoles tasty ios mobile app game website


Advertise here with BSA

]]>
http://designm.ag/design/40-mobile-game-app-website-layouts/feed/ 0
471 Premium Design Resources for Free from InkyDeals.com! (sponsored) http://designm.ag/design/471-premium-design-resources-for-free-from-inkydeals-com/ http://designm.ag/design/471-premium-design-resources-for-free-from-inkydeals-com/#comments Tue, 24 Dec 2013 11:49:14 +0000 Cristina Simionescu http://designm.ag/?p=82182

Advertise here with BSA


Inky Deals is one of the leading deals websites in the design community, with an extended family of more than 300,000 design enthusiasts. It’s the place to go if you want to buy premium resources at unbeatable prices, whether you’re a graphic or web designer, developer, or business owner looking to improve yourself and your work. 471-premium-design-resources-free-InkyDealscom-1

Advertise here with BSA

]]>

Advertise here with BSA


Inky Deals is one of the leading deals websites in the design community, with an extended family of more than 300,000 design enthusiasts. It’s the place to go if you want to buy premium resources at unbeatable prices, whether you’re a graphic or web designer, developer, or business owner looking to improve yourself and your work.

471-premium-design-resources-free-InkyDealscom-1

They’re the only deals website who offer a 200% money back guarantee on every product. This means that if you’re not happy with it, you get your money back and you also get to keep the product.

471 Premium Design Resources for Free

Because Inky (the lovable little ink blob and mascot of Inky Deals) and his team enjoy giving back to the community, they’ve created a huge free web design bundle: 471 Premium Design Resources for Free value $519, which you can find exclusively on Inky Deals.

471-premium-design-resources-free-InkyDealscom-2

Partners

It contains textures, UI kits, HTML, PSD & WordPress templates, patterns, fonts, courses and much more. Here are their partners who helped them put this great bundle together:

471-premium-design-resources-free-InkyDealscom-3

Resources

This bundle has got dozens of good reviews, hundreds of shares and thousands of fans from all over the world. Let’s see what you get by downloading this full pack of resources:

45 OpenType Fonts from 128Bit Technologies

471-premium-design-resources-free-InkyDealscom-4

Pixel Perfect Social Media Icons from Design TNT

471-premium-design-resources-free-InkyDealscom-5

Dead Stocker PSD Website Template from DesignModo

471-premium-design-resources-free-InkyDealscom-6

Subtle Patterns Set from Design TNT

471-premium-design-resources-free-InkyDealscom-7

This is just a small part of the design goodies you get by downloading this free bundle. Check out the entire 471 Premium Design Resources for Free!


Advertise here with BSA

]]>
http://designm.ag/design/471-premium-design-resources-for-free-from-inkydeals-com/feed/ 0