DesignM.ag » Web Design http://designm.ag Articles and Resources for Web Designers Mon, 23 Mar 2015 21:01:36 +0000 en-US hourly 1 http://wordpress.org/?v=3.9.3 Popular Web Design Trends for 2015http://designm.ag/web-designs/web-design-trends-for-2015/ http://designm.ag/web-designs/web-design-trends-for-2015/#comments Mon, 09 Mar 2015 13:56:33 +0000 http://designm.ag/?p=119610

Advertise here with BSA


Although many designers have written on this topic, I want to share my thoughts on the future of web design as we forge ahead into 2015. The new year is always an exciting time and I love to contemplate the potential for young new web designers just entering the field.

featured image photo laptop design

I do think these trends will resonate with most web designers who have kept their pulse on the changing tides of digital interface design. But although these trends are quite noticeably gaining momentum, it's impossible to tell with absolute certainty what the future will hold. Looking onward into 2015 I expect to see lots of growth and ingenuity from older trends, along with some newer ideas finally coming into the spotlight.


Advertise here with BSA

]]>

Advertise here with BSA


Although many designers have written on this topic, I want to share my thoughts on the future of web design as we forge ahead into 2015. The new year is always an exciting time and I love to contemplate the potential for young new web designers just entering the field.

featured image photo laptop design

I do think these trends will resonate with most web designers who have kept their pulse on the changing tides of digital interface design. But although these trends are quite noticeably gaining momentum, it’s impossible to tell with absolute certainty what the future will hold. Looking onward into 2015 I expect to see lots of growth and ingenuity from older trends, along with some newer ideas finally coming into the spotlight.

Thin Line Icons

One of the more popular emerging trends is the effect of thin line icon styles. I first noticed this meteoric rise in popularity from Dribbble posts. Flat UI design has been a popular trend growing alongside line icons. But I like to make the distinction that not all line icons must be placed into flat layouts.

What I find most appealing is the simplistic nature of these icons. Any designer regardless of his skillset should be able to learn this technique. Line icons also lend themselves to the vector world where pixel limitations are not a problem. This has become a popular adaptation with newer programs like Sketch.

w3 co web design agency line icons

The single-page design for W3.co demonstrates simple line icons in the way they were meant to be used. Each section in the page has a slew of icons which match in style, size, and color. It’s even more impressive because the site follows such a minimalist approach that each icon feels right at home.

Notice how most of these thin line icons are built around an outline. So when constructing a shape layer the fill is typically left transparent, and the stroke color is used to create the icon.

virtual insanity website interface line icons

Another cool example can be found on Virtual Insanity. It has some dynamic features for navigation based around simple line icons. This is another prime example of relying on graphics to further expand upon page content.

If you’re not the best designer it’s definitely worth following some tutorials on how to build line icons. However I understand there are developers and copywriters who wish to just build simple website layouts with existing resources. In this case check out any of the numerous freebie sets like Linea.

linea line icons freebie iconpack

All of these icons are open source and built as SVGs & PNGs. There are many different iconsets like e-commerce, music, or weather. But all of the sets can be downloaded in one big pack at the top of the page. Linea is a great iconset to start with because it contains so many examples, it’s free to use, and the styles match harmoniously.

Website Animation

Another trend with a growing popularity is the use of website animation. JavaScript has always reigned supreme in this department but CSS3 has slowly taken a chunk of the market share. In this way it’s possible to create any type of animation you desire – from button hover effects to stylized dropdown menus.

belle epoque website layout animation

The French design agency Belle Epoque uses a fantastic slew of animated effects on each part of their website. Every section on the homepage applies animation to typography, graphics, and page transitions. Even the website’s hamburger navigation menu uses a fantastic animated sliding effect.

But aside from content-focused animation I also expect to see a whole lot more animated graphics. These used to be created with Flash but have since adapted into JavaScript or even SVG animation. For example, take a peek at the homepage for Vizua studio.

vizua animated creative studio website

Each section of the page has a small vector graphic animated to expand upon the content. Visual graphics combined with text often promote the best ideas in a very solid environment. But I also really like the animation found in their top-right hamburger menu. Vizua is just another great demonstration of making a website come alive through animation.

canal tp website orange layout homepage

For a more balanced example take a look at the Canal TP website. This has a nice mix of parallax scrolling effects combined with animated imagery & colors. Their top navigation links also incorporate animation on the hover state. My only quip is with the slow-scrolling functionality which I think could be improved. But just the animation alone is simply fascinating.

Parallax Layouts

What could be said about parallax web design that hasn’t already been covered? It’s certainly popular, it has rhythm, and it uses lots of cool animation. So where could it all go from here?

It is my hope that more designers will understand the purpose of parallax design and how it can fit into a layout scheme. Not every website project should use parallax scrolling because it’s a special effect meant for special purposes. But the growing trend of parallax design is not just unavoidable, it’s incorporable.

hermes tocchetti website photography homepage

The photography portfolio of Hermes Tocchetti uses a parallax effect on each piece of the layout. Every section is split up into pieces using background images and well-managed content. I really like the design style because it feels natural and fun to use. But even more so the parallax effect is scalable for any device, which is important in today’s mobile-responsive era of web design.

smart phones dumb users website homepage

Perhaps an even better example can be found on Smart Phones Dumb Users. This is almost like a web-based infographic written and coded using a parallax style. I truly enjoy this example because it demonstrates the value of a horizontal parallax effect.

By looking at parallax design as a trend you’ll start to notice many different concepts within the parallax style. Some designers like animated elements, some like horizontal scrolling, others like dot-navigation or even fixed-sliding elements. The phrase “parallax design” has grown into a very wide interpretation of the trend as a whole. I expect this to continue well into the new year.

Flat Material Design

In late 2014 Google announced their new style language named Material Design. It combines actual design concepts with user experience effects such as touch-based motions. Material design was created for Android, but has since adopted into a full-blown design language.

Web designers who focus on flat design love this new language. Google is a company which seems to understand how trends change. Their new Material design language places heavy emphasis on flat design in regards to colors, effects, and icon styles.

materialup google material design inspiration gallery

The website MaterialUp is a dedicated inspiration gallery for flat Material design resources. The majority of entries are screenshots pulled from Dribbble built either for the web or Android apps. Many of the shots use animation constructed with After Effects.

If you’re trying to understand Material design through example then definitely take a look at MaterialUp. It’s a fantastic resource for designers who are unfamiliar with the flat style. Plus there’s a lot to be said about the unique animation and design construction of Material interfaces.

Hero & Background Images

One of my absolute favorite trends relates to the use of hero images in web design. These are specifically banners or backgrounds with large images spanning a good portion of the screen. Hero images can be photos or illustrations meant to directly into the page content.

cuppa web design agency hero image

We Are Cuppa is a fantastic example of well-styled hero image placement. The homepage photo is directly relevant to their site and their services. It brings attention to the type of work they do while adding a bit of whitespace into the overall composition.

Browsing onto other pages of their website you’ll notice each one has a smaller hero image. Although in this example it does span the entirety of the screen, this isn’t always the case. Hero images can be placed within the content or they can be used as backgrounds. The extreme position of this trend is a fullscreen background image or video.

whiteboard creative studio video background

The homepage of Whiteboard uses a large fullscreen background video effect to its fullest potential. I love their design style because it all feels very minimalist yet contemporary. Also the video content feels adeptly relevant to their studio’s portfolio. It’s an excellent example of distributed media in web design.

Both hero images along with fullscreen backgrounds are trends catching fire. They’ve already proven immensely popular throughout 2014 and I expect that popularity to continue all the way through 2015.

Powerful JavaScript FX

Along with typical web design trends there’s also a lot to consider in the realm of web development. My primary interest lies in frontend development which is a vitally important field. Regardless of how beautiful a mockup is designed, it means very little unless it can be coded into a working website.

One of the biggest trends I’ve noticed is a growing community of jQuery and JavaScript developers. I’ve seen an amazing number of plugins released over the course of 2014 with a whole lot more on the horizon.

unheap jquery plugins repository

Passionate developers are getting into the community by publishing galleries full of these outstanding jQuery plugins One such example is Unheap which catalogs numerous jQuery plugins from every category under the sun. In my opinion this helps plugin developers to bring attention to their work, and it helps general devs who need to find great plugins.

With an ever-growing market of developers I think JavaScript is going to see an enormous growth cycle in 2015. New JS libraries, new plugins, and new websites showcasing all of these features.

Final Points

In closing I hope these trends can prove useful enough to guide designers into 2015. It seems that time never slows and to stay ahead of the curve often means looking back to the past. Successful designers are able to keep up with the times by analyzing the most beloved design trends and incorporating them into future project work. I don’t hold any prescient abilities but I do hope some of these trends are proven correct as we move forward into the new year.


Advertise here with BSA

]]>
http://designm.ag/web-designs/web-design-trends-for-2015/feed/ 0
35 Inspiring Website Designs for Zoos and Aquariumshttp://designm.ag/web-designs/35-inspiring-websites-zoos-and-aquariums/ http://designm.ag/web-designs/35-inspiring-websites-zoos-and-aquariums/#comments Thu, 05 Mar 2015 14:09:07 +0000 http://designm.ag/?p=119446

Advertise here with BSA


It feels natural that every type of website deserves an inspiration gallery. Modern designers are working on hundreds of different projects each year and so many of them are dedicated to niche subjects. Zoos and aquariums serve a very similar purpose as an attraction to see a wide variety of nature.

Interestingly enough these two distinct facilities follow very distinct design styles. For this gallery I've put together 35 inspirational examples of zoos and aquariums. While there are plenty of examples online not all of them incorporate modern design ideas. I hope this gallery can offer a glimpse of the best each category has to offer - both for personal and commercial design work.

Aquarium of the Pacific

aquarium of the pacific ocean website


Advertise here with BSA

]]>

Advertise here with BSA


It feels natural that every type of website deserves an inspiration gallery. Modern designers are working on hundreds of different projects each year and so many of them are dedicated to niche subjects. Zoos and aquariums serve a very similar purpose as an attraction to see a wide variety of nature.

Interestingly enough these two distinct facilities follow very distinct design styles. For this gallery I’ve put together 35 inspirational examples of zoos and aquariums. While there are plenty of examples online not all of them incorporate modern design ideas. I hope this gallery can offer a glimpse of the best each category has to offer – both for personal and commercial design work.

Aquarium of the Pacific

aquarium of the pacific ocean website

National Aquarium

national aquarium baltimore maryland website

Point Defiance Zoo

point defiance zoo website clean texture

Long Island Aquarium

long island new york aquarium website

Philadelphia Zoo

philadelphia zoo pennsylvania website

Nashville Zoo

nashville tennessee zoo website layout

New Zealand National Aquarium

nz new zealand national aquarium website

Sydney Zoo

sydney zoo australia website layout

SeaWorld

seaworld simple theme park aquarium water homepage

Newport Aquarium

blue newport aquarium dark layout

Reston Zoo

reston zoo virginia usa website

Fort Wayne Children’s Zoo

fort wayne children zoo dark website

Aquarium of the Bay

aquarium of the bay san francisco

Shedd Aquarium

shedd aquarium blue website layout

Chester Zoo

chester zoo website green nature

Houston Zoo

houston zoo texas website natural park

Furuvik Zoo

furuvik zoo sweden website

Sea Life Aquarium

kelly tarlton sea life aquarium website

Clearwater Marine Aquarium

clearwater marine aquarium website layout

Potter Park Zoo

potter park zoo green simple layout

Chessington

chessington world of adventure website

Florida Aquarium

the blue florida aquarium website

New England Aquarium

new england aquarium website layout

Virginia Zoo

norfolk virginia zoo website brown layout

San Diego Zoo

san diego zoo safari park website layout

The Living Desert

the living desert zoo and gardens website

Phoenix Zoo

phoenix arizona zoo website

International Animal Sanctuary

exotic international animal sanctuary website

Parken Zoo

parken zoo green website layout

Center for Great Apes

green website center for great apes layout

El Paso Zoo

el paso california zoo website design

Buttonwood Park Zoo

buttonwood park zoo website layout

Zoo New England

zoo new england website layout dark simple

Georgia Aquarium

georgia aquarium website design inspiration

Mote

mote marine laboratory and aquarium website


Advertise here with BSA

]]>
http://designm.ag/web-designs/35-inspiring-websites-zoos-and-aquariums/feed/ 0
Using PSD Freebies to Create Fast & Efficient Website Mockupshttp://designm.ag/web-designs/freebies-fast-efficient-website-mockups/ http://designm.ag/web-designs/freebies-fast-efficient-website-mockups/#comments Mon, 09 Feb 2015 04:02:57 +0000 http://designm.ag/?p=118910

Advertise here with BSA


Building website mockups in Photoshop is a lot like using Q-tips to clean your ears. Not exactly the original purpose but it works great! However unlike the household cotton swab, Photoshop is a large graphics editing program that takes hours of practice to learn even rudimentary tasks. For web designers this process can feel like a hopeless pipe dream.

But one of the quickest ways to start learning Photoshop is by creating your own simple mockups with existing PSD elements. You'll find yourself editing shapes and colors to fit into a layout while organizing the composition from your imagination. In this post I'd like to share ideas for using free PSD files in Photoshop to get familiar with creating website mockups.


Advertise here with BSA

]]>

Advertise here with BSA


Building website mockups in Photoshop is a lot like using Q-tips to clean your ears. Not exactly the original purpose but it works great! However unlike the household cotton swab, Photoshop is a large graphics editing program that takes hours of practice to learn even rudimentary tasks. For web designers this process can feel like a hopeless pipe dream.

But one of the quickest ways to start learning Photoshop is by creating your own simple mockups with existing PSD elements. You’ll find yourself editing shapes and colors to fit into a layout while organizing the composition from your imagination. In this post I’d like to share ideas for using free PSD files in Photoshop to get familiar with creating website mockups.

Deconstructing UI Elements

Firstly I’d recommend downloading a few PSDs or UI kits that catch your interest. There are lots of great websites like 365psd or Freebiesbug you can browse. Then by digging through these PSD files you can learn how a designer created each individual element.

freebies bug free psds homepage

During this reverse engineering process you’ll learn a lot about Photoshop for web design. Look over many different files to get a broad sense of how certain elements are created. Since there is often more than one way to perform a task you should learn which way is the quickest method.

Aside from analyzing the design process you’ll also grow familiar with the many diverse palette windows. Layers and layer effects are huge in web design. It is worth internalizing these different effects and how they change or mold a shape layer.

Icons & Interfaces

Website interface elements and icons are two of the most difficult items to create from scratch. Most of the great UI kits available online should include one(if not both) of these items. There are even some tutorials which expound the creation process in detail.

Generally the most common interface elements are buttons, input fields, nav menus, or image/content rotators. Icons are useful in almost every piece from the navigation to the actual page content. It just requires a little ingenuity to find exactly what you’re looking for.

icon finder search engine iconsets

Plenty of free websites like Iconfinder list free open source iconsets for use in design projects. Many of the icons are released as full sets with other icons designed in a similar style. Sometimes these icons can be great for new websites that need a little extra kick – but even just practicing mockup design with related icons can be fun and educational.

When looking for PSDs try to stay project-oriented. Think specifically about what you need and why you need it. Plus since you’re working with PSDs the elements should be amenable to whatever the situation. This means you can often change drop shadows, colors, text, and even the shape of elements as needed.

Reusing Common Effects

Aside from just copying shape layers I’d also recommend you learn to copy layer effects as well. Each PSD freebie will likely have a few layers with different effects denoted by the tiny “fx” symbol on the side of the layers palette. Clicking the drop-down arrow will expand a full list of effects that you can edit.

To copy a layer effect simply alt+click and hold on the tiny “fx” symbol over to the right-hand side, then drag to another layer and release. You’ll know if the effect is being copied because when dragging you’ll see the same “fx” symbol following your mouse cursor. This is a quick and efficient technique to apply pre-rendered effects onto your own page elements.

This is also a handy trick to use when learning how to craft your own layer effects. Nobody is just born with an innate understanding of Photoshop or the plentiful cornucopia of layer effects. Most of the learning process is achieved through trial and error. But obviously you can expedite the process by copying what others have done and learning from professionals.

Recently I put together a brief tutorial explaining how to design iOS buttons from shape layers. This covers some of the more basic effects you might find in any typical freebie. But starting with the basics is always a good first step!

Overall just keep yourself from getting discouraged at the massive library of possibilities. Adobe software is quite intimidating because of the blatantly large opportunity for mistake. But the only way to improve is to keep practicing and learning from these mistakes. Thankfully PSD freebies can help get the ball rolling in a positive direction.

Keep a Collection

One of the simplest actions you can take is to start saving PSDs locally on your computer. Make an organized collection of your favorite freebies split into folders based on their purpose(forms, buttons, UI kits, full templates, etc.). This folder will be useful if any links go offline and you don’t have access to download a particular freebie anymore.

Along with these tips I also want to share a collection of PSD freebies which should help anyone trying to improve their design skills. Each of the examples below are free to download and use on any number of projects. Start small but think big – over time you’ll realize how certain page elements fit into the overall layout.

Social Badge UI Kit

twitter facebook pinterest social badges psd

Quick Chat

freebie ui quick chat psd

Activity Feed

freebie psd activity feed ui

Website Homepage

dark brown gaia homepage ui psd

Dashboard Elements

freebie psd dashboard elements ui

Needle

needle icon dark ui psd freebie

Green Line Icons

free green line iconset psd

Sweet Icon Set

sweet fruit freebies rectangles icons

Mobile Login Form

dark iphone login form psd

Avalon Studio Mockup

avalon studio website psd freebie


Advertise here with BSA

]]>
http://designm.ag/web-designs/freebies-fast-efficient-website-mockups/feed/ 0
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