Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

January 27 2014


Slip.js: Small Script Touch-Optimizes Lists in Web Apps


Slip.js is not exactly new to me. I stumbled upon it a few weeks ago, yet didn’t get impressed at first sight. These days I had a real life usecase and faintly remembered Slip.js. Now, having worked through a real project with the help of that small script, I have to admit that Slip.js really is a clever tool for the creation of touch-sortable or – more general – editable lists in web apps.

January 24 2014


Freebie: Roundicons Icon Set (60 Icons, PNG, SVG, EPS, AI)


Everyone loves a good, clean and simple icon set. Today, we’re honored to present to you a set of 60 vector round icons which was cleverly designed by the creative trio at Roundicons and released exclusively for Smashing Magazine and its readers. Crafted with great attention to detail, this icon set is extremely easy to use and will most probably be the next ultimate resource for any one of your design projects.

This freebie contains 60 icons that can be used for free without any restrictions and serve various design purposes. You can use the icons in your commercial as well as your personal works. Feel free to modify the size, color or shape of the icons. No attribution is required. However, reselling of bundles or individual pictograms is not allowed.


Description And Features

  • Designed to convert
    The icons are designed in round and flat style. The circle has been and will always be the most complete and eye attracting shape. Coupled with simple and clear design, the message is (hopefully) conveyed instantly. Each icon is a flat illustration that can either be used in its circular container or as a standalone illustration.
  • Easy to customize
    The icons come in various file formats, which makes them very easy to use: PNG, SVG, EPS and Ai. The PNG files come in five dimensions (48 × 48, 64 × 64 pixels, 128 × 128 pixels, 256 × 256 pixels, 512 × 512 pixels). All icons are Retina Display ready and can be used in your mobile applications as well as in templates and themes.
  • Color Palettes
    The colors have been chosen with care to ensure maximum harmony when multiple icons are used on the same page. You can always change the color of the background circle in any icon to fit your design and product identity or just use the illustration alone and draw the circle with your own codes.

A couple of examples of icons without the rounded containers.


Various file sizes and formats make the round icons very easy to use.

A preview of each icon included in the Roundicons set (click here to see a larger preview).

Download The Icon Set For Free

Insights From One OF The Designers:

Here are some insights from the designer Ramy Wafaa Wadieh himself:

“Everyone’s heard of the phrase “A picture says more than a thousand words”, and while I’m not a fan of clichés, that one’s got a point. Images have got to be the most universal language there is. A single illustration is able to get the message across, regardless of the recipient’s background or language skills. Every designer must be conscious of this fascinating phenomenon in order to create attractive and comprehensive designs. For my part, I’m very keen on using icons in my work.

Every icon is first sketched on paper before it is drawn in detail using Adobe Illustrator and carefully reviewed by the team when completed. We aim to provide all possible formats — from vector source files to raster PNGs in different sizes. Additionally, we’re currently working on creating the Photoshop version of each icon, giving each designer the utmost flexibility to enjoy and the ability to use them, regardless of their skill level.

The idea behind the circle surrounding each illustration is that, in our opinion, it is the most complete shape that draws attention to its center and thus the image contained within. Choosing a well-balanced color palette for the circles (which can be changed or removed entirely) the icons look attractive without distracting from the message they send.”

Thank you, dear Ramy, Suzanne and Natalie, for this fantastic icon set! We sincerely appreciate your time and effort!

(ea, il, vf)

© The Smashing Editorial for Smashing Magazine, 2014.

Sponsored post
Reposted bySchrammelhammelMrCoffeinmybetterworldkonikonikonikonikoniambassadorofdumbgroeschtlNaitliszpikkumyygittimmoejeschge

January 20 2014


HTML, CSS, PSD and More: 22 Free Design Resources from December 2013


Design resources are great in many ways. Some of us might just use them as they are, building their next project upon them. Others simply take them as an inspiration to create their own. All of us collect these resources. There’s no denying, we are hunter-gatherers. In the face of this fact we’ve put together yet another set stuffed with HTML, CSS and PSD templates and added the best UI kits. Bring it to the fireplace and hear everyone whoop with joy.


January 17 2014


Interview: How I Work: Meetup’s Andres Glusman On The Power Of UX And Lean Startup Methods


Welcome to another interview in the “How I Work” series. These interviews reveal how leading thinkers and creators on the Web design, code and create. The goal is not to get into the nuances of their craft (that information exists elsewhere online), but rather to step back and learn a bit about their habits, philosophies and workflow for producing great work.

This time, we’re speaking with Andres Glusman, of Meetup, a company that uses the efficiency of the Internet to conveniently connect people offline. Andres works as the VP of Strategy, Product and Community in Meetup’s New York City office. In this piece, he shares with us how the company uses User Experience (UX), Lean Startup methods and innovative ways of organizing interdisciplinary teams to fuel the company’s consistent growth.

Andres Glusman loves meeting users and hearing them say, “Meetup changed my life.”

Q: How did you first get into the Web?

Andres: I got into the Web in the mid-’90s. I was in strategy at Boeing and got excited about the future of how people would find things online. I discovered this company called i-traffic. It was one of the world’s first interactive agencies. I was inspired by its approach, so I packed up, moved cross-country and took an entry-level job. I worked my tail off and got the opportunity to eventually lead a division. A few years later, when i-traffic’s CEO moved on to start Meetup, he called me up to invite me to be a cofounder. I had just gotten into Wharton, so I said “Thanks, but no thanks.”

I did do a little consulting before heading back to school. In fact, I made our first $14 of revenue. After business school I got sucked back in and have been at Meetup for nine years now. I currently oversee three teams: Product, Strategy and Community.

Q: Because you manage product, strategy and community, how do you impart a user-first approach?

Andres: It’s easy to be member-centric at a mission-driven organization. Meetups change lives in profound ways, and people who work here are passionate about the impact we can have on the world by sparking meetups everywhere. In that context, experience is everything.

It also helps that the way we work actively exposes us to how people actually use the stuff we build. That keeps us pretty centered. We start with a vision and often a make simple prototype of the experience we want to foster. We run it through our in-house usability lab and iterate rapidly until we’ve got something we like. Then, we carve it up into experiments that we run on the live site.

A sneak peek inside the Meetup headquarters.

The people who work here love the fact that they can get super-fast feedback from members. We do 400+ tests a year. So, folks on our team can get feedback often within an hour or two.

Q: Can you walk us through how Meetup iterates on the product?

Andres: Sure. Why don’t I tell you the story of how we revamped an important experience on Meetup, to illustrate how we work? We used to have a Meetup Group creation experience that had all the charm and excitement of a tax form. We looked at data to see where people fell off and did usability tests to understand how people experienced it and why they struggled.

One night, we had an informal brainstorm about what the experience could be like. The product designer involved went home, got inspired and came in the next day with a prototype of a radically different experience he’d hacked. It looked like this. It was completely divorced from our code base, and it was really fun. We had someone coming in for usability an hour later. So, we dropped it into testing, watched from our desks and quickly learned two things. One, we heard things like “Oooh,” “Ahhh” and “That’s cool.” So, we knew we were onto something.

But they were also thoroughly confused by the flow of the experience. So, we scrapped 90% of the prototype, kept the interaction piece and iterated on it daily for a week or so until we got to something that worked well. It looked like this. We then carved it into a series of experiments, which we rolled out to the live site. In the process, we validated our assumptions, discovered which parts made a difference and, ultimately, saw a nice boost in results. The final product can be found online:

After days of analysing user data and testing, finally got a fresh new look that folks out there found friendly and easy to use.

Not every project follows that workflow, but we’ve tried to replicate it as much as possible. That’s why designers are such an important part of our team now. We’ve since grown to three product designers, and building out the design team is our top priority.

Q: How does Meetup organize teams and ship?

Andres: We organize ourselves into small cross-functional teams that each addresses a high-priority user experience. For example, there is a team for onboarding new members, called “First Five Minutes.” They look at how the experience should unfold for new members. How do we set up new members to have a great experience? How do we make the experience feel fun and rewarding.

The teams consist of a product manager, front- and back-end developers, QA, and a community manager to represent what we’re seeing in support. Designers play a key role as well, but they work across teams. Designers are super-involved up front in working with teams to shape a vision. They then stay involved to help teams nail the important details. This is having a profound impact on what we build. We’ve still got a lot we want to do, but you can get a glimpse of it in our discovery experience.

Find Your People
Meetup lets you find “your” people, i.e. meeting people with common interests.

We have teams focused on lanes like “First Five Minutes,” “Discovery,” “Before/During/After the Meetup” and “Meetup Organizers.” They craft a series of visions that they want to pursue. Then, they carve those visions up into these experiments and start working towards a vision of the product that they are all excited to work on. So, these teams essentially function as startups within the company.

In terms of building, we’re agile but not rigidly agile. We don’t have the Scrum masters and the burn boxes thing going on, but we do work iteratively and push code multiple times a day. There are opportunities to iterate on things every day.

Q: Can employees switch teams?

Andres: Absolutely, and it doesn’t have to be a permanent switch either. There are times when certain teams have more demand or slack, so people can bounce between teams. And there are times when someone’s interests change. Our team is growing pretty quickly right now, so it’s really not hard for someone to switch teams.

Q: As VP of Strategy (and other things), how do you define and set a strategy?

Andres: I like how Michael Porter defines it:

“Strategy is what you don’t do.”

There are so many things we want to work on and explore. Our challenge is to say “No” to most things, so that we can say “Yes” to the few that are most important. Right now, we’re focused on building out a beautiful mobile experience and using that as inspiration to transform the desktop experience. We’ve got a pretty ambitious list that we want to get done for the end of the year.

While that’s all going on, I’m starting to think about what 2014 and 2015 will look like. We want to make sure we’re planning ahead and hiring the right kind of people now to pursue these really big ideas next year.

Q: What’s your take on network effects and user experience?

Andres: Network effects are one of the most powerful dynamics in our industry. You will generally find that, where network effects exist, the more people are using a platform, the more valuable it is to everyone. There are multiple kinds of networks. There are two-sided marketplaces, like a Craigslist or eBay, with buyers and sellers. There are one-sided networks, like a fax machine, where everyone can interact with everyone.

But the value of Craigslist is obviously the network. It’s not the most elegant-looking platform, but it delivers you the person who wants to buy your couch in under 45 minutes better than anything else out there. Many people have created clones that are prettier, but without the network, they are nothing. Obviously, strong network effects and delivering a magical user experience win.

Q: Can you talk a bit about acquiring users in this context, as it relates to Meetup?

Andres: Meetup is a two-sided network. Meetups on the network attract members. Members on the network also attract organizers to start new meetups. That, in turn, attracts more members, which attract more meetups. And so on and so on. It’s a virtuous cycle that we call the Meetup flywheel.

Q: And what have you observed firsthand as a result?

Andres: Well, what is interesting about us is that one of the biggest byproducts of our network effects is a phenomenon we call “spawning,” whereby, as groups grow larger and larger, they then spawn similar but slightly different groups. For example, a motorcycle Meetup group will start in a city. They eventually might spawn a women’s motorcycle rider Meetup. They then might spawn a women’s motorcycle Meetup group for women who work in tech.

So, we’ve discovered that there’s a massive long tail that arises in Meetup communities. If you look at the tech Meetup groups here in New York, there is an unbelievable amount of diverse Meetups around different tech areas. This happens because we’re a network.

Q: How do you manage your day-to-day work?

Andres: My job is completely exhilarating because I get to tackle a huge variety of problems. However, the constant sudden shifts between different areas can be a little exhausting. In the morning, I put my daughter on the school bus, then spend 15 minutes outlining priorities for the day. I have an hour commute, so I’ll dedicate that time to working on something very creative, when I tend to have a lot of energy.

Then, I come into work and try to be a sounding board or coach with the different teams (strategy, product and community). I usually don’t hit my email till 5:00 at night. But every so often, I try to block a four-hour chunk of time and sneak off to a conference room somewhere and work on some heavy lifting for creative or analytical projects.

Q: What’s the best part?

Andres: The two best parts are working with designers and watching usability tests. When I work with a designer, I catch a vision of Meetup’s future. That’s super-inspiring. On the flip side, when I watch a usability test, I get grounded in reality and am surprised by how humans actually behave (as opposed to how I wish they’d behave).

More than 400 usability tests are run through Meetup’s in-house usability lab every year.

Watching usability tests is just such a joy for me, and I don’t get to do it as much as I would like anymore. But when I do get to watch usability testing and see somebody go through an experience, it causes me to look at our experience through fresh eyes. I love putting myself in the user’s shoes and riffing on their experience. I find that so energizing.

Q: What excites you most about the Web today?

Andres: The biggest thing is that I don’t feel like we have found the answer to the right way of doing things across this entire industry. Everything could be done better. However, I feel like we’re hitting upon a pretty good way of working at Meetup, which is producing some good results. But in terms of how people come together and build a successful product for the Web or mobile, I think that’s a pretty tough riddle and also a pretty exciting challenge.

Q: And what’s been the best part of Meetup so far?

Andres: I love meeting our users and hearing them say, “Meetup changed my life.” Every time I go to a conference, somebody will come up to me and say “Meetup changed my life.” They say things like, ”I got into iPhone development because I went to a Meetup,” or something like that. So, the work itself is rewarding, and the problems we get to solve are pretty significant.

Scott (the founder) always says:

“You haven’t met all of the most important people in your life yet.”

Hopefully, we can help make that happen.

Watch a video of Andres discussing User Testing from Meetup’s HQ. (Source: YouTube)

Thank you for sharing inspiring insights into your work with us, Andres! We sincerely appreciate it.

(al, il, ea)

© Jacob Cook for Smashing Magazine, 2014.

January 16 2014


January 14 2014


Editing Tips For Business Web Content


The Web is awash in content. A recent Moz article reports that 92,000 new articles are posted online every day. Companies are spending billions on content marketing to enhance credibility, build brand awareness and, especially of late, improve SEO.

Here is what Google has to say about content in its quality guidelines:

  • Make pages primarily for users, not for search engines.
  • Don’t deceive your users.
  • Avoid tricks intended to improve search engine rankings. A good rule of thumb is whether you’d feel comfortable explaining what you’ve done to a website that competes with you, or to a Google employee. Another useful test is to ask, “Does this help my users? Would I do this if search engines didn’t exist?
  • Think about what makes your website unique, valuable, or engaging. Make your website stand out from others in your field.

Google has always tried to reward great content with high rankings, but today, thanks to vast improvements in its algorithm, Google is better able to actually do it. Its content quality guidelines are perfectly aligned with what every writer and marketer should aspire to.

As A Designer, Why Should You Care About Content Quality?

  • Your brilliant designs will be wasted if they are filled with inferior content.
  • By developing the ability to evaluate content quality, you are able to provide constructive, difference-making input to other members of the creative team, increasing your value as a designer.
  • If you are in a project management role, you must know what needs to be fixed, improved and enhanced in the deliverable’s content.
  • Unless the content meets a high standard of quality, the finished product will undermine rather than enhance credibility, diminish rather than build brand awareness, and damage rather than improve search engine visibility.

Defining “quality content” is difficult. A useful approach is to look at the editing process, because editing is where content theory is translated into cold hard facts. You could argue forever with clients about what constitutes quality content on a theoretical level. But when you break down quality into its specific editorial components, theoretical arguments evaporate.

A sound editing process forces quality into content, no matter how ill-conceived or weakly written the content was in the beginning, assuming it was properly conceived and at least decently written to begin with.

The editing process is more important than most think. (Image credit: opensourceway)

This article examines several aspects of content editing. By reading it, you will learn:

  • how the editing process works for most forms of online business content, including website pages, infographics, landing pages, brochures, white papers and slide presentations;
  • what “big picture” issues and technical editing details to get right before publishing;
  • the different types of editing help you need, and where to find authoritative online resources for DIY editing.

Five Types Of Content Editing

There are various formulas for breaking down editing tasks. For business content, it helps to think about editing as having five specialties.

1. Substantive Editing

Substantive editors are mainly concerned with overall cohesion, clarity, accuracy and effectiveness. They look for incomplete or faulty arguments, unsupported assertions, inconsistencies or gaps in the logical flow of the content, and faithfulness to the assignment’s strategic goals.

2. Copyediting

Copyeditors are mainly concerned with style. Are sentences clear and concise? Is the tone consistent? Are the right words being used? Is the text free of jargon and obscure references? Does the copy adhere to rules of grammar, punctuation and style?

3. Fact-Checking

Fact-checkers are mainly concerned with informational accuracy. They make sure statistics and other quantitative information are stated fully and correctly. Fact-checking is often a research task, but in business writing, it also comes into play at the editing stage — with vitally important impact, as we will see in a moment.

4. SEO

SEO editing ensures that on-page content conforms to SEO best practices and follows the campaign’s on-page guidelines. SEO editing is typically done by a client’s internal or external SEO resource. The more the SEO resource is plugged into the creative process, the less artificial and stilted the optimized content will be.

5. Proofreading

Proofreaders are mainly concerned with technical precision. Different standards apply to different types of content; a list of authoritative editing resources appears at the end of this article.

Editing done here by Johanna Shapiro (View larger version)

If all of these editing tasks are done well, the final product will have the level of quality that readers and search engines desire. In terms of workflow, the editing process follows the order noted above, starting with substantive editing and ending with proofreading. However, as you might imagine, editing is not always linear; documents usually go back and forth between editors and writers as issues are fixed.

Editing Process FAQs

Effective editing is not only a matter of knowing what to do; it also requires an understanding of how to manage workflow and communication. Addressing these FAQs at the outset of your next project will help lay the groundwork for not only a better editing process, but a more enjoyable one.

Do I Need to Hire Five Editors?

No. A talented editor can cover a lot of the work at an acceptable level for most business content. That being said, the substantive editor must be familiar with the product, industry and audience in question, since the effectiveness of the content hinges on understanding the audience’s mindset and needs. The SEO editor must, of course, know SEO inside and out.

How Can I Get Copy Approved More Quickly?

Too much editing can be just as bad as not enough — some firms review and tweak for so long that the content is outdated by the time they approve it. The substantive editor or project manager is the best defence against perfectionism. They are best equipped to recognize when content should be deemed finished and to explain why to clients and team members.

How Much Editing Should the Writer Do?

I would love to hear from the Smashing Magazine community on this one, because it’s a thorny issue. Even writers with a firm grasp of grammar, style and technique submit substandard drafts due to time constraints or lack of familiarity with the subject matter. Competent writers learn as they go, reducing the editorial burden. For example, if a website project requires 60 pages of new content, have the writer start with 10 pages and then give them a careful copyedit and substantive edit. The edits may be numerous at this point, especially if the writer is new to the subject matter. If the next 10 pages come back vastly improved, then you’ll know the writer is catching on.

What If My Client Doesn’t Care About Editing?

Clients might not care about content editing as such, but they certainly care about public image, leads and orders. High-quality content impresses Google, which leads to more search engine visibility, which leads to more traffic and more business. High-quality content also reassures prospects, customers and stakeholders that the company is reliable and competent.

What’s the Best Way to Manage the Editing Process?

One person, generally the project manager or substantive editor, should coordinate all editorial functions and communication and make final decisions. Creative teams have many editing tools at their disposal, but using good old Track Changes and Comments in Word documents is perhaps the easiest way to start. A big challenge is preventing multiple versions of an in-process document from floating around; implement a clear procedure to avoid this. In my experience, the competence of the manager, rather than the tools, will determine the efficiency of the process.

Common Editing Issues

Let’s look at a few specific real-world issues that crop up in business Web copy for each type of editing. These particulars will give you an idea of what to look for if you are doing the editing or looking for an editor or managing the project.

Substantive Editing Issues

  • Here is an instructive, real-life example of how substantive editing produces clarity. In a recent article about writing for slide presentations, I wrote, “Slide presentations are great for a ‘peeling the onion’ narrative approach.” My editor commented, “What does that mean?” I pondered the issue and realized that I didn’t really know what I meant! After further reflection, I changed it to, “Slide presentations are ideal for storytelling.” Moral of the story: Substantive editors don’t always need to make sweeping changes. Often, just knowing what to look for helps to get it right.
  • Keeping content on point prevents content creep. Substantive editors remind clients that a landing page need not be a thousand words long to prompt a conversion, nor a website a thousand pages deep to convey the firm’s value proposition.
  • Substantive editors police all content to maintain consistency of brand messaging.
  • The company’s branding and positioning strategy, the value proposition of the product and service being marketed and the nature of the target audience will determine the content’s style and tone. The substantive editor must be crystal clear on all of them.
  • Building on the last point, a substantive editor — if time, budget and skill allow — injects personality into flat business content by adding storytelling narratives and stylistic flair that speak powerfully to the target audience.

When it comes to substantive editing, Duluth Trading Company’s website does this extraordinarily well.

Copyediting Issues

  • Headlines and headings should be descriptive and, in many cases, persuasive. Additionally, proper keyword placement in headlines and headings is important for SEO, so copyeditors and SEO editors must collaborate closely to balance these requirements.
  • Active voice usually beats passive voice: “John saved $100” has more impact than “$100 was saved by John.” There are cases where the passive voice is preferred; a competent copyeditor makes the proper adjustments.
  • Pronoun sensitivity leads writers to employ tortuous sentence construction to avoid “he” or “she” usage. Also, writers often shift from “it” to “they” when referring to a company. The copyeditor keeps pronoun use smooth and consistent.
  • The wrong word or phrase can do worse than make a company look stupid; it can convey a message contrary to the one intended. My list of commonly confused business words and phrases is a handy reference.
  • Overuse of exclamation points and all-caps conveys HYSTERIA!!!!
  • Copyeditors convert long unformatted paragraphs into Web-optimized formats that employ bullet points, three- to five-line paragraphs, judicious use of bold text, etc. This is an area where designers provide valuable input.

Fact-Checking Issues

  • Sadly, the Web is a stewpot of misinformation, cooked up by marketers who feel pressured to publish. For example, a reader might come across a flashy infographic stating, “70% of Executives Use Tablets!” but, after checking the source, discovers that this “fact” is based on a survey of 25 anonymous respondents conducted by an obscure agency. Fact-checkers protect you and your client from losing credibility as a result of shaky statistics.
  • Fact-checkers make sure that basic corporate information is correct. The company’s name, job titles and the spelling of employees’ names should always be accurate — yet often are not.
  • Fact-checkers review product specifications to make sure they are up to date. The value of this thankless task is appreciated only after, say, a customer orders a $1.5 million printing press that turns out to be 10 feet too long for its production line when it arrives at the plant.

SEO Issues

  • Overusing keyword phrases on a page of content is counterproductive.
  • Varying keyword phrases generally helps search engine visibility and makes content more readable and less “spammy” for humans.
  • An SEO editor might opt to add links to the client’s other relevant content on a given page of Web content or a blog post. If done correctly, these related links build the authority of the client’s website.

Proofreading Issues

  • One space after a period is standard.
  • Capitalization in headlines and headings should consistently follow a predetermined style.
  • Font size and style should be consistent for text and headers from page to page.

In Conclusion, How Much Editing Is Enough?

Practical considerations such as deadlines and bandwidth, along with a clear understanding of the audience, will influence how thoroughly a piece of online content should be edited.


Generally speaking, readers do not hold blog posts to the same stylistic standard as, say, white papers. However, a blog post directed at an audience of scholars, physicians or attorneys will be held to a higher standard.


Visual content such as infographics and slide presentations, perhaps because of their formality, seem to carry more weight with readers than blog posts and website pages. For this reason, producers of visual content have a greater obligation to be sure of their facts, all else being equal. Firms undermine their credibility when they publish graphical material loaded with unsupported or misleading facts, whether intentionally or not.


If a firm has an organized SEO marketing program, then on-page SEO is crucial. If not, on-page optimization alone would probably not be enough to have any substantive impact on search visibility.

Copyediting and Substantive Editing

As for these, there is never any advantage to publishing vague, incoherent and uninspiring material. Some level of review is really a must. If resources are limited, and often they are, use this editing tactic: When in doubt, leave it out.


  • AP Stylebook
    The AP (Associated Press) style is the standard for newspapers and journalists and is commonly used for marketing and PR content. An online subscription gives you instance access to authoritative information on editorial issues relating to general business content.
  • The Chicago Manual of Style
    The CMS, published by The University of Chicago, is widely used in the humanities for formatting and citation, and it contains a wealth of information, analysis and insight on issues of grammar and usage. Whereas AP primarily tells you what to do, the CMS also explains why.
  • MLA Handbook for Writers of Research Papers
    This style guide of the MLA (Modern Language Association) is widely used for academic writing.
  • Purdue OWL
    The Purdue OWL (Online Writing Lab) is a convenient online resource for grabbing up-to-date answers to CMS- and MLA-related questions.
  • New Oxford Style Manual
    This book contains detailed information on UK style. Oxford Dictionaries has helpful tables on British and American spelling and terms for online reference.
  • AMA Manual of Style
    The AMA (American Medical Association) guide is widely used for medical and scientific publishing.
  • Publication Manual of the American Psychological Association
    This manual is widely used for academic and professional writing in the social and behavioral sciences.

(al, il, ea)

© Brad Shorr for Smashing Magazine, 2014.

January 13 2014


10 Useful Screen Capture Websites

Advertise here with BSA

As a web designer, I’m always finding useful ways to use website screenshots to benefit my work, and streamline my workflow. Whether I’m creating mood boards, presenting concepts to a client, comping up web templates, or just collecting examples for inspiration, a useful method for capturing multiple screenshots comes in handy. I’ve listed below, in no particular order, a collection of useful screen capturing websites that I use on a regular basis, along with they’re specific benefits.

1. Snapito

In comparison to other sites, it’s quick, and offers a selection of multiple capture sizes. This interface is relatively simple to use, as well.




2. Site2pic

This site doesn’t include many sizing option (actually, none at all), but it’s quick, and easy.




3. Shrink The Web

This site offers a free, and pro version — I’ve used both. The free version is great for quick and easy screen grabs, while the pro version offers an extra set of added benefits, like custom sizing, and designation of file type.




4. Thumbshots

This site offers paid, and unpaid version, along with many levels of functionality and benefits. The only downside is you have to create an account.




5. Websnapr

This site offers free small and micro screenshots, but requires a premium account if you wish to capture larger images. But, it’s quick and easy.




6. Web-Capture

It’s free, and easy to use, and allows you to choose from a number of different file extensions, including SVG graphics.



7. Screenshots

Simple to use, and offers multiple screenshot images to select from. The only downside, screenshots are not always available from more obscure sites.



8. Brow Shot

This site has a relatively easy to use interface, and is really quick. It takes quality, full resolution screenshots, but occasionally, I have trouble withe the custom sizing feature.



9. Page Peeker

This site is a little different, in that it specializes in producing website thumbnails and preview images. Nonetheless, still a useful tool for the right job.



10. ctrlq

It’s simple, stripped down, and might be a beta version, but it get’s the job done in a pinch. And apparently, 137,ooo people like it on Facebook.


These are only a handful of the available web screenshot tools available, and I always recommend exploring on your own to find the perfect tool for you and your workflow. There are also a number of downloadable screenshot software programs, with a wider array of features and functionality. But, if you’re looking for quick, fast and free, quality web screenshots, these are some of the best I’ve come across, so far.

Advertise here with BSA


January 10 2014


What Makes a Great Designer?

It’s the beginning of a brand new year. This signifies for many a time to change habits and behaviors and attempt to be a better person. It’s a time where people like to re-evaluate their lifestyles and try to remove the gunk. It’s a time where people become motivated to be better at whatever they do.

As designers, we are no different. Some of us want to start a business or dive deep into the life of full-time freelancing. Some of us want to seek recognition for our work and some of us just want to learn a new skill. Whatever it may be, we are all motivated and trying to figure out ways to go from good to great. Being a great designer requires some creative thinking. There’s a lot of talented individuals out there, but that’s not the only thing that makes one designer better than the other. Greatness is something that begins with the mind and is cultivated through practice. To get you started on your new you this new year, here are a few steps you should try in order to reach greatness this year.
Tags: Design

Wallpaper for jQuery Adds Image or Video Backgrounds to Any Website Easily


Such is life. Client X needs a landing page within the next 15 minutes. It’s a rather simple page with not a lot more than a full-screen background image. Now, how can I achieve that in the quickest and easiest way? Having evaluated a few alternatives I decide to go with Ben Plum’s newest jQuery plugin Wallpaper. This lets me do the job in less than ten minutes. Being able to change the image to a video background using the very same solution made my client smile with joy…

January 07 2014


Unorthodox Layouts: The Next Big Thing?

Graphic and web design are areas that thrive off the creation and manipulation of trends. If you've ever closely studied either area, you know there are many basic rules of thumb. From these basics spread many of today's newest trends. The gift and curse of trends are they're never a secret. Like any popular thing, once it catches on, it spreads and grows like wildfire.

With web design, we tend to find a new implementation of something 'cool' every month or so. Scrolling effects went from entire parallax scrolling sites to small parallax slides. Viewing sites on phones went from a separate mobile theme to responsive web design to "why don't you just make an app?" in a matter of months. In a few days, lots of people will sit at their desks and gather their thoughts. They'll scroll through a bunch of website showcases and sift through Dribbble to find some things they like. They will bookmark some things, scribble down some notes and dump it all into a WordPress blog. Before they hit the publish button, they'll proofread it and submit a guide to the world of the trendiest trends for web design in 2014. Pay them no attention. If you want to stand out, then you have to stand out. No matter the purpose of a website, there's room to do things differently. You don't believe it? Let's take a look  

The Garden Edit

It starts off looking like a regular website; maybe a photography portfolio of some sort. But as you scroll down, you actually find out that it’s an eCommerce website where they’re selling products for your garden. Even the product pages have a different layout. They’re probably trying to show you their products are different than everyone else’s.


Tags: Design

Top Design Tips for Improving Ecommerce Conversions

For three years now I have successfully avoided the Black Friday madness by shopping online on Cyber Monday instead of in stores. It seems that I'm not the only one either. This year many stores, such as Toys R Us, offered Black Friday deals online as well as in store fronts. This allowed me to get the best possible deals since different discounts were available for different items for each of the two events. Because of shopping online, I could easily jump from one online store to the next to compare availability and prices. The result? I bought way too many gifts for my kids this year simply because of the amazing deals available from multiple stores, all from the convenience - and safety - of my own home.

January 06 2014


January 02 2014


40 Mobile Game App Website Layouts using Creative Designs

Advertise here with BSA

How many new Android + iOS mobile games are released each year? The user interfaces and graphics have been improving rapidly to create a large marketplace of mobile games. Marketing-savvy developers will usually create a personal website or webpage dedicated to information each new game release.

In this gallery you’ll find 40 brilliant examples of mobile smartphone game website layouts. Some are hosted on their own domain while others are subpages within a game studio’s website. But the design is always focused around the game itself, pushing curious visitors to look deeper into the features and maybe purchase a copy. If you’re looking for design ideas to build into your own mobile game website, this showcase has a lot of great concepts.

Angry Birds

angry birds mobile ios app website layout

One Epic Knight

one epic knight game mobile smartphone website layout

Infinity Blade

infinity blade mobile ios app game website


carcassonne iphone app website layout texture

Band Stars

band stars iphone mobile app website layout colorful musicians

Hipster CEO

hipster ceo mobile game app website layout

Kingdom Rush

mobile iphone website layout inspiration homepage kingdomrush


lume ios app game website layout

Run That Town

run that town mobile website layout inspiration

Dead Ahead

dead ahead zombies mobile ios game layout website


spell tower spelling ios ipad game mobile website layout


karateka 8bit classic mobile video game website

Plants vs Zombies

mobile ios game plants vs zombies website

Broken Sword

bs5 broken sword mobile game website layout


transistor mobile game app website layout bright

Fruit Ninja

fruit ninja website mobile app layout

Cannon Cat

blue sky background cannon cat iphone game website


terraria trees rpg video game mobile website layout

Run Roo Run!

run roo run

Ridiculous Fishing

ridiculous fishing mobile app video game website

Fog of World

fog of world website app mobile layout iphone ipad ios

Where’s My Mickey?

mickey mouse disney mobile app game website layout wheres


incredipede game mobile colorful illustration background website


machinarium amanita games mobile website layout

Bee Leader

bee leader project flightless inspiring design

Usagi Yojimbo

usagi yojimbo karate game inspiration website layout

Theatrhythm Final Fantasy

theatrhythm final fantasy square enix iphone ipad mobile game website


red dark machines badland website layout inspiring homepage


osmos blue dark game website layout mobile

My Singing Monsters

my singing monsters website colorful iphone android game


poume pou mobile game smartphone website simple clean

Conquist II

conquist 2 mobile smartphone app game website layout

Ittle Dew

ittle dew mobile app game simple white layout design

Super Crate Box

super crate box homepage website layout


fieldrunners subatomic mobile app game website

Time Surfer

illustration website mobile app game layout time surfer


benjamin rivers horror adventure mobile game home website

Knightmare Tower

knightmare tower ios iphone mobile smartphone game website layout purple graphics

Bad Piggies

bad piggies mobile game website layout design

Tasty Tadpoles

textures colorful water tadpoles tasty ios mobile app game website

Advertise here with BSA

December 31 2013


LayoutIt! Free And Powerful Boilerplate For Your Next Bootstrap 3 Project


LayoutIt! is a clever web tool, created by Entropeer, a small design agency based in Buenos Aires. At first sight you might go mistaking LayoutIt! for a website builder, which actually it is not, although it looks and functions much in the same way. What LayoutIt! creates is „only“ a kickstarter, an initial foundation to build up upon. Get your next Bootstrap 3 project up and running in a shortened period of time, and thank Entropeer’s tool, which just recently got overhauled to support version 3 of Twitter’s popular front-end framework.

December 30 2013


December 24 2013


471 Premium Design Resources for Free from!

Advertise here with BSA

Inky Deals is one of the leading deals websites in the design community, with an extended family of more than 300,000 design enthusiasts. It’s the place to go if you want to buy premium resources at unbeatable prices, whether you’re a graphic or web designer, developer, or business owner looking to improve yourself and your work.


They’re the only deals website who offer a 200% money back guarantee on every product. This means that if you’re not happy with it, you get your money back and you also get to keep the product.

471 Premium Design Resources for Free

Because Inky (the lovable little ink blob and mascot of Inky Deals) and his team enjoy giving back to the community, they’ve created a huge free web design bundle: 471 Premium Design Resources for Free value $519, which you can find exclusively on Inky Deals.



It contains textures, UI kits, HTML, PSD & WordPress templates, patterns, fonts, courses and much more. Here are their partners who helped them put this great bundle together:



This bundle has got dozens of good reviews, hundreds of shares and thousands of fans from all over the world. Let’s see what you get by downloading this full pack of resources:

45 OpenType Fonts from 128Bit Technologies


Pixel Perfect Social Media Icons from Design TNT


Dead Stocker PSD Website Template from DesignModo


Subtle Patterns Set from Design TNT


This is just a small part of the design goodies you get by downloading this free bundle. Check out the entire 471 Premium Design Resources for Free!

Advertise here with BSA


Run Ragged

Mark Boulton completes our calendar with some typographic techniques to improve the reading experience. Typography, like Christmas and advent calendars, relies on the accumulation of small gains for its best effects.

December 23 2013

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
No Soup for you

Don't be the product, buy the product!

YES, I want to SOUP ●UP for ...