Wednesday, May 4, 2016

9 reasons hand-coding always beats site builders

http://ift.tt/1SNoeK7

If you use any kind of social media like Facebook or Twitter, you won’t have been able to avoid the merciless onslaught of ads promoting WYSIWYG website development. I’m not talking about those fancy software applications like DreamWeaver, but actually hosted site building applications that offer drag-n-drop website building systems complete with predefined templates.

You could easily think that this is a great idea because on the face of it these kinds of systems are supposed to save you time and effort, but the reality is a little different. Here are just some of the reasons why you’re better off coding everything yourself.

1. You retain 100% control over your site and where it is hosted

Pages built on site builders stay on site builders (the same site builder). There is no easy way to transfer them out because the source code of your page is translated into metadata. Many similar services operate the same way. This means if you decide you want to change to a different hosting platform, you will have to reconstruct the pages and whatever functionality they contain.

2. Free WYSIWYG sites aren’t really free

What did you actually expect? But the issue here is that if you don’t want to provide free advertising for the service you built your site on, or you don’t want to have any restrictions over what you can do on your own site, you’ll have to pay extra for it, and the price will be typically higher than it would be for normal hosting.

3. You make yourself seem irrelevant to clients

If you build websites for other people, the last thing you should be doing is promoting websites that encourage them to use a DIY approach. You’ll practically be declaring that they’ve wasted their money by hiring you for a job they can do themselves.

Most clients can’t make websites, but they can be given the impression that they can do it. That’s really dangerous because it means there’s an awful lot of really bad websites out there. One of the most interesting observations is that clients always notice every flaw (real or imagined) in anything you create and will use that to make your life hell, but they never notice the massive and very real flaws in whatever they create.

4. You understand your own code

If you’re any good at coding, writing fresh code line-by-line doesn’t take more time than building stuff using code created by other people, and may even take less time. If you’re not that good, and you’re selling websites, consider that you may be in the wrong line of business.

When you use code from third parties, you have to spend a lot of time working out how to integrate it and then finessing it to do what you want. In some cases, you may not understand everything that third party software does and it may do some completely undesirable things. In the worst cases, it may do undesirable things of which you never become aware.

The other obvious issue is that if there is a flaw or bug in the third party code, you have to spend much more time diagnosing and fixing the bug than you would have to do if it was your own code. The same holds true if you want to add extra functionality or you want to change the way it works.

That’s not a suggestion you should never use third party materials, because there’s some really great stuff out there for you to use. But you have to accept that by incorporating those items into your design, you are also accepting the risks and complications that come with them. Just choose wisely.

5. Your own code is nearly always more efficient

Those WYSIWYG sites add additional complexity to your design. Look at the source code of any site builder template, and you’ll see a lot of weird metadata that contains hundreds of URL instructions. If it’s a free site, then extra lines will be added for the mandatory advertisement.

Having so many URLs indicates a heavy dependency on external components. This increases the chance of your site failing on a technical level. Less is more, and you need to keep things as local as you can if you want to avoid worrying about dependency problems.

6. Your own code is more secure

This one is fairly obvious. Your own code isn’t inherently more secure than a site builder’s, in fact it may be worse. But site builders use the same code for all sites, so they’re an attractive target. Economics of scale mean that hacking every template site churned out by a site builder may be worth it, hacking your code probably isn’t.

7. It’s easier to iterate your own code

Need to move a component in your directory structure to make it more secure? Need to use custom PHP code to translate or encrypt something? Want to do some kind of fancy database stuff that doesn’t fit into a cookie-cutter design model? When you write your own code, there are no limits or restrictions on what you can do. You are literally the webmaster!

8. Your own code is original

Have you ever noticed that some websites have a lot in common? And then, every once in a while, you’ll come across two or more sites that have way too much in common? That’s the problem of template-based design.

There’s nothing wrong with templates if you’re properly customizing them and turning them into something completely original, but huge numbers of people just seem to be too lazy for that. The result of that lack of effort is going to be less customers for you (or your client) because they don’t see your site as offering anything unique.

9. Writing your own code helps you grow as a developer

All the challenges that you’ll face and overcome in creating a website that is based mostly on your own efforts will help you become better at coding. It all adds up to more experience, and that means you become more efficient as a coder over time. Eventually you can face any challenge with confidence, as you’ll develop coding fluency.

So there you have it. Nine reasons why you should not be relying on WYSIWYG too much or even at all. Writing your own code is more rewarding in a lot of ways, and as you get better at it, you may even find that you save more time than if you struggled around trying to understand other people’s templates, other people’s WYSIWYG systems, and other people’s source code. You also keep control over your website hosting, your domain name, and who benefits from your work.

Mega Bundle of 48 Vintage, Grunge Fonts – only $19!

Source

Vía Webdesigner Depot http://ift.tt/1rpFgU2

Zurb launches new @mention engine, Tribute.js

http://ift.tt/26T0N8l

Zurb, makers of Foundation, have a reputation for building robust tools that web developers love. They craft effective solutions because they start out to solve problems they encounter themselves.

Now they’re back with a brand new, open-source, ES6 JavaScript @mention engine called Tribute.js.

@mention is a user interface technique for addressing someone directly. When you @mention someone, they are tagged into a conversation. The @mention was first popularized by social media sites like Twitter, but you’ll find it making its way into all manner of applications thanks to adoption by startups like Slack.

Back in 2014 Zurb began merging several of their design apps into a single new platform called Notable. They needed an @mention system, but failing to find a reliable 3rd party option, they decided to build their own. The result is Tribute.js.

Tribute.js is a native JavaScript solution, meaning that it avoids relying on 3rd party plugins or scripts. By avoiding libraries like jQuery, Angular, and so forth, Zurb decreased the chances of conflicts arising between Tribute.js and scripts that run in conjunction with it; which makes Tribute.js a highly usable tool that can be implemented consistently across a multitude of different applications, regardless of the other dependencies you might choose to use.

How tribute.js works

Tribute.js is really simple to implement. First, import Tribute.js’ CSS and JS:

<link rel="stylesheet" href="tribute.css" />
<script src="tribute.js"></script>

Next, you need an element in your markup that will display a @mention:

<input id="commentField" placeholder="Type your comment">

Lastly, initialize Tribute with an array of objects that represent your users and then attach Tribute to the page element:

<script>
var tribute = new Tribute({
    
    values:[
        {key:"John Doe", value="johndoe"},
        {key:"Jane Doe", value="janedoe"}
    ]
    
});

tribute.attach(document.getElementById("commentField"));
</script>

When a user types an @ symbol, they’ll be presented with a list of usernames based on the key property, when they select one, the corresponding value property will be inserted.

You can download Tribute for free from Github, or install via npm, and you’ll find a full list of options in the documentation.

Featured image, Conversations via Steve McClanahan.

Mega Bundle of 48 Vintage, Grunge Fonts – only $19!

Source

Vía Webdesigner Depot http://ift.tt/26T0Ktg

Tuesday, May 3, 2016

How to design HTML5 games

http://ift.tt/26OtCmo

HTML5 and the term “cross platform” are buzz words, and for good reason. The technology works for smartphones, tablets, laptops and desktops. Agencies love the concept, because any web designer who knows HTML, will understand HTML5. What does it mean for you, the Web Designer?

More projects involving HTML5
More projects revolving around interactivity
Creating experiences for the end user to interact with

At the heart of this interactive experience, are casual games. In this article, I’ll show you how you can get some coveted game design experience. The goal? Have “HTML5 game design” on your résumé.

I play games, but…

It’s a common fallacy among web designers that designing games is a specialized skill. You don’t need to attend game design school, to design games. Anyone can design games. First, let’s break this into parts. Building a game requires 3 major steps:

designing the game;
producing the visual and audio assets;
programming the game.

As a web designer, the easiest way to gain experience, is through designing the game itself. For points 2 and 3, an agency typically already has designated artists and programmers for the job. If you’re good at artwork, 2 is highly attainable. For the purposes of this article, let’s discuss step 1. Where do we even begin? Here are 10 steps that every game designer needs to go through, to earn their stripes.

1) Play lots of casual games

Have an iPhone or Android phone? Go to the App Store, head to the top free games chart. Download and play every single game in the top 20 list. Do this at least once every 2 weeks.

While you’re playing, be conscious of how each game is designed. Which animation techniques and mechanics is it using? Did the characters stand out to you? Did it have a storyline? What did the game make you feel? After 20–30 games, you’ll start to spot patterns.

You’ll notice that some games, at the core are really about the same thing. Eg: Clash of Clans, Boom Beach and Hay Day are about building, defending and attacking.

You’ll notice that simple games, such as Flappy Bird or Swing Copters focus on really hard challenges, which can be repeated an infinite number of times.

You’ll notice that some games focus on compelling storytelling with carefully designed characters.

You’ll also notice a few odd indie games, that’re just downright random but really fun!

2) Make sketches… lots of ‘em

Make sketches of the things you like from the games you played. Sketch characters, maps, menus and user interfaces. Was there a certain character which you liked? Was there a certain angle of the game that made you excited?

Here’s a character called ‘Matt’. He’s a bored office guy, glued to his chair:

3) Make flow diagrams

Flow diagrams describe the step-by-step process of the game. They describe the point where the user starts the game, all the way to important events, such as a victory or loss. Start with simple diagrams like this:

As you gain more confidence, iterate on your simple flow to make more complex flows.

4) Write a game design document

Using what you learned from Steps 1–3, design and write a simplified game design document (GDD). A GDD basically tells the reader what the game is about.

Quick example: Let’s take our character called “Matt” in Step 2, and let’s say he’s trapped in a boring office job. He wants to escape. The catch is, he can only do it from his rolling chair. We’ve produced a neat sketch of the game screen. It shows a maze of office desks conspiring to block Matt’s escape.

As an example, we made the goal of the game simple. Navigate the office maze to escape it.

That’s it, for a very basic GDD. Here’s the complete flow diagram, for our game, Escape The Office.

5) Train your cross-platform mindset

With HTML5 games, a lot of it boils down to being able to run the game on different screen sizes, efficiently. Here’s a rundown of different devices we have in the market: iPhone, iPad, iPod Touch, Samsung Galaxy Note3, Samsung Galaxy Tablet, Google Nexus, LG, Xiaomi, Windows Phone, Windows Laptop, Mac, the list goes on and on… Ridiculous? Yet, this is what large companies do. As an independent designer, how do you design a game, that fits different screen sizes?

Fix the game orientation. Design your game such that, it works either in portrait mode, or landscape mode only.
Find the most common game resolution that works for most devices. Maintain the aspect ratio. Then, scale up or down, depending on the device resolution. We find aspect ratios of 3:4 (portrait), or 4:3 (landscape) most popular, and efficient.
Design lightweight, casual games. Don’t go for the bulky, 3D MMO game. Instead, go for fun, light casual experiences. The game could be as simple as whacking moles, or jumping around platforms. Anything under the sky is fair game (no pun intended).
Always draw high resolution artwork. At least 2048px wide as a baseline. It’s easier to scale down than it is to scale up.

6) Start pitching

Ask your company (or clients) if they’re interested in any game-related projects. Show them your designs. Pitch your heart out. Walk them through the GDD.

Your first game idea pitch won’t be like Shark Tank, rest assured! Chances are, they’ll allocate a small budget for the game. If there’s no budget, continue making better designs, and reaching out to other companies. If you have the resources, fund your own game projects on the cheap.

7) Find a programmer

Once you have a budget, start looking for programmers that specialize in game development. Show them your designs, share the budget, and tell them the vision. Most game developers are very helpful. What you need is a programmer that’s well versed in HTML5 games. This person has to know how to code something that scales nicely for all kinds of form factors. Discuss the “cross platform mindset” with the programmer.

8) Grind

The development of the game itself will take weeks, if not months, initially. There will be blood sweat and tears, but it’ll all be worth the experience. It’s very important to keep the scope of your game design very, very small, at least for your first project.

9) Finish the project

The key word here is “finish” the project. Oftentimes, as designers, we want a perfect game. Zero bugs. Beautifully designed game art, with ideal rules. Throw that mindset out the window. Go for “good enough”. Release the game into the wild. Nothing says it like a game that’s live, in the hands of users. You can always polish up the game post-launch. Done is better than perfect.

10) Measure feedback

Check user responses to your game. Use free tools such as Google Analytics to track your game’s views, plays and events.

If you’re designing games to gain social media attention, analyze the Facebook likes, the Tweets and the Instagram Likes. Study how the users reacted to your game.

Clients from Hell Ebook: HELL TO PAY (Earning Good Money) – only $15!

Source

Vía Webdesigner Depot http://ift.tt/1rt0NM5

Monday, May 2, 2016

Essential design trends, April 2016

http://ift.tt/21pGD1F

Website design sure does look happy these days. Maybe because Spring is in the air or maybe there’s just a good vibe going around. Either way, the trends in website design this month are reflective of that upward feeling, with cool icon-style illustrations, big photography and bright color choices.

Here’s what’s trending in design this month:

1) Icon-style illustrations

It’s hard not to love a great illustration. Some of the best illustrations we are seeing right now have more of an icon-style feel to them. The comes with a few key characteristics:

Flat and simple illustrated elements (note how all of the tiny illustrations are combined in the Confederation Studio site)
Bright color or simple coloring featuring primary hues
Geometric shapes with an interactive purpose
Elements with the look and feel of the icon, minus the container, so visually you see it as a drawing and not a button
Hand-drawn illustrative effects
Elements that looks like icons, but take up considerably more space on the canvas than an icon
Simple line-style drawings (such as the style from Draw a Better 2016)

What’s cool about this trend is that it works to incorporate an element of whimsy into a design project without feeling overwhelmingly whimsical. It creates a nice balance of handmade and professional. It also takes on a somewhat more masculine feel than many of the other trends that focus on whimsy, such as watercolor or hand-drawn script lettering.

Even if you aren’t an illustrator, this is a trend you can take advantage of. There are plenty of vendors—paid and free—that create vector-based icon kits. Look for a kit that includes all of the actual shape files so you can pull apart pieces, change colors and mix-and-match parts to create oversized illustrated iconography for your projects.

2. Larger than life photography

A big, bold photograph or image makes a stunning first impression. That’s why so many designers are selecting larger-then life images to draw users into their website designs. This design element can be surprising, interesting and be a great alternative if you have one or two great images, but not a large library to work with.

But you have to willing to get a little uncomfortable to get there.

To make the most of the larger-than-life photography trend you need to be willing to do one of three things with the design:

Crop a photo so tightly that it takes up a significant portion of the screen, so that the image is scaled to a proportion that’s larger than reality
Zoom in to an almost uncomfortable level with images of people and faces to show every detail
Stage a standard photo but add an element that’s different or interesting in a way that’s a little unexpected

All three of these techniques might be quite uncomfortable at first. Intense crops, super-close faces and oddities can all make you a little uneasy at first. Approach the visual for this type of design a little differently. Start with the biggest or oddest option possible. Then back off in small increments and evaluate how you feel about the image. Chances are you might end up going back to one of the earlier options.

By taking this approach you allow yourself to see the design and imagery in a different way. That’s what makes this trend so striking—the images are different. They draw users in because the shapes, crops and overall styles are so unlike most of the websites a user lands on every day.

3. Bright color choices

Bright, bold color is in. The trend has influences rooted in Material Design. Even though Material is an interaction-based design style, some of the visual components are gaining traction on their own. This applies to color in particular.

Why use a Material-style color palette if the rest of the design is not Material? It’s a simple way to add a trendy element to a project without a full-scale redesign. You can almost add a bright color and leave the rest of the design alone with just a few tweaks to the CSS or imagery.

What is Material color? There’s no perfect definition, but here’s how Google describes it: “Color in material design is inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights. Material takes cues from contemporary architecture, road signs, pavement marking tape, and athletic courts. Color should be unexpected and vibrant.” – http://ift.tt/1q3pqI0

If you are interested in creating a Material-based color palette and need a starting place, try Material Palette. http://ift.tt/1AnneRk

The bold color options are beautiful and stand out against many of the more subdued minimal-style projects that have been popular. Bright blues, greens and yellows are especially popular as accents in the color palette. The trend seems to be focused on touches of Material color, not full-scale color palettes.

For a project that really wows, it takes a more than just a bright color. The mood of the project should be equally bright.

Note how Lefty pairs bright green with images of happy, smiling people to create an overwhelming positive mood.
BNP Paribas uses a bright green to bring users into a game-style interface that is set against a darker backdrop.
Big Drop uses a bold yellow (and blue, red and green on the scroll) with light images and a fun typeface to draw users in, making the business site seem less formal.

The trick to adding in hints of Material Design-inspired colors is not to lose your branding. Don’t redo your entire color palette based on a trend; rather find a way to incorporate bright color without overwhelming the design. The example uses are great ways to think about it—use a simple colored shape as a visual element, try a boldly colored headline or use bright color panels to create a more immersive interactive experience for users as they scroll down the page.

Conclusion

It’s great when a few trends can just make you happy. That’s what this group does with color and with type choices and with imagery. Maybe it’s not just the influence of spring and we’ll continue to see these elements in even more designs in the months to come.

What trends are you loving (or hating) right now? I’d love to see some of the websites that you are fascinated with. Drop me a link on Twitter; I’d love to hear from you.

1,000 Pixel-Perfect Hi-Res Web Backgrounds – only $18!

Source

Vía Webdesigner Depot http://ift.tt/21pGBXJ

Sunday, May 1, 2016

Popular design news of the week: April 25, 2016 – May 1, 2016

http://ift.tt/21naWWM

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.