DesignM.agWeb Design Blog http://designm.ag Articles and Resources for Web Designers Tue, 22 Jul 2014 13:14:01 +0000 en-US hourly 1 http://wordpress.org/?v=3.9.1 30 Elegant Themes for Ghost http://designm.ag/resources/30-elegant-themes-for-ghost/ http://designm.ag/resources/30-elegant-themes-for-ghost/#comments Thu, 12 Jun 2014 14:19:26 +0000 http://designm.ag/?p=80906

Advertise here with BSA


A year ago, finding a blogging platform that focused on blogging was impossible. Even content creation platforms that advertised as having an easy set-up and were specifically for bloggers seemed to focus mostly on the creation of the layout of a blog. For instance, WordPress has some amazing news and magazine themes, but it certainly isn't a quick set-up. Tumblr themes are a bit simpler but still come with some bells and whistles that many found annoying. Bloggers just wanted to be able to quickly set up a simple but professionally designed blog and start publishing. John O'Nolan was one such blogger who became frustrated enough with the situation that he hired Hannah Wolfe as lead developer, received funding through Kickstarter, and created a simple blogging platform called Ghost. With so many supporters due to blogging platform ire already, Ghost quickly received the funding it needed to launch on 14 October 2013. The other good news is that there are themes for more than just writers. Portfolio ghost themes are also emerging. So, if you are a blogger or a designer looking to set up a simple blogging or even portfolio platform, Ghost is one platform that brings content back to the forefront on the web. In fact, below is a list of 30 of our favorite ghost themes so far. All are very elegant and, most importantly, provide a clean layout to help your content shine.

1. Penman


Advertise here with BSA

]]>

Advertise here with BSA


A year ago, finding a blogging platform that focused on blogging was impossible. Even content creation platforms that advertised as having an easy set-up and were specifically for bloggers seemed to focus mostly on the creation of the layout of a blog. For instance, WordPress has some amazing news and magazine themes, but it certainly isn’t a quick set-up. Tumblr themes are a bit simpler but still come with some bells and whistles that many found annoying. Bloggers just wanted to be able to quickly set up a simple but professionally designed blog and start publishing.

John O’Nolan was one such blogger who became frustrated enough with the situation that he hired Hannah Wolfe as lead developer, received funding through Kickstarter, and created a simple blogging platform called Ghost. With so many supporters due to blogging platform ire already, Ghost quickly received the funding it needed to launch on 14 October 2013. The other good news is that there are themes for more than just writers. Portfolio ghost themes are also emerging.

So, if you are a blogger or a designer looking to set up a simple blogging or even portfolio platform, Ghost is one platform that brings content back to the forefront on the web. In fact, below is a list of 30 of our favorite ghost themes so far. All are very elegant and, most importantly, provide a clean layout to help your content shine.

1. Penman

Demo & Download

2. Tasty

Demo & Download

3. Ghost – The Journey

Demo & Download

4. Nonus

Demo & Download

5. Helios

Demo & Download

6. Fixy

Demo & Download

7. Omikron

Demo & Download

8. Ghostwall

Demo & Download

9. Aperture

Demo & Download

10. Demon’strate

Demo & Download

11. Penoolis

Demo & Download

12. Ghex

Demo & Download

13. Ghost Stories

Demo & Download

14. Glampagne

Demo & Download

15. The Classy

Demo & Download

16. Cameraman

Demo & Download

17. Retro

Demo & Download

18. Ghoststrap

Demo & Download

19. Ghostentista

Demo & Download

20. Ghostium

Demo & Download

21. Swayze

Demo & Download

22. GhostScroll

Demo & Download

23. Simply Pure

Demo & Download

24. Magnum

Demo & Download

25. Suave

Demo & Download

26. StoryLane

Demo & Download

27. Banshee

Demo & Download

28. Curri

Demo & Download

29. Chronicle

Demo & Download

30. Writr

Demo & Download


Advertise here with BSA

]]>
http://designm.ag/resources/30-elegant-themes-for-ghost/feed/ 0
30 Opera Browser Extensions for Web Designers and Developers http://designm.ag/design/30-opera-extensions-for-designers-developers/ http://designm.ag/design/30-opera-extensions-for-designers-developers/#comments Mon, 28 Apr 2014 12:24:43 +0000 http://designm.ag/?p=84292

Advertise here with BSA


The Opera web browser is a great choice for reliable cross-platform Internet surfing. It's typically quicker than Firefox and offers a longer development history than Chrome. The Opera team works hard to create an expansive browser with plenty of extra features to keep users coming back. And it's fair to say the people who use Opera definitely enjoy the program.

This gallery is dedicated to extensions for Opera which can help you design, take apart, reconstruct, or analyze websites. Both designers and developers will find something useful in this collection. Whether you're a long-time user or might just try Opera on a whim, this post has an extension for every web enthusiast.

Validator

w3c validator html opera browser extension


Advertise here with BSA

]]>

Advertise here with BSA


The Opera web browser is a great choice for reliable cross-platform Internet surfing. It’s typically quicker than Firefox and offers a longer development history than Chrome. The Opera team works hard to create an expansive browser with plenty of extra features to keep users coming back. And it’s fair to say the people who use Opera definitely enjoy the program.

This gallery is dedicated to extensions for Opera which can help you design, take apart, reconstruct, or analyze websites. Both designers and developers will find something useful in this collection. Whether you’re a long-time user or might just try Opera on a whim, this post has an extension for every web enthusiast.

Validator

w3c validator html opera browser extension

HTML Color Coder

html color code picker hex opera extension

Web Developer

web developer browser opera extension tools

User-Agent Switcher

user agent switcher opera browser extension

Live HTTP Headers

live http headers browser opera extension

Color Picker Extension

color picker extension opera design browser

Source

opera view source syntax dom website development extension

Edit the Page

edit html css page opera extension development

OMeasure!

omeasure opera extension plugin measuring width

Scripter

scripter script inclusion checker opera extension

Firebug Lite

firebug lite button browser opera extension

Auto-Ipsum

auto ipsum lorem opera browser extension design

Responsive Design Tester

test web design responsive layout checker extension for opera

JsonViewer

json viewer extension reader syntax extension

Xdebug

opera extension script xdebug php development ide

Readable JavaScript

readable javascript extension opera web browser

ScriptKeeper

scriptkeeper extension no script blocking opera

AutoPager

autopager auto pagination extension browser opera

Edit This Cookie

extension opera browser edit website cookies

MakeLinks

makelinks display popup previews for hyperlinks

Images Dimensions

image dimension checker preview extension opera

Encode-Decode HTML

encode decode html entities extension opera browser

URL Encoder/Decoder

url encode decode slashes extension browser opera

Server Details

server details website hosting extension opera

Tab Accordion

tab accordion extension opera browser design

Ghostery

website checker scripts ads ghostery opera extension

Shorten URL

opera extension popup browser toolbar shorten url

.no { CSS }

no css opera extension details

Script Weeder

script weeder cleaning js javascript

The Developer Briefcase

the developer briefcase opera browser extension


Advertise here with BSA

]]>
http://designm.ag/design/30-opera-extensions-for-designers-developers/feed/ 0
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 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 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