Here are the best freebies for designers from last month (June). We have free GUI templates, icon sets, fonts, Photoshop brushes, PSD templates, textures… and everything else inbetween.

Here they are:

Icon Sets

Thin Stroke Icons (PSD)

Download Page

Designers who have been paying attention to online blogs and news sources will have noticed the increasing trend of magazine website layouts. Specifically news listings where you may find a dozen stories all related to different topics which are grouped together in one section. It is a popular style because readers will peruse through these individual news feeds looking for a headline to catch their eye.

In this article I want to look deeper at the popularity of this design style. More specifically delving into homepage layouts which have become more dynamic and influential compared with blog websites 5-10 years ago. Numerous magazines have taken their publications online to support a wider audience. The benefits are tremendous if you can manage to organize content in a plentiful yet easily-accessible manner.

The Feel of a Magazine

You will notice the majority of these websites actually do look and feel like a digital magazine. There is no paper to hold or pages to flip, but the colors and typography mirror a printed page. Of course this is not always the case, but you may find this design aesthetic as the perfect fit.

Readers who understand magazine designs will typically have an easier time navigating the site. You do not need to worry so much about creating a header navigation aside from categories, and even these could be appended into a sidebar. Most of your white space should be taken up by headlines and featured news.

The website layout for Brides does an excellent job conveying the printed magazine feeling. Each story has a typical thumbnail image and there are even blocks mid-way down the page breaking up featured news and small advertisements. There is also an order form to pickup physical printed copies which can be shipped right to your house! This signup form is definitely a good idea if you plan to offer this shipping service, which may provide a bit of extra income for the business.

The lower footer area is also typically what you would expect in a magazine. Simple, easy contrast for reading, and it contains all the links you would expect to find in a website navigation. I think the white background using dark text is an easy solution because it allows readers to print your magazine without wasting ink. So the whole website almost feels like it is a printed magazine transferred into digital content.

Embedded Post Blocks

One interesting design style is building a magazine layout with fitted content in each column. Some readers will be annoyed by scrolling through so many headlines packed into a unique box model. However the presentation is above solid and you can leave a mark on readers who are digging for the latest breaking stories.

The website for Clutch Magazine is a nice example where the left sidebar contains secondary news pieces. Latest comments, opinion articles, advertisements, and a few other widgets will be displayed here. This leaves room for two columns of new articles organized chronologically. The layout is also a lazy loading design which will automatically append new pages via Ajax.

The new posts will eventually overtake the sidebar and fill the entire homepage with new content. This style can only work if you leave enough room for each post to manage by itself. Clutch uses thumbnails and borders around each headline to distinguish between them. I feel this only improves the “embedded” desire of sinking content into your page. Notice the fixed header toolbar also provides direct access to navigation links and the search form.

Infinite Scrolling News

I want to go back and revisit this idea idea of infinite scrolling news. The feature does not seem like such a big deal at first. But then after testing a layout which includes this lazy-loading interface you will never want to go back. Tumblr and Pinterest were early adopters among social networks and it has grown quickly ever since.

UGS Mag is another example which uses the infinite scrolling effect on their homepage. The one downside is that readers are unable to copy and share permalinks to the different archive pages. Obviously each article will have a unique URL but it is unfortunate how the actual page listings will never get their own URL. These individual pages are not very popular anyways, so there really isn’t much to lose, but take this into consideration for each blog/magazine project you work on.

The homepage layout of UGS fits nicely with each post listing because the thumbnails are snug right up against the box. So each article is distinct and stands out from the crowd yet still comes together for a strange and frantic box pattern. Take personal needs into consideration when planning for these various layout designs and ask yourself what will best suit the website.

I think Amusement is worth adding into this topic because of their implementation. When you scroll to the bottom of the page you will notice a link in the footer which reads “LOAD MORE”. Instead of automatically fetching new stories you have the opportunity to look through some of the footer links, and maybe decide if you even want another page to load. This lazy-load interface gives control over to the user which is a much better solution.

Mixed Thumbnails with Headlines

To move into newspaper territory consider homepage designs which feature a large collection of new articles. These may be mixed into different categories or columns on the page, and you will have bigger posts at the top using much larger font sizes. Typically these headlines represent featured posts which are promoted by the editors.

The concept of mixing a homepage news feed is to stagger important content without losing eye-candy appeal. This is masterfully accomplished on WWD Magazine’s website using a number of different columns. The main “Top Stories” reports down the center using only a single thumbnail. But you can scroll through the image slider of recent publications which is also located at the top of the page.

Giving your readers a number of selections to choose from will keep them interested for longer. And keeping visitors engaged is how you can bridge them into more interesting topics which may be found deeper in the website. The WWD magazine layout is great at implementing a wide variety of news listings. But it does have a slightly cluttered layout, which could be better organized by keeping more featured articles at the top to draw attention.

The easiest way to expand your understanding of UI/UX effects is to find similar magazine websites which are already online. Look through these examples with a critical mind, considering both the great aspects and the not-so-great aspects which could use improvement. Then apply your insight towards your own projects to capitalize on what the other guys are doing wrong(or could be doing better).

Final Thoughts

When designing your own magazine/blog layout I hope you will consider a number of these ideas. New launches should be more focused on building content before applying nifty UI effects. However a beautiful design will catch the eye almost immediately, and will lure plenty of new interested readers onto your homepage.

As we move forward I am hoping to see a lot more variety in digital online magazines. The older publication methods require a lot of time and paper. Distributing news via the Internet is a much more lucrative and profitable situation. The key to building up your reputation is through solid branding and a lot of great content. If you know similar magazines or design features I have missed, feel free to share them with us in the comments discussion area.

You might also like…

Exploration of Single Page/One-Pager Navigation Systems

HTML5 has introduced amazing new features and technologies that have helped us create fast, interactive and stunningly beautiful websites like never before.

Its advanced multimedia has enabled us to build creative websites with smooth transitions, fancy images sliders and animations that previously had been built with Flash, JavaScript or some seriously hardcore designing.

So, if you’re in need of inspiration or some direction for your next HTML5 website, we’ve compiled a round-up of 30 of the most creative and innovative HTML5 sites to dive into.

The Mustache Game allows users to play a game where they have to add moustaches to people via video platforms like YouTube or Hulu. The site uses the <video> element to embed the movies.

The Mustache Game

Love it or hate it, flat design is clearly a trend that is here to stay. The mix of pastel colors with a minimal/clean layout seems to be a perfect balance for any web page.
And here at Speckyboy, we do love it.

So, we have discussed it, analyzed it, showcased beautiful examples of it, and even offered free GUI templates of it, and today we have some more flat resources for you, namely free flat icon sets.

Here they are:

Download Page

In this age of mobiles, everyone is using a smartphone or tablet device. As a result, more and more developers are actively pursuing mobile development. No matter which platform you use — be it iOS or Android — you will find a plethora of mobile apps serving a multitude of purposes.

Amidst such crowded mobile-first scenario, what do you do when the temptation to have your own mobile app strikes? What if you really are planning to create a mobile app for your website or business, but are unsure if it will actually be useful for your clients? If this is the case, you have come to the right place. In this article, I shall try to assess the pros and cons of having a mobile app for your website or online business.

Before going any further, though, allow me to clarify what I mean by “online business”: a website, an online news magazine, a small- to medium- enterprise that relies on the internet (or has a user base that actively uses the internet and mobile devices), and so on. If you can associate or identify yourself with any of these or similar descriptions, then yes, we are talking about you!

“To Mobile App” or “Not To Mobile App”

With each passing day, more and more internet users are migrating to mobile devices. Even if desktops are someone’s primary working device, there are good chances that he or she often turns to a mobile or tablet for casual browsing of the internet. Naturally, having a smartphone app for yourself seems to be a wonderful decision. I mean, c’mon, even we have our own mobile app!

However, all said and done, is it really worth the effort? Will it not make sense to opt for a solution that requires less efforts and time? Requirements and payoffs apart, does an app actually help your audience?

Won’t a Mobile-Ready Website Suffice?

This is the first question you should ask yourself when planning a mobile app. It is common knowledge by now that responsive or adaptive design can go a long way in helping you have a mobile-friendly website. If you need more advanced options, you can even have a separate mobile version of your website, or opt for special tools for this purpose, such as WPtouch for WordPress websites (all major CMSs also offer mobile apps and relevant solutions).

Image Source: Bring Your Own Device via Shutterstock.

The outright advantages that a mobile-ready website has over other alternatives include lesser cost, as well as universal appeal. Your regular users may be compelled to download your app, but what about the random visitors? A mobile-ready website can serve both sects of users in a reliable manner. Plus, if you have an iOS app, your users with Android or Windows Mobile devices will be left out, and vice-versa. On the other hand, a mobile-friendly website can work well irrespective of the platform.

Also, unless your app gets featured by Apple or Google Play, you will have to walk the extra mile and promote it yourself. Having a loyal user base and active social media channels do come in handy, though for a small- to medium-sized enterprise, the mobile app does not really need 5 million downloads. The only catch is that if you want your mobile app to be a success, it will have to be downloaded by the users, thereby requiring you to work on the marketing and promotion front as well.

Advantages of Having a Mobile App

All said and done, mobile apps come with numerous additional benefits of their own. A website, no matter if it is mobile-ready or not, has its own limitations. You can send push notifications and regular updates to your clients using an app, not a website. Similarly, if your goal is to encourage the users to access your content more often, an app might be an easier bet. After all, being present on the user’s phone in the form of an application icon on the desktop is better than doing so as a bookmark in the phone browser, right?

However, the most decisive numbers that show the usefulness of mobile apps are provided by comScore — “82 percent of the time spent with mobile media happens via apps”. Need I say more?

Furthermore, with the ever rising popularity of mobile devices, building a mobile app is no longer rocket science. You can check out concepts such as Mobiloud that can help you transform your WordPress website into a mobile app, or if your requirements are rather basic, even take a look at ready-to-go solutions such as TheAppBuilder and Andromo.

Image Source: Bring Your Own Device via Shutterstock.

So, Should You Go For an App?

It all boils down to your needs, actually. If you have a true use for an app: by all means, create one. However, if your app will be more of an informational entity than anything else, just a mobile-friendly website will suffice too. The reasons to opt for a mobile app are plenty: it can be a simple attempt to stay up with the competition, or an effort to reach out to newer customers and attract better sales. In any case, before you set your mind to building a mobile app, make sure you evaluate what value the app can bring to your business.

Thus, doing your home-work before going ahead with a mobile app becomes essential. A simple question is worth asking: will it be possible for your business to justify the extra expenses and requirements of a mobile app, or will a mobile-friendly website be sufficient?

Lastly, it must be pointed out that in order to be actually successful, a mobile app does not really need to bring in revenue (as a matter of fact, direct revenue for a mobile app can be had only via advertising or selling the app itself — neither of which seems to benefit your business in the long run). If your mobile app makes life easier for your users and at the same time earns your business a good reputation, consider its mission to be successful.

Does your online business or website have a mobile app of its own? Are you planning to build one anytime soon? Why or why not? Share your thoughts in the comments below!

Ah, cupcakes. Who doesn’t love those little, round bites of deliciousness? With a history spanning many, many years, cupcakes have a rich legacy that includes chemistry, enterprise, and problem solving. Today we’ll explore five ways the design process is remarkably similar to the process pastry chefs use to bake cupcakes, and what designers can do to improve their own design workflow. Also, you’ll probably get a little hungry in the process – just giving you fair warning!

1. Use Only The Tools You Need

Cupcakes themselves have a rather extensive design history. In the middle ages, miniature cakes stamped with tiny images were used to spread knowledge of the Bible to the common people, who were mostly illiterate. The priests spreading the gospel in those days had mastered a simple but powerful tool that many in sales and marketing still use today – giving people free food! The next time you see free samples of a new product at the grocery store, or complimentary snacks branded with a particular company’s logo, you’ll know that these companies are using the same tactic that worked hundreds of years ago.

It’s important to think about your design process in terms of communication and problem solving – from the tools you use all the way up to the most abstract ideas. Remember, the medieval priests didn’t need anything complicated to get their message across – all they had was cake! The only equipment you need for baking a batch of delicious cupcakes is a pan, cupcake wrappers, a bowl to mix in, and an oven to bake. If something isn’t necessary to get your message across, it probably shouldn’t be there. Try removing some of your not-so-essential tools from your arsenal and see if you can still make things work.

2. Measure Twice, Bake Once

Baking cupcakes from scratch is one of those things that you either get right, or you botch completely. Instant cake mixes and the like have made the process much easier for most people, but if you want to try your hand at old-fashioned cupcakes the way grandma used to make, you’ll need a good handle on the exact science of baking.

In this way, making cupcakes is a lot like design. Sure, you can download some clipart or use a template in Illustrator to quickly create a design, but most clients are paying you for the problem-solving abilities in your own brain. In order to do that successfully, designers have to temper their wild creative impulses with a healthy dose of ‘science’ – testing the strength of your ideas through research, feedback from your clients and the audience you’re trying to reach, and lots and lots of sketches.

Measure carefully. Be ultra specific about your “recipe” and you’ll always have a strong design.

3. Test Everything Before You Use It

In some of the more meticulous bakeries I’ve worked with, the chefs have a ritual after their day’s work is done. They clean all the equipment they’ve used, electrical and non-electrical, then test it to see if it works. Even if they just used it and it was working perfectly. The reason they do this is because they want to be 100% certain that nothing will fail on them right in the middle of an important process. If something is low on power, or cracked, or has an imperfection that will hinder their work, they fix it before the next day. This also applies to ingredients – if a baker is running low on sugar or flour, it’s better to know that in advance, rather than right before they start work the next morning.

Making sure you know what all of your tools are capable of allows you to quickly tweak your process for maximum efficiency. Establish a ritual of testing everything constantly, so that everything you need is always ready to go before you begin ‘cooking.’ Don’t just assume that something is in working order simply because you’ve used it recently. And even if it is, don’t assume that it will remain in working order for the duration of your project.

You can apply this literally to the tools you use – your hardware, save files, code, etc. But I’m also referring to your design ideas and how much are or should be conforming to the design brief. Sometimes clients think they know what they’re looking for, but if through testing you spot an area where you can improve on their idea, never hesitate to let them know.

4. Let It Cool

Anyone who has ever tried to put frosting on piping hot cupcakes knows that, well, it just never works. The cupcakes are too hot, and the frosting has a pesky habit of melting all over the place, creating a sticky mess rather than a fluffy swirl. It’s agonizing, I know, but cupcakes must be allowed to cool after removing from the oven. And so should your designs.

Don’t just rush off a new design straight from your computer to the client’s inbox. Let it “cool” first, coming back to look over it again once your brain has had a chance to digest things a bit. Sometimes, what looked “right” one day can often transform right before your eyes the next, and be the completely wrong solution for your client’s problem. Giving things time to “rest” after you take them out of the oven is a time-honored baking tradition, and you should do no less with your designs.

Of course, you may not have a whole day to put your work away and not look at it – deadlines can loom and you need to get something to the client on time. But even just a 15 to 30 minute break can work wonders and be enough to give you a fresh perspective.

5. Function Is Delicious

In a cupcake, everything has a function. Really! Think about it – when was the last time you saw a baker simply adding in extra ingredients in a batch of cupcakes that had no business being there? A boring old vanilla or chocolate cupcake can be made interesting and gourmet if you add one or two exotic ingredients – maybe some juicy chunks of mango, or a dash of ginger. But put in too many of those things and you’ll just end up with an inedible failure on a plate.

In your designs, if something has no function, get rid of it. Every designer worth his or her salt should know this, and to be fair, most do. But we all forget sometimes – I know I do! A simple reminder is sometimes all you need to pare down your work to its barest essentials. In my case, I simply think of cupcakes. When I’m looking at a design that looks too cluttered, I ask myself: ‘if this were a cupcake, would it taste good?’

Yes, you read that right. I really ask myself that. And it works. If a design is working and everything is simplified as much as it can be while still offering something new and unique, I consider that a successful and delicious cupcake that I would enjoy eating. But if something is off, I might just have a sweet nightmare on my hands!

Translating your designs to a different medium, even if its just hypothetical, is a simple but effective way to ensure they work from any perspective.

What Do You Think?

Do you have your own unconventional ways of managing your design process? Do they involve baked goods? I’m asking for science, of course.

Image Source(s): Illustration of Isolated Set of Cupcakes via Shutterstock.

You might also like…

You could read more posts from Addison Duvall, or you could browse our Freelance or Design categories.