9 Tips on How To Improve Yourself as a Web Designer

There are times in life where everything goes well, people like your work and you get more and more clients. But sometimes the “business” stops, work flow decreases, you get bored and uninspired, and you stagnate. The reasons behind this can vary, but mostly it’s just because you’re feeling uninspired and have lost your drive. It’s very easy to lose inspiration, when we are not surrounded by a learning and inspirational community.

You know you love what you do, so don’t quit. In order to counteract the situation, you need to go further, learn new things, and adopt new work methods. You will find out that maybe you just need a push or build your own motivation and energy to go forward, or that maybe you are just afraid to step up.

So grab a pen and get ready for new resolutions.

1. A Tutorial a Day

Tutorials are the best way to improve your skills. Setting this goal for yourself ensures you don’t stagnate and keeps you motivated. Repeating this process every day or at least every week is half-way to success, and it’s also entertaining. If you like several areas, try to invest in a different area each day. 1stwebdesigner, PSDtuts or Photoshop Lady are great examples of free and high-quality tutorial resources. Ten years ago, web designers and developers didn’t have the possibilities you have now, and they still managed to evolve. Those people are now teaching you for free, while you remain in the comfort of your home.

2. Do What They Do

If you have favourite design layouts, icons, effects, etc, you should try to recreate them. Sometimes the best way to learn is finding out how others did it. If you can’t get there, ask for help. There are also plenty of great  Photoshop to HTML tutorials out there, which can help you discover how some effects and functionalities are built. As soon as you recreate your favourite work pieces, you reach the same quality level  as the author on that moment, and you are ready to the next level.

3. Redecorate Your Workspace

I don’t know about you, but for me redecorating my workspace is a plus for motivation, and helps my creativity. I’m not saying you need to buy new furniture, but move your desk or monitor to a different position, or stick a poster on your wall. The same old workspace layout and routine discourage your will, creativity, and motivation to work. Sometimes, you may realize that having two monitors side-by-side instead of having them apart, or having your desk near your books, will tremendously increase your work efficiency.

4. Read Books, Magazines, and Interviews

There are great books and magazines out there. I personally love magazines like Web Designer and Computer Arts, but you have so many more to choose from. They are inspiring and have plenty of good tutorials and articles. Books are another invaluable source of information, and although I don’t read books very often, they are truly another great addition to your shelf . Reading 15 pages a day is quick, gives you valuable insights, and at the end of the month you realize you have read an entire book. Do the same the next month. I also like to read interviews, I believe it’s a great way to learnnew things from the best in the field.

5. Build Relationships

Having an active online, and if possible offline presence is an important learning and motivational process. Try to be involved in conferences, events, workshops, etc. They are extremely useful to increase your list of contacts and ideas. Also try to talk with everyone and not only designers, since they are not your potential clients.

6. Grab a Moleskine

The first thing you need to do before you start any web design or development project, is to put your ideas on paper.  You don’t actually need to use a Moleskine – I’m just a fan. But if you need some motivation to start organizing your ideas, grab a sketchbook and take it everywhere. It can really improve your brainstorming, organization and work process.

7. Read Design Blogs

Books and Magazines are not the only material you should read. Personally I believe blogs should be number one on your list. Reading daily articles gives you good insights, ideas, tutorials, inspiration, and much more, which helps your work tremendously. Do not forget to share your ideas by commenting on other people’s work, and write your questions every time you have them.

8. Plan Your Days

I’ve started to do this recently and I realized it increased my work performance tremendously. I personally love to use http://teuxdeux.com, but it doesn’t really matter which software you use or how you do it. The important thing is to keep your work and life organized. Start your weekend by planning your week, or at least try to plan on a daily basis.

9. Try New Software

One thing I always like to do is to read about new apps, web apps, and software, that can help me improve my work. Woopra is a hosted analytics service which I didn’t know anything about until I searched google for “Web Analytics Tools That Rivals Google”. A great tool doesn’t necessarily need to be immediately known.

Conclusion

Working as a freelancer can be very isolating, and the will and motivation to keep going is what makes the differences between the good and the great. Never forget about the one rule – Don’t stop.

Everyone has strengths, you just need to find yours.

copyrights@1stwebdesigner.com

20 steps to the perfect website layout

01. Put your thoughts on paper first

Very initial sketches of an illustration series about cities around the world

This seems very obvious but I've found too often that designers jump straight into Photoshop before giving any thought to the problem they are trying to solve. Design is about solving problems and those problems can't be resolved through gradients or shadows but through a good layout and a clear hierarchy. Think about the content, the layout and the functionality before starting to drop shadows.

02. Start sketching a top level framework

Sketching a basic wires will help you to resolve UX problems and to structure the layout

When I'm asked to create a look and feel for a project, the first thing I do is come-up with a top level framework that solves all the design problems. The framework is the UI that surrounds the content and helps to perform actions and navigate through it. It includes the navigation and components like sidebars and bottom bars.

If you approach your design from this perspective you will have a clear understanding of what your layout needs will be when designing sections beyond the homepage.

03. Add a grid to your PSD

An example of a 978 Grid with a 10px baseline

It's as simple as it sounds. Before starting to design anything in Photoshop you need a proper grid to start with. There are no valid excuses for starting without a grid, and yes if you don't, I can assure in one way or another, the design won't look as good.

A grid will help you to structure the layout of the different sections; it will guide you through the specific screen size requirements, and help you to create responsive templates, to be consistent in terms of spacing as well as many other design issues.

04. Choose your typography

A general rule of thumb is to use no more than two different typefaces in a website layout

Exploring different typefaces and colours is part of the discovery phase of a project. I would recommend not using more than two different typefaces in a website but it really depends on its nature you could use more or less. Overall choose a font that is easy to read for long amount of text and be more playful with titles and call to actions. Don't be afraid of using big fonts and overall be playful and consistent when using typography.

05. Select your colour theme

Use a limited set of colours and tones to guard against visual overload

Throughout the process of choosing a set of typefaces to use you should start exploring what colours you will use in the UI, backgrounds, and text. In terms of colours I recommend using a limited set of colours and tones for the general user interface.

It's important to apply those consistently across the UI depending on the element's functionality. Think about the layout of sites like Facebook, Twitter, Quora, and Vimeo. Besides the UI there shouldn't be any colour restriction for illustrations or graphic details as long as they don't interfere with the functionality of the components.

06. Divide the layout

The simpler the structure of the site, the easier it is for users to navigate

Each section in your site needs to tell a story. It needs a reason and a final outcome for the user. The layout needs to help the content highlighting what are the most important pieces in that story. In reality there shouldn't be too many call outs on a page so everything should drive to that final "What can I do here".

Think about the most simple layout you can imagine for a simple purpose and start adding components that are necessary. At the end you'll be surprise how hard is to keep it simple.

07. Rethink the established

Do we really need a search button any more? In most of the cases the answer is no

As designers we shape the way users browse the internet, it's up to us to decide how many steps a simple action will take and how efficient our site will be. Design patterns and conventions are there because they work but sometimes they are there because no one spent enough time evaluating them or rethinking them. It's important to rethink the established interactive patterns on any component and to see how we can improve them.

08. Challenge yourself

I encourage every designer out there to challenge themselves on every project. Innovation doesn't always come as a requirement for the project so it's up to us to come up with something interaction or design related. Examples of different challenges could include using a new grid system, creating a new component, or even minor challenges like avoiding blend modes or using a specific colour.

09. Pay attention to the details

Game work in progress: detail view

This statement has been overused lately but it's not always visible in the final product. Depending on the concept behind the project, that "love" could come in different ways.

It could be a small interaction, an unexpected animation or an aesthetic touch like a little gradient in a button or a subtle stroke around a box in the background. But overall this touch is essential and also natural if you really enjoy what you do.

10. Treat every component as if it could be presented to a design contest

Pay attention to every component, and the whole will be more than the sum of its parts

I have to admit that this piece of advice is not mine. I heard it in the past at Fantasy Interactive and I was shocked by how clear and true this statement was. Each component needs to be designed as it could stand alone as the best component ever. Sometimes designers leave some parts of a site last on their to-do list and show little respect to them at the end.

11. Sharpen your work

To avoid blurry pixels, try to set the right contrast between strokes and background or background colours

Besides any aesthetic consideration there are some common things that have to be avoided in order to create a clean and correct piece of work. Some things you should be on the lookout for when trying to sharpen your work should include gradients banding, blurry edges, font rendering options (some fonts depending on their size are best viewed on a specific render mode), and strokes that merge badly with the background.

These are just few basic examples of issues to look for but in reality the list is endless. Always look at your design as a whole to see if everything works well and then analyse each component individually more carefully.

12. Tidy up your PSDs

This is (along with the use of a grid) one of the most important pieces of advice when designing with Photoshop. Despite the size of the project and the number of designers working on it, you need to keep your files clean. This will make it easier to export different sections, to speed-up the design process and to work with shared files with other designers.

13. Design the best case scenario but prepare for the worst

Bear in mind how your layout will work on different devices and screen sizes

As designers our job is to solve problems through different constraints. With web design, the constraints range from conceptual and technical issues to content related issues.

We need to build a site that can work not only in the ideal scenario, but also in the worst-case scenario. For instance a user could be using a really small screen and check the site when there is barely any content on it so it looks broken.

However for the purpose of presenting our work I always strongly recommend building the best case scenario for it. Therefore we are going to display the ideal amount of text and we are going to show the site inside the ideal browser size that should be the most common scenario for most users using it.

14. Obsess over the design until you hate it

If you are passionate about design I'm sure this is something you are already doing. Whenever I finish a comp I feel proud of, I tend to make that comp a part of my life. I take screenshots of it, check it out it different devices, make wallpapers of it and even print it and hang it on the wall.

Throughout this process I get to a point where I finally end up hating it; I start seeing everything that's wrong with it and eventually I change it. Disliking your previous work is sign of maturity, and it means that you are finally learning from your own mistakes.

15. Avoid spending too much time on a concept before sharing it with the client

When proposing an interactive concept or a design 'look and feel', you need to ensure that you and the client are both on the same page as soon as possible. Once that happens and the initial concept is approved you can relax a little bit and start production.

But if after presenting the first concept and the client doesn't fall in love with it, you should gather enough feedback to bring a second more appropriate concept to the table.

16. Be your developer's best friend

Developers are creative people and they love their jobs as much as you do. But they are not always included in a project from the very beginning and often times only get involved when the concept is decided and their creative role has been overridden. This process is wrong; some of the best ideas come from the development team, so make sure you team up with them from the very beginning of the project. Sharing your concepts and excitement with them will lead to better ideas and a better execution in the end.

17. Presentations: explain it to me like I'm a four-year-old

It's just as important to produce great work as it is to present it. Your best design can be ignored or thrown away if you don't present it properly. Always keep in mind that what is totally clear to you might not be that clear to somebody seeing your design for the first time.

18. Love each of your ideas but don't get too attached to them

There is a thin line between knowing when to advocate for your ideas and learning to realise when your team or client doesn't see them as 'the one'. As a designer you need to believe firmly in what you do, but you should also be open to quickly turning over that idea and coming up with something else. Don't forget that there is more than one unique solution.

19. Track down your design during the development process

If you work inside an agency you might have realised how easy it is to find yourself struggling with the design of a new project when the previous one you just finished is being developed. Contrary to general belief, your work on a project doesn't end when the PSD and styles- sheet are delivered.

If you really care about your designs and interaction ideas being well executed, check in on your old best friends the developers from time to time and help them as much as they need to ensure that everything little pixel is perfect.

20. Show your work in progress

Share your style sheets and work in progress components with the community

As part of a community of designers, we all love to see not just the final results but also the work in progress. Sometimes the best part of a project is left out for several reasons and gets lost in your Archive folder. Once the project is done and you get the approval from the client/producer promote it and if possible create a case study with the work in progress and designs that didn't make it to the final release. You will be helping by contributing to the community's knowledge and you will get valuable feedback in return.

Words: Claudio Guglieri

Best Free Website Builders

It’s become very popular nowadays to use website builders to create your own website. Advantages of using website creators are obvious – many free website builders make it easy and simple enough to independently build a professional website without any special web development skills. There are tens of free website builders on the market and best of them offer ample opportunities for customization and editing of website design. You can select desired website template and customize it as you need it – you can change absolutely everything: site structure, location of content blocks, color scheme and much more. Almost all leading free website builders offer advanced premium version alongside with free one. Thus, for a small monthly fee, you can expand the capabilities of your free website and get your own domain name, more web pages, more disk space or even turn your website into a fully functional online store. 

Goal of this collection is to show you the most interesting free website builders that will help you to create your own website absolutely for free. All website builders listed in this collection provide a fully functional working version of website without limited by time trial version. So let’s start! 

WIX

 It’s obvious that WIX is the most popular free website builder. WIX specializes on search engine friendly HTML5 websites. If you’re looking for easy-to-use and at the same time advanced drag&drop website editor, huge collection of professional looking websites templates and lots of templates categories to choose from – then WIX will be a perfect solution. With its help you will be able to create any website: a personal page or online portfolio, any business website or even one-page resume. Alongside with free hosting your free website built on WIX will have second level domain, limited to 500MB storage space and to 1G bandwidth, built-in Google Analytics, quality support and Wix brand ads on all pages of your website. 

  

WebsiteBuilder

 Market of free website builders provide us professional website builder with quite obvious name WebsiteBuilder.com. WebsiteBuilder.com will allow you to create your professional looking website absolutely for free. One of the main advantages of this website builders is a great collection of website designs – hundreds of gorgeous website templates cover many popular categories. With their easy to use drag&drop editor you really won’t need any HTML/CSS skills to launch your website. As well as other free website builders WebsiteBuilder.com will add a banner in a footer and give you a free sub-domain name for your free website. 

IM Creator 

IMCreator.com makes the process of creating free website quite simple with their intuitive drag&drop editor. Like other free website builders IMCreator with its free package offers you free domain name of second level and 50MB of storage. But the main thing about IMCreator free website builder is their regularly updated collection of website templates – each month you’ll be able to find dozens of new template with modern and creative designs. And thanks to adherence to web-standards your free website on IMCreator will look perfect on all browsers as well as on mobile phones.

Sitey 

 If you’re in need of creating a proffesional looking website then you should definetely check Sitey.com. This is quite new but at the same time very powerful free website builder. For free plan Sitey.com offers 50MB storage, 5MB file upload and 1GB bandwidth. Also you will get a mobile version of your website, access to 100+ proffesional website templates and image gallery, easy to integrate social media links. And all listed features are free. As all the rest website builders Sitey.com leaves a small ads on your free website. 

Moonfruit

Moonfruit.com is an easy-to-use free website builder with plenty creative templates. Free package from Moonfruit includes only 1 website with max 15 pages on a second level domain, 20MB of storage and 1GB bandwidth, no customer support and some Moonfruit ads. Pleasant feature that alongside with web version of your website Moonfruit software automatically creates a mobile optimized version and can push your entire shop into Facebook with just a few clicks. Read more at: 

What Are Top 7 Graphic And Web Design Trends in 2015 To Look Out For?

What trends you need to watch out for this year?

 Find Out In This Article If You Know The Latest Web Design Trends of 2015

For every trend, I will provide you some data and research that supports the fact followed with examples of real websites utilizing it. I will also recommend some tools, resources and services for implementing the trend into your project.

Brave People uses a slideshow of full-width genuine photo backgrounds that create an impression of a humanistic brand.

1. Imagery Web Design Trend: Large Background Images

Stock photos still play a major role in digital communication, whether it’s an eCommerce store, portfolio or blog. People use images to engage more with users and illustrate the message they are trying to send. For a long time, the web has been suffering from cheesy and fake looking stock photography with super happy people wearing perfect smiles and suits.

Thanks to communities, like Unsplash, Picjumbo, Death to the Stock Photo because designers now can utilize beautiful and, most importantly, natural looking photos for their web designs or blog posts. We’ve seen many websites using photos from Unsplash and it simply looks amazing.

“Users pay close attention to photos and other images that contain relevant information but ignore fluffy pictures used to “jazz up” Web pages.” – Nielsen Norman Group

The Nielsen Norman Group eyetracking studies have shown that people generally ignore cheesy and artificial looking photos. However, 2015 is the year of genuine imagery and you should take advantage of using real photos to connect with your audience in a genuine way.

Examples of Large Background Images in WebDesign

Grain & Mortar is another great example of beautiful imagery in web design.

Grain & Mortar

Natural and real photography resonates with people, instead of using cheesy stock photos. Grain & Mortar used an informal shot of their team that connects with the visitors very well.

Grovemade has a beautiful, product-focused approach when it comes to their website.

Grovemade

People make purchases based on their emotions. Grovemade utilizes high-quality photos of their products that definitely add a feeling of trustworthy organization and awakens a desire to buy the product.

Free Stock Photo Websites:

• Unsplash is a great place for getting great looking photos of various objects including people, technology, nature, and more. You can use photos for personal or commercial purposes without any attribution.
• Raumrot is a collection of free handpicked stock photos for your commercial and personal works.
• Gratisography provides free beautiful high quality photos with a creative spin for your personal and commercial projects.
• Life of Pix has a huge variety of natural looking stock photos that are free to use for any project without any attribution.
• Death to the Stock Photo is an exclusive membership that sends free stock photos that you can use any way you wish to your inbox once a month .
• Picjumbo is an ever-growing collection of free stock photos that don’t require attribution.
• Jay Mantri exceptional quality stock photos that you can use for free for both personal and commercial projects.

Premium Stock Photo Websites:

• Stocksy offers a tightly curated collection of high-quality stock photos to anyone seeking modern, relevant, authentic images.
• 500px Prime provides super exclusive stock photos. Most of the photos on 500px Prime have never been used in commercial campaigns before.
• Refe focuses on providing high-quality imagery of people interacting with technology for your projects.
• Snapwire connects mobile photographers with businesses and brands that need creative imagery. They also have a huge database of stock photos.
• Offset is a truly unique collection of images from award-winning artists.

Airbnb takes advantage of beautiful videos in order to complement their ‘Belong Anywhere’ campaign.

2. Video Background WebDesign Trend

Websites generally are storytelling tools and storytelling can be more effective when visuals and motion are involved so the ideas and emotions can be transferred to the visitor easier. We’ve seen businesses implementing video in their websites. In 2015, this trend will grow even more with the endless possibilities of 3D graphics and HD quality videos to build that impression of real life experience.

According to ClickZ people love video as statistics show mind blowing numbers of video consumption online.

Users prefer content in a visual format, which explains why online content video views have finally topped 50 billion views each month.

The exponential growth of YouTube proves the fact that old school TV is dying and people prefer to choose what they want to see. SocialTimes infographic reveals surprising numbers of how US millennials are abandoning TV.

YouTube reaches more US adults aged 18–34 than any cable network. Users upload 100 hours of video to YouTube every minute.

The downside of this trend, however, is extended load time. Many websites solve this problem by beautifully designed loading screens but it doesn’t change the fact that people still have to wait for the full experience to load.

Examples of Video Backgrounds in Websites

A Bloom of Ruins is a great example of subtle video being used as a full website background.

A Bloom of Ruins

A Bloom of Ruins creates a memorable experience by utilizing mysterious light and blurred imagery in the video background and loads super fast making a magical overall look and feel.

Bloomberg Media uses video to demonstrate the diversity and capabilities of their work.

Bloomberg Media

Bloomberg Media is a media company whose focus is large amounts of information and breaking news. Utilizing video that is activated by hovering your mouse over add this feeling of being a trustworthy and technology savvy company.

3. Personal Branding Trend In WebDesign

Personal branding exists whether you focus on it or not. Your identity and your image (how you are perceived by other people) are very different. The main focus of personal branding is to align vision and mission so you are perceived as you’d like to be instead of people speculating and having different opinions about you.

“Your brand is what people say about you when you’re not in the room” – Jeff Bezos, Founder of Amazon

I highly recommend you check Neil Patel’s “The Complete Guide to Building Your Personal Brand” to better understand the importance of personal branding and actionable steps to get where you want to be.

Examples of Personal Branding in Websites

An1ken Group website isn’t yet another faceless organization. Nicely used profile photo and a simple description says it all.

An1ken Group

Founder of An1ken, Jacques van Heerden makes sure people get to know him, his company values and what his company is all about. No hiding online – visit the website now and tell me does this company look and sound trustworthy to you? It totally does for me.

The Daily Positive is highly associated with Dale Partridge personality.

The Daily Positive

Having a human behind the brand or organization makes people trust it and help them make a decisions easier. Personal photo along with a combination of  high number of followers as a social proof ensures people that it is worth following.

Tobias van Schneider has a very memorable portrait photo accompanied with bold typography and straightforward facts.

Tobias van Schneider

Bold, straightforward and effective. Tobias uses lots of negative space to draw attention to his personal brand and make communication clear with concise facts.

WordPress Themes Focused On Personal Branding

When designing a personal brand focused website consider including your vision or mission statement. Use personal photos, add some credibility, such as list press, interviews, published content, and achievements.

Rosemary is a light & bright blog theme, tailored to showcase your content in an effortlessly timeless style.

Rosemary WordPress Theme ($38)

Rosemary is a perfect blog theme for anyone willing to build a personal following. It has a clean, content-focused layout and specific widget designed to sell yourself by using your profile photo, description and all the social networks you are in.

Readme is a responsive WordPress theme focused on readability with a minimalist design and optimized for mobile.

Readme WordPress Theme ($48)

A trendy and minimalistic blog theme with a strong focus on the author, this theme offers a designated area for your photo, short elevator pitch, and call to action button.

Vanity is a recasting of the business card. Made with creative professionals in mind.

Vanity Tumblr Theme ($49)

People are interested in other people. People buy from people, not from companies. This theme has been designed to help you make that human connection with other people so you can brand yourself better.

It’s Nice That combines beautiful visuals and elegant typography to build a pleasant mobile reading experience.

4. Web Design Trend – Mobile First Websites

Web usage patterns are changing and statistics cannot be ignored if you want to succeed in today’s market. Every third website visitor now uses a mobile device and websites that do not offer mobile optimised versions are causing an unpleasant experience and eventually losses money as users tend to abandon the website if it doesn’t render well on mobile device.

“The number of people using mobile devices outstripped people on desktop computers in 2014.” – Jim Edwards, Business Insider, April 2014

Adopt a mobile first approach when designing or redesigning your website to ensure that you maximize your potential and reach more of your target audience. This means you have to be brief, focused on the content and performance which takes advantage of advanced features, like mobility, GPS, touch screen and more, that desktops aren’t able to offer. In 2015, we’ll be seeing the continuous growth of mobile web design development and spectacular innovations based on the ever changing market behavior.

Read more about Mobile First, an adaptive, future-friendly solution for website design.

Examples of Websites Built Mobile First

The Verge is a perfect example of tapable space and finger friendly buttons, (read post titles with illustrations).

The Verge

The Verge is a super visually heavy news website with lots of colors and imagery. However, they have done a great job on optimizing it for mobile devices with a clean layout and close relation to the desktop version.

Newsweek is a great example of heavy content website that looks organised and lightweight on mobile device.

Newsweek

Keep it simple is the design approach the Newsweek design team has taken to form their mobile version with loads of white space and clean typography and accompanied by relevant imagery.

Responsive and Mobile Friendly WordPress Themes

The responsive or mobile-friendly version of your website can easily double your traffic as people will be empowered to access your website any time anywhere. The themes below are suitable for various projects and are responsive already.

BeTheme is a responsive template with nice imagery and clean flat design.

BeTheme WordPress Theme ($58)

In 2015, responsive is a must, not just a nice to have.  The BeTheme is an extremely advanced, customizable and responsive WordPress theme with built-in drag & drop tool that gives unlimited possibilities.

Salient delivers great graphics and sleek look and feel on any screen size.

Salient WordPress Theme ($58)

When designing a content heavy website you always need to take care of how mobile devices will display it. Salient is a responsive and retina ready WordPress theme with unlimited customizing possibilities that will look stunning on any type of device.

Blocks looks great on both, desktop and mobile devices.

Blocks HTML Template ($20)

Most of app websites don’t require multiple pages to sell the idea. The Blocks iPhone App Website Template is a responsive 1 Page iPhone App HTML website template which looks great and is super easy to update and use.

A lot of white space combined with strict grid and rectangle shaped content blocks look very balanced and trustworthy.

5. Modular Design (Grid Based) WebDesign Trend

Modular or grid based design, also known as cards/tiles design approach, is not new in the web design scene, but it started to get more traction as it is reusable and very responsive-friendly with the tiles stack nicely on different screens and form a flexible layout that looks nice and clean on any screen size.

Modular design, or “modularity in design”, is a design approach that subdivides a system into smaller parts called modules or skids, that can be independently created and then used in different systems. A modular system can be characterized by functional partitioning into discrete scalable, reusable modules, rigorous use of well-defined modular interfaces, and making use of industry standards for interfaces. – Wikipedia

One of the best known examples of modular design is the Microsoft Metro style which doesn’t seem to be very successful, though. However, many web apps like Pinterest,Instagram, Designspiration are utilizing the grid based design very successfully.

Website Examples of Modular Design WebDesign Trend

A nice and clean example of how tiles are used to lay down the content of the website.

Anthony John Group

Anthony John Group has a clean, image based grid with just enough of white space to make things look balanced and trustworthy.

Well Made Studio combines pastel color palette with clearly defined cards for content pieces laid out in an organized grid.

Well Made Studio

Well Made Studio has a harmonious combination of pastel color palette with authentic typeface and balanced spacing.

Grid Based WordPress Themes

Grids are great for displaying galleries but also can work well with written or multimedia content. Themes below have unique and creative take on grid based layout.

Vienu is a nicely designed magazine theme with beautifully executed modular design approach in mind.

Vienu WordPress Theme ($43)

It is hard to find a visually appealing magazine theme as they are always overloaded with information, Vienu, however, has a balance between tiles and list blocks that simply work together creating a pleasant experience.

Trim is a notably sleek and tidy WordPress blog and portfolio theme built using grid.

Trim WordPress Theme ($58)

Trim is an elegant theme that utilizes grid layout in a very artistic and visually appealing way. Whether you have an image based post or just text, you are covered. Everything you publish on this theme will look great.

Mindig is a flat & multipurpose eCommerce theme for WordPress that utilizes the modular design approach.

Mindig WordPress Theme ($63)

When building an e-commerce store you should think of ways to lay your products in a way that appeal to your potential customers. Mindig has a nice grid based layout with a professional use of white space and powerful typography.

Apple MacBook has designed a super long single page to represent its new product emphasizing beautiful shots of the product accompanied with smart copy. The goal is simple, convince user to buy by the end of the page.

6. One Page (Single Page) Web Design Trend

It simply makes more sense from the UX perspective – Rebecca Gordon’s research“Everybody Scrolls” shows that users love scrolling.

Research conducted by Huge shows that despite the layout structure nearly 90% of visitors will scroll until the bottom.

Scrolling is winning over clicking due to the changing web browsing patterns. As mentioned earlier, mobile device usage growth has influenced the way websites are designed nowadays. With smaller screens and super natural touch scrolling movement, people prefer to scroll around instead of clicking on the links and waiting for the content to appear.

One pagers gained momentum a couple of years ago but now it has started to make even more sense and people seem to enjoy it as it presents huge chunks of information at once in a nicely designed step by step flow.

Examples of Single Page Websites

Spotify’s Year in Music allows a natural timeline of the year in an easy to browse manner.

Spotify’s Year in Music 2014

One page layouts are popular among yearly reviews like Spotify’s Year in Music. Large amounts of data and statistics digested for mass consumption with a visual and interactive approach.

Great example of the previously discussed Personal Branding trend combined with One Page design philosophy.

Brandon Gore

One page design philosophy starts to get traction among individuals building personal portfolios, Brandon Gore being one of them. He includes a personal portrait photo to better connect with the visitor and provides some essential information about himself, his work, and his contact numbers.

One Page (Single Page) WordPress Themes

As you already know, people don’t mind scrolling but loading a lot of content in one page might take longer than splitting content to different pages. However, you expose your users more to all of your content at once.

Supernova is a nicely designed layout that can be easily customized and used as an impressive one page website.

Supernova WordPress Theme ($45)

Supernova is a multi-purpose theme with innovative and state-of-art techniques and design features such as transparent menus and elements, parallax effects, motion backgrounds, and more.

Appster is an elegant one page WordPress theme perfect for promoting your application.

Appster WordPress Theme ($43)

With an ever-growing market of mobile apps, one page app websites prove to work and produce positive results, such as getting followers and downloads. Appster is a sleek one page website layout with a focus on your app.

Obsession is a flexible and highly customizable multi & one page WordPress theme.

Obsession WordPress Theme ($43)

This theme has all the popular features a one-page website should have, a full-width slider with clean copy and clear call to action button and a customizable content area that delivers everything you may need on your website.

Strong focus on key brand color and loads of negative space with an emphasis on the product.

7. Material/Flat design Web Design Trend

Flat design was quickly adopted by designers and  big tech companies like Apple that basically killed skeumorphism very quickly.

Some of the advantages of using the new paradigm are that flat design forces designers to focus more on content, pick the right colors to help users navigate through designs, and use white space with care.

68% [of web designers] think that flat web design will still be around five years from now.

The popularity of Google Material Design philosophy is being embraced by many designers and developers that lead to cleaner and more organized digital products which can be used without the users having to learn the complex curve. Research conducted by Usabilla shows that web designers are in favor of the flat design movement.

Examples of Flat Web Design Trend Websites

Format has a lovely combination of stunning image combined with sleek flat graphics in a balanced composition.

Format

The main function of the flat design  is to put emphasis on content while design has to serve as a communication tool. Format has mastered flat design by combining clean type with flat color scheme and stunning imagery.

Flat design in action – clean layout with unusual color palette and loads of white space.

Neo

Neo has a balanced website design with dozens of negative space that makes reading very pleasurable. Also thanks to perfectly chosen typefaces. Flat design also works very well with minimal approach. for example, Neo delivers essential information with nothing to add or remove.

Flat Design Trend WordPress Themes & Templates

Flat design is extremely trendy these days and and I’ve mentioned the reasons why above. Themes below will get you on the trend train in no time.

Rock Group is a unique and highly customizable flat design infographic style theme for WordPress.

Rock Group WordPress Theme ($58)

Infographics generate 37.5% more backlinks than a standard blog post, says marketing expert Neil Patel. This theme is basically a huge interactive infographic that used with care can make wonders for your campaigns, not to mention the trendy flat look.

Beautifully designed and super clean flat admin dashboard template.

SlickLab Admin Dashboard Template ($21)

SlickLab admin dashboard template has a clean and clear structure with all potential widgets designed that any platform would require. White space, contrast, and typefaces all work very well together in this template.

Mies is a very clean and simple flat WordPress theme perfect for creatives.

Mies WordPress Theme ($58)

People are visual creatures – the more visual your storytelling is online, the better chances of you being remembered. Mies theme has a nice flat look and feel with oversized typography, obvious call to action buttons, and some sleek interactions.

Flat UI Pro kit offers clean pre-designed elements for quick prototyping in trendy flat style.

Flat UI Pro (from $39)

Bootstrap based UI kit with loads of pre-designed elements from buttons to forms to various multimedia assets will save you a lot of time when prototyping or designing your website in a clean and trendy manner.

Summary and Conclusion About Web Design Trends in 2015

If you’ve been following the web design scene for some time you may have felt what is coming next. There are no significant changes in 2015 but some trends that started getting traction in 2014 will continue growing and affecting more people while others will slowly fade away. However, web design is evolving very quickly and, most importantly, it adapts to people’s behavior and technology advancements.

In this article I’ve touched some trends that will be on the spotlight for the rest of the year and the resources I’ve provided will help you to quickly get into the game.

content courtesy: http://www.1stwebdesigner.com/