DesignM.ag » Web Design http://designm.ag Articles and Resources for Web Designers Mon, 19 Jan 2015 19:38:17 +0000 en-US hourly 1 http://wordpress.org/?v=3.9.3 Tips for Powerful Photography in Web Design Mockupshttp://designm.ag/web-designs/tips-web-photography-in-design-mockups/ http://designm.ag/web-designs/tips-web-photography-in-design-mockups/#comments Thu, 08 Jan 2015 22:34:34 +0000 http://designm.ag/?p=119116

Advertise here with BSA


Arguably one of the most important stages of a website design is the mockup phase. Building upon a general wireframe is quite detailed because you need to think about composition and specific user interface elements. Including photographs in a website mockup is one way to encapsulate a specific tone or style of content. When done properly it looks outstanding; When done improperly it looks puerile and inefficacious.

canon dslr camera shot equipment

In this post I'd like to share a few tips for composing websites with the use of stunning photography. While the quality of a photo itself is exceptionally important you must also consider placement and direction. Photography in web design should add to the overall company image or add to some pieces of content on the page. Along with these tips browse through some related photography websites to get ideas for your own mockups.


Advertise here with BSA

]]>

Advertise here with BSA


Arguably one of the most important stages of a website design is the mockup phase. Building upon a general wireframe is quite detailed because you need to think about composition and specific user interface elements. Including photographs in a website mockup is one way to encapsulate a specific tone or style of content. When done properly it looks outstanding; When done improperly it looks puerile and inefficacious.

canon dslr camera shot equipment

In this post I’d like to share a few tips for composing websites with the use of stunning photography. While the quality of a photo itself is exceptionally important you must also consider placement and direction. Photography in web design should add to the overall company image or add to some pieces of content on the page. Along with these tips browse through some related photography websites to get ideas for your own mockups.

Homepage Designs

It seems natural that photographs would perform very well on homepages. Once a user lands on your website they typically want to understand what it’s all about. While there are many different ways to draw people further into a site, photos are quick visual cues to explain things in a jiffy.

The use of big oversized photography has become a colossal trend unto itself. Large background photos placed in the header section of a webpage can do a lot to explain the purpose of a site. Companies and small businesses use this technique to feature photographs of their studio or office space.

Many personal websites for entertainers or artists tend to have a direct focus on the person. Photographs are the best way to show off how a person looks, what they do, or a certain aspect of their personality. Remember that the homepage will directly impact each visitor’s impression of the website. Photos on the homepage, especially above-the-fold, need to tell the story quickly and effectively.

Product Shots

Another use of photography in web design is the addition of product shots. eCommerce websites are the typical assumption but consider other products like mobile apps, video games, or new startups. Even a simple edited photo like the example on Gridbooks can go a long way towards marketing and selling a product.

gridbooks homepage website grid notebooks

However we’re primarily familiar with product shots that directly relate to items for sale. These could be platters of food, clothing, computers, or anything else. Restaurants primarily to use product shots to help sell dishes from their online menu.

Much like other types of photography you really need to understand the fundamentals to capture great product shots. Thankfully photographers often publish helpful tips related to product photography. Although you can hire a professional photographer to help with the process you can earn some extra money and save time by capturing the pictures yourself.

Taking Snapshots

It should go without saying that photography is a long process. It may be related to other creative fields like drawing or graphic design, but only in the general sense. To physically pick up a camera and take beautiful shots will require practice and some in-depth research.

photographer professional camera photo

I point this out because it’s not mission impossible – in fact it’s mission oh-so-probable. People face difficulty with the concepts because of the split between composing/aiming a shot and physically taking the shot.

While it is a lot of work the payoff is fantastic. All the photos you take are your own creative property and you have free reign to edit, restyle, composite, or do pretty much anything with them. You might be surprised to learn there are dozens of helpful sites online to educate yourself about photography.

One resource I would recommend is the Photography Tuts+ blog. Posts range from DSLR camera techniques to Photoshop editing and many other subjects in-between. I’ll admit that photography is not for everyone so if you don’t have an interest then stick to alternatives. But if you are curious to learn the only way to do it is to get started.

Sources for Photography

Aside from learning to snap the shutter yourself there are free resources online for the many photography-impaired designers. Obviously Flickr is a classic choice which publishes both Creative Commons and copyrighted works. If you know how to use the advanced search feature you might find a couple gems.

pexels free stock photographs resource

Otherwise check out Pexels which is a free high-quality photography resource. The photos are submitted by professional photographers who capture the shots and share them online for free. This means everything is released into the public domain so you can modify, crop, edit, or even reuse the shots in your website mockups.

Pexels is a curated resource which pulls from other websites like Unsplash. Every photo is usually published at a very high quality which offers designers plenty of freedom. Granted these sites may not help if you need to use specific photographs of a person or location. But for general-purpose mockup design I would highly recommend these resources to every web designer.

Closing

I hope this article can provide a solid foundation for web designers getting started with photography. Although from the outside it seems like a complicated subject it will become clearer once you get your hands dirty. Websites were created to be purveyors of content and photos are a big slice of the delicious content pie. Crafting mockups with cleverly-placed photographs does take time but with practice it will become another handy tool in your toolbelt.


Advertise here with BSA

]]>
http://designm.ag/web-designs/tips-web-photography-in-design-mockups/feed/ 0
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