DesignM.ag » Web Design http://designm.ag Articles and Resources for Web Designers Tue, 16 Dec 2014 16:58:06 +0000 en-US hourly 1 http://wordpress.org/?v=3.9.3 30 Personal Websites of Musicians and Performers for Design Inspirationhttp://designm.ag/web-designs/30-personal-websites-of-musicians-performers/ http://designm.ag/web-designs/30-personal-websites-of-musicians-performers/#comments Fri, 21 Nov 2014 15:32:44 +0000 http://designm.ag/?p=118814

Advertise here with BSA


I've found that the most interesting websites often focus around very specific topics. In the case of entertainers, musicians, actors, and performers, their websites are a networking tool for communication and selling their product(s). Anyone working in the entertainment industry should have a usable website offering all the necessities of their talents.

For anyone who needs a bit of inspiration or just wants to check out some great examples look no further than your computer screen. This gallery features an assortment of personal websites for entertainers and musicians from all over the world. Notice how these websites don't often need a wide assortment of various pages. Showcasing the person's talents, upcoming shows, bio and press/contact details is enough for a solid foundation.

Lily Allen

lily allen official performance website


Advertise here with BSA

]]>

Advertise here with BSA


I’ve found that the most interesting websites often focus around very specific topics. In the case of entertainers, musicians, actors, and performers, their websites are a networking tool for communication and selling their product(s). Anyone working in the entertainment industry should have a usable website offering all the necessities of their talents.

For anyone who needs a bit of inspiration or just wants to check out some great examples look no further than your computer screen. This gallery features an assortment of personal websites for entertainers and musicians from all over the world. Notice how these websites don’t often need a wide assortment of various pages. Showcasing the person’s talents, upcoming shows, bio and press/contact details is enough for a solid foundation.

Lily Allen

lily allen official performance website

Laurent Perez Del Mar

laurent perez del mar composer music website

Kez

kez human jukebox performer website

David Douglas

david douglas music website personal layout

Millia Oz

millia oz singer songwriter personal musician

Gary Nock

gary nock musician personal website

Joshua Redman

joshua redman personal musician website

Kelly Clarkson

kelly clarkson pop singer music website

Robert Glasper

robert glasper website layout homepage

Cecile McLorin Salvant

cecile mclorin salvant personal website

Moshe Kasher

moshe kasher stand up comedian website

Ariana Grande

ariana grande actress performer personal website

Dayna Stephens

dayna stephens saxaphonist musician website

Derrick Hodge

derrick hodge personal musician website

Meklit Music

meklit music personal musician website

Gregor Narholz

gregor narholz musician composer website personal

Jose James

jose james dark personal website layout

Grace Kelly

grace kelly jazz musician personal website

Norah Jones

norah jones music musician personal website

Regina Carter

regina carter musician website layout

Joe Locke

joe locke composer educator personal website

Jack DeJohnette

jack dejohnette personal website musician

Diana Panton

diana panton personal website layout

Aimee Mann

aimee mann personal website layout homepage

Bill Burr

bill burr standup comedian personal website

Matt Donaher

matt donaher standup comedian personal website layout

KT Tatara

kt tatara standup comedian website homepage

Bill Dawes

bill dawes standup comedian homepage

Brian Regan

brian regan stand up comedian website

Joe Lovano

joe lovano saxophonist musician website


Advertise here with BSA

]]>
http://designm.ag/web-designs/30-personal-websites-of-musicians-performers/feed/ 0
Current Design Trends for Digital Shops and E-commerce Websiteshttp://designm.ag/web-designs/trends-for-digital-shops-ecommerce-websites/ http://designm.ag/web-designs/trends-for-digital-shops-ecommerce-websites/#comments Mon, 10 Nov 2014 16:54:45 +0000 http://designm.ag/?p=84824

Advertise here with BSA


Great web design requires research to pinpoint some of the more popular styles of building layouts. eCommerce is an ever-expanding field which can earn webmasters a lot of money through digital or physical products. Especially when you compare earnings to advertising revenue for small or mid-sized websites.featured image laptop ecommerce shop website designIn this post I'd like to share some examples and design ideas for creating modern online webshops and eCommerce layouts. The goal is to make a few sales or at least make an impression on visitors so they might return in the future. It's definitely a competitive market, but by learning what works you can apply better design techniques into your website for higher conversions and greater profits.

Advertise here with BSA

]]>

Advertise here with BSA


Great web design requires research to pinpoint some of the more popular styles of building layouts. eCommerce is an ever-expanding field which can earn webmasters a lot of money through digital or physical products. Especially when you compare earnings to advertising revenue for small or mid-sized websites.

featured image laptop ecommerce shop website design

In this post I’d like to share some examples and design ideas for creating modern online webshops and eCommerce layouts. The goal is to make a few sales or at least make an impression on visitors so they might return in the future. It’s definitely a competitive market, but by learning what works you can apply better design techniques into your website for higher conversions and greater profits.

Marketable Homepages

Designing a catchy interesting homepage is one of the best things you could do. Most visitors will judge a website by it’s cover even if this is frowned upon by the idiom police. Some visitors may overlook a cluttered or confusing homepage – but most will simply leave.

Try to create a mix of items which can push visitors further into your website. Coupons or monthly specials are the perfect choice to replace advertising banners. Also think about carousel listings for new or popular products.

gilt ecommerce website design inspiration homepage

The fashion website Gilt has such a brilliant homepage experience. At the top you’ll notice a large background banner advertising sales, followed by a thumbnail listing of clothes & accessories. Towards the bottom we have some icons explaining their products and even a download link to the Gilt mobile app.

Your site may not be able to include all of these items so don’t try to emulate everything. Instead you should plan out some elements which can work best for your store, then fit these appropriately into the homepage. Wireframing is a great step for this process.

gnarly online ecommerce vibrant yellow website

Another cool homepage design can be found on the Gnarly! website, surprisingly using the new .clothing domain. Their homepage doesn’t have a lot of extra features but it does have an essential element to marketing – brand recognition. Right after the page loads you’ll notice the text colors, background, and webpage logo blend together perfectly.

This site also doesn’t come across as some fancy inner city boutique. I’d recognize this store for youthful and spirited designs of shirts and accessories. Plus when you hover the product thumbnails you get a cute little animated gif image. All of these techniques contribute to the overall branding which sticks into people’s minds as a memorable experience.

Fixed Headers

This trend isn’t found on every eCommerce website but I have noticed it more frequently. Fixing your website header to the top of the page gives visitors instant access to all the regular amenities. These could include a search bar, navigation items, shopping cart, coupon codes, among other things.

fab ecommerce clean website fixed header

The fixed header on Fab.com is a prime example. You can login or access your account settings anywhere on the page. And it gives you access to shop from each individual category without scrolling back to the top. I will admit that it cuts off some of the page height, so this may be annoying on smaller screens. It all comes down to personal preference.

grovemade grove made ecommerce fixed header

Personally I like the Grovemade fixed header because it blends so elegantly into the layout. At the top everything looks to be apart of the page and you only get the fixed header once scrolling down a bit. Then a secondary nav menu becomes attached beneath the first one after passing lower on the page. This is a beautiful effect which looks amazing if you can pull it off.

Content Rotators

I’ve seen this trend on more than a few websites but it offers so many benefits to the typical eCommerce store owner. You can showcase any number of products to capture attention. Wootten has a very distinct look and their homepage includes a regular full-sized image slider.

wooten ecommerce website design texture rotator

The images don’t actually link anywhere else on the website. It’s just a typical image slider meant to showcase their work and the type of services they offer. But you could include links that lead further into the site or even some caption text for each photo.

allmodern all modern ecommerce rotator

One other example from AllModern shows two different content sliders on the same page. First is a photo rotator with deals and specials on various products. Then a little bit further down the page you’ll notice a carousel with featured brands. You can click on any logo to browse their products on the website.

Just have some creativity with your content and pay attention to what other websites are doing. There are dozens of free open source content rotator scripts for jQuery which are easy to implement and setup without needing much code experience.

Sleek & Beautiful Typography

Minimalism has always been a great choice when trying to create focus on a webpage. Apple does this well and it has lead to immediate brand recognition with many of their products. One aspect of minimalism is to study typography and how this can affect a website’s composition.

It never hurts to include fancy text for a logo, banner, headline, or another large page element. But most content should be easily skimmable and quick to read at a distance. I typically suggest any sans-serif font with a contrast between the background and foreground colors. As you get more comfortable spend time playing around with different fonts to gauge what looks best.

bree ecommerce website simple minimalist typography

The online shop for Bree is a great example of minimalist typography. The site uses plenty of text with all caps to denote more important links, items, titles, or similar bits of content. The font is crisp and easy to read whether capital or lowercase. Plus there is a lot of white space between sidebar blocks and individual items on the page.

Inspiration Gallery

To get the creative juices flowing I’ve organized this small collection of well-designed eCommerce themes. Each screenshot is from a ThemeForest WordPress theme, most of which include many of the trends I’ve mentioned in this article. If you need to design a custom eCommerce website these layouts should give you plenty of interesting ideas to get started.

Fitshop

fitshop fashion ecommerce wordpress

Evora

evora responsive ecommerce theme wordpress

Sistina

sistina flat shop ecommerce theme wordpress

Stored

stored ecommerce wordpress theme screenshot

JustShop Cake Bakery

justshop bakery restaurant website wordpress design theme

Shopper

shopper woocommerce wordpress theme inspiration

The Retailer

the retailer retina responsive wordpress theme

Neighborhood

the neighborhood shop theme wordpress inspiration

Flatsome

flat responsive wordpress theme design inspiration

Bazar Shop

bazar shop ecommerce theme inspiration webdesign

ShopPress

shoppress responsive woocommerce thene dark layout

Sommerce Shop

sommerce shop versatile ecommerce theme wordpress

All Around

all around universal wordpress shop ecommerce

Outlet

outlet responsive woocommerce theme wordpress


Advertise here with BSA

]]>
http://designm.ag/web-designs/trends-for-digital-shops-ecommerce-websites/feed/ 0
27 Clean & Responsive Design Agency Website Layoutshttp://designm.ag/web-designs/27-responsive-design-agency-websites/ http://designm.ag/web-designs/27-responsive-design-agency-websites/#comments Tue, 04 Nov 2014 17:21:17 +0000 http://designm.ag/?p=85139

Advertise here with BSA


How much more can be said about responsive web design? It's simple, efficient, and really just the bee's knees dripping with succulent user experience nectar. I've found more designers are pushing for responsive design because it solves the problem of every mobile device and monitor resolution.

This inspiration gallery is focused on creative design agencies which employ responsive layouts. If any type of company should understand the importance of user experience it would be creative studios. For anyone building their own studio this post should offer a blend of unique ideas worth testing in your own website design.

Legwork Studio

legwork studio creative design layout


Advertise here with BSA

]]>

Advertise here with BSA


How much more can be said about responsive web design? It’s simple, efficient, and really just the bee’s knees dripping with succulent user experience nectar. I’ve found more designers are pushing for responsive design because it solves the problem of every mobile device and monitor resolution.

This inspiration gallery is focused on creative design agencies which employ responsive layouts. If any type of company should understand the importance of user experience it would be creative studios. For anyone building their own studio this post should offer a blend of unique ideas worth testing in your own website design.

Legwork Studio

legwork studio creative design layout

MetaLab

metalab design studio responsive website layout

Demi Creative

clean website agency design demi creative

Paradox Design Studio

paradox design studio layout responsive

Grain & Mortar

grain and mortar website design agency inspiration

Shout Digital

shout digital agency responsive website

3seven9

3seven9 red agency website layout responsive

Playground Inc.

playground inc responsive website layout design

Alto Labs

alto labs fullscreen responsive agency

Supereight Studio

supereight studio creative agency website design

Create Digital Media

createdm create digital media agency website

Envy Labs

envy labs creative agency web design

Si digital

si digital creative responsive website design

Gin Lane Media

gin lane media dark website layout inspiration

Weightshift

weightshift studio website design responsive

Palantir

palantir website clean white responsive

Zurb Agency

zurb design creative agency website layout

Creative Spark

creative spark digital design studio website

Symphony

symphony online web design england

Peekaboo Design

peekaboo design agency website responsive

By Association Only

by association only design website layout responsive

Union Room

union room design agency newcastle website layout

Growth Spark

growth spark digital strategy creative agency

Momentum

momentum creative design studio website

Whiteboard

whiteboard responsive website design agency

Grid Bear

grid bear website creative design agency

Matter Of Form

matter of form design creative agency website


Advertise here with BSA

]]>
http://designm.ag/web-designs/27-responsive-design-agency-websites/feed/ 0
Creating Useful Breakpoints in Responsive Layoutshttp://designm.ag/web-designs/breakpoints-in-responsive-layouts/ http://designm.ag/web-designs/breakpoints-in-responsive-layouts/#comments Fri, 24 Oct 2014 14:42:52 +0000 http://designm.ag/?p=119122

Advertise here with BSA


In our modern technological era you can find devices with any screen size that all have access to the Internet. This means bored people around the world can visit their favorite websites from a laundry basket full of different screen dimensions. If this were Pee-wee's Playhouse I'd say the word of the day is: breakpoint!

The process of responsive design creates distinct layout styles that change based on a device's screen resolution. When a layout shifts into a smaller or larger display style it's often called a new breakpoint. Choosing when to create a new breakpoint is quite an arduous task since the threshold and number of breakpoints can change dramatically from project-to-project.

featured wireframe sketch mobile website responsive design

In this post I want to outline a couple ideas for creating responsive breakpoints in web design. The end goal is to create a usable website experience that fits naturally onto any device. While this is easier said than done you'd be surprised how much can be learned by just building a site and fixing mistakes as you go along.


Advertise here with BSA

]]>

Advertise here with BSA


In our modern technological era you can find devices with any screen size that all have access to the Internet. This means bored people around the world can visit their favorite websites from a laundry basket full of different screen dimensions. If this were Pee-wee’s Playhouse I’d say the word of the day is: breakpoint!

The process of responsive design creates distinct layout styles that change based on a device’s screen resolution. When a layout shifts into a smaller or larger display style it’s often called a new breakpoint. Choosing when to create a new breakpoint is quite an arduous task since the threshold and number of breakpoints can change dramatically from project-to-project.

featured wireframe sketch mobile website responsive design

In this post I want to outline a couple ideas for creating responsive breakpoints in web design. The end goal is to create a usable website experience that fits naturally onto any device. While this is easier said than done you’d be surprised how much can be learned by just building a site and fixing mistakes as you go along.

Common Devices

First I’d like to point out that most breakpoints are dependent on the website layout, not the device width or resolution. But understanding which devices are commonly used for Internet browsing will help you get to know the audience a little better. Keep in mind we’re primarily interested in the device width because it’s the limiting factor since height can be theoretically infinite.

We can safely assume that desktop monitors and some laptops will present the largest resolutions. A website probably shouldn’t expand as wide as possible because this could turn into 1920px or 2560px for higher-end displays. Determine a reliable maximum width and use that as a stopping point.

ipad safari website responsive design

For smaller devices the widths rarely drop below 300px. It doesn’t make sense to create minimum thresholds because a device could drop below this limit. Instead just make sure the lowest breakpoint is still readable at 320px on smartphones. If you’re really nitpicky just write a quick list of common devices and their screen resolutions. Later you can double-check which breakpoint is active for each device.

Analyze Page Elements

Deciding when to actually create a breakpoint is going to result from either a breakdown of the layout or a tight squeeze in content. Being resolution-independent helps you focus directly on the content of a page. How large is the navigation menu? Can it stay at full-width by reducing margins between links?

The first step is to build a prototype for the layout with all the important pieces. By resizing down to smaller resolutions you’ll quickly recognize which elements break first. Take note of these natural points of conflict whether they result in a navbar, sidebar, page header, or anything else. If there are multiple elements breaking down you can make a single breakpoint to handle all of them together.

Also consider things like grid content for eCommerce pages. A 4-column grid eventually breaks down into 3 columns and ultimately a 1-col grid. The sizes, spacing, and distance between grid items is completely dependent on the layout. So take note of each important page section because they require certain limits within each breakpoint.

Crafty Solutions

Once you know the exact position when elements break down you’ve got something to start with – but it’s only half of the problem. How do you actually break down in a graceful and concise manner? Obviously it differs based on the page element(s) in question but most of the techniques boil down to reducing space and making items smaller.

For page content you’ll need to recognize when to resize text so it fits better. This can include paragraphs along with list items, headers, captions, pretty much everything meant to be read. Super small devices might perform better with larger text and line spacing – or perhaps you’d rather keep the same text size but increase the margin between paragraphs.

Each solution will be different so it’s quite helpful to brainstorm ideas quickly. When it comes to extraneous page sections like the sidebar or footer you might end up hiding them completely. If the links are important then you could bump them down beneath the content area. But the page height should be a consideration and if some content isn’t necessary on mobile screens I say lose it. The CSS property display: none is very helpful for these circumstances.

Since navigation menus are necessary I’d recommend a simple solution to hide them offscreen or rearrange the links to fit into a smaller box. Most responsive websites hide links with a toggle button. Alternatively you might just place each link in one large block area at the very top of the page. Check out similar responsive layouts to see which techniques they’re using to handle navigation design.

Tools & Resources

Who actually has a stockpile of every tablet and smartphone to demo each responsive breakpoint? Well if you do I’d suggest a recycling drive but honestly there are plenty of better alternatives.

responsive test website layout inspiration

My favorite online resource is Responsive Test which displays a website inside a sliding window. As you lengthen or shorten the window pane the site will respond as if it were shrinking. You can also select from device presets like smartphones and tablets. Granted you may be able to accomplish this by shrinking the actual browser window but it wouldn’t be as precise.

Another great choice is Responsinator which displays smartphones and tablets in both portrait and landscape view. Everything is rendered on the same page so that you can double-check device widths against each other.

Lastly if you’d prefer to run some plugins try searching for related Firefox add-ons or Chrome plugins. These are two browsers that have large communities of developers releasing exotic yet fascinating plugins like Dimensions Toolkit. There is no right or wrong way to check your responsive design. Just find a method that works best for you and stick to it.

There isn’t always a detailed formulaic approach to find the necessary breakpoints. If you’re following a grid structure or building for certain devices then you’ll have a realistic idea to get started. But the most useful breakpoints will be different for each layout because they relate to content and structure. Keep these tips in mind when building your next responsive layout and see if you can push the boundaries to find your own problem solving method.


Advertise here with BSA

]]>
http://designm.ag/web-designs/breakpoints-in-responsive-layouts/feed/ 0