How to Design Website from an Emotional Prospective

I am not a Psychologist. Neither an avid reader on psychological anatomy but that one thing I am pretty sure about myself is that I am a 156Lbs pack of blood and bones programmed with a particular set of emotions that define me. These emotions drive me, they reveal who I am, and they influence almost every decision of my life that I make. And same goes for all us. Being an owner of an internet marketing agency and running it for years, I have clearly observed how emotions affect the buying decisions and the reason is pretty obvious. We … Continue reading

Visit us at InstantShift.com

RapidxHTML

5 Techniques for Spotting Mistaks Before They Go Live

Launching a new website can be exciting and nerve-wracking at the same time. You want to show off what you’ve been building, what you’ve learned, and the creative solutions you’ve come up with. You can already taste that first celebratory taco. You go live.

At first, you get a lot of comments from your friends saying, “Hey, that looks great!” Then the bug reports come in. A feature isn’t working as intended. A bit of CSS is playing merry hell with the live content in ways you couldn’t foresee. A link is broken. And worst of all: you have typos. So many typos.

Okay, most of the time, it won’t be as bad as all that. Veteran designers and developers usually have processes in place to reduce the amount of errors that go live. New designers usually build smaller sites, so the number of errors is reduced in any case. Still, if you’re new to web design, and you want to spend as little time fixing things post-launch as possible, we can help.

1. Follow a Checklist

As you are the designer and/or developer, you are the first and last line of defense against mistakes. However, even the best of us can just plain forget things. One of the easiest ways to avoid this is to use a pre-launch checklist for every website you build. The checklist would include things like making sure all of the links work, making sure the contact forms work as intended, making sure your hosting is set up right, and so on.

You can write your own checklist, and as you develop your own way of working through projects, you might want to. In the meantime, you can adapt any number of pre-made checklists to your projects. Here are a couple to get you started:

And there are a few more here: 45 Incredibly Useful Web Design Checklists and Questionnaires

2. Get More Eyeballs

For clarity’s sake (and because this is the Internet) these eyeballs should remain attached to their original owners. What you want to do is get some people who aren’t experts in computing, be they relatives, friends, or passing salesmen, and direct their eyeballs at your design, before you launch. Get some basic user testing in by asking these people to perform basic tasks on your site.

This has the double benefit of providing you with some usability testing data, as well as an easy way to find out if anything important is broken. After they’ve followed the main calls to action, ask them to click around on anything they find interesting, to help you check other links.

3. Hire Professional Eyeballs

This may not be feasible for projects with smaller budgets, but if you have the money, it couldn’t hurt to hire a professional or two. For example, you could hire another designer to check for common bugs, peek at the source, and so on. Have them test how the layout handles on their devices, and give you feedback.

If you want to take this further, there are services that will test your site under myriad conditions, in all sorts of browsers, on all sorts of devices. Given that most of us lack a browser testing lab, and these services generally aren’t expensive, they can be worth it.

Here are some of the more popular options (as defined by Google search results):

Lastly, consider hiring a proofreader and/or editor, if your website is text-heavy. They can drastically help you to improve the quality and clarity of your writing, as well as help you to avoid the dreaded typos.

4. Take a Break Before Launch

One of the biggest contributors to screwing up is stress. Launching websites can be stressful, especially if you’ve been working on the same thing, day in and day out. For future projects, it might be a good idea to schedule in a break before launch time. And I mean a proper break, as in one day as a bare minimum. Giving your brain time to think about other things is a known and proven tactic for creativity, but it also works for spotting mistakes.

Take that time off, come back, and run through your pre-flight checklist when you’re rested, and can think straight. Your brain, your heart, your users, and your clients will thank you.

5. Validation and Linting

If you’re developing the site yourself, you can take advantage of services that help you clean up, or “lint”, your code by pointing out problems in your HTML, CSS, or JavaScript. How you do this will depend on what text editor you’re using. Just about every major text editor (Sublime Text, Atom, Brackets, etc.) has a number of plugins to help you with this. There’s no one right tool for this job, so you’re going to have to do some Googling.

You should also run your HTML and CSS through the validating services provided by the W3C. These services won’t catch every bug, but they can help point out potential problems in your markup.

Conclusion

So what happens if you do all of these things, and still miss a few things at launch? Realistically, the world just keeps on turning. We’re imperfect creatures, and we’ll never get everything right, all of the time. And that’s fine. When mistakes are inevitably spotted in your newly-launched site, fix them fast and move on.

Constant perfection will have to wait until our robot overlords get here.

500,000+ Icons at Your Fingertips – only $49!

Source

10 UX Influencers To Follow Now

User experience has been around since Don Norman coined the term back in 1995. It may only be 20 something years ago, but user experience (UX) has become a vital component in digital product design and development. From Snapchat’s app to complex ERP systems, you can bet that all the products you use regularly have been built with the user experience in mind. And if they haven’t, you probably don’t use them.

It’s no surprise, given UX’s astronomical rise as a discipline, that there’s a ton of information out there about it. But how do you know where to look, and which sources are worth your time and attention? I recommend taking tips from the UX experts out there.

Whether you’re looking for inspiration on usable mobile UI design, user research and its application, or UX design trend tips, these 10 user experience experts should be the first stop on your journey to awesome UX.

Katie Dill

As Director of Experience Design at Airbnb, Katie Dill is at the vanguard of user experience. Katie and her UX team spend their days create engaging experiences for some 60 million users worldwide.

Which means that Katie has some stellar knowledge to share on building user journeys, conducting user research and prototyping interfaces.

Follow Katie on Twitter, or watch out for her at tons of UX conferences and events throughout the year.

Jeff Veen

Jeff Veen is one of the heavyweights of product design and UX. The California native got his stripes as part of the founding team at Wired, before birthing Adaptive Path, one of the first UX consultancies.

He’s also the guy behind Google Analytics. In his current role of Design Partner at True Ventures, Jeff mentors an impressive portfolio of companies, from Medium to WordPress.

If you can’t catch one of Jeff’s presentations at UX and product events, you can listen to his podcast or follow him on Twitter.

Eric Reiss

On my Justinmind UX team, we’re are all big fans of Eric Reiss. The UX influencer has been working in UX since before the discipline officially existed.

From writing adventure games and penning some of the earliest books on information architecture, to his current role as CEO of UX agency FatDUX, there are few areas of UX that Eric doesn’t have experience of.

He brings a humorous, invigorating perspective to the discipline, and is worth while checking out on Twitter or in person.

Jared Spool

Everyone working in UX knows Jared Spool. He’s been at the coalface of usability since 1978, mainly as the Principal of User Interface Engineering, a web and mobile usability consultancy that just happens to be the biggest user research organization worldwide.

Jared keynotes and chairs at the annual User Interface Conference, and blogs on usability/UX. Alternatively, his Twitter feed is full of updates, tips and stories from the frontline of usability.

Jen Romano Bergstrom

Jen Romano Bergstrom is UX Researcher at Facebook and Instagram, and as such as a hotline to the biggest user-base in the world. Eye tracking is her special sauce: her latest book, Eye Tracking for User Experience Design, (co-authored with Andrew Schall) goes deep into how eye tracking can help us understand and construct user experiences.

When she’s not researching users or writing books, Jen blogs and tweets about user research and usability.

Khoi Vinh

Khoi Vinh is one of the most fun UX bloggers out there right now – just ask his 345,000+ Twitter followers if you don’t believe us. A former Design Director at the New York Times and then at Etsy, Khoi is now Principal Designer at Adobe.

He also wrote ‘Ordering Disorder: Grid Principles for Web Design’ and was tipped as one of the “fifty most influential designers in America,” according to Fast Company.

Khoi’s blog Subtraction covers design, tech and related culture – you can dig deep into posts on fantasy UIs, web fonts, the challenges of voice UIs and more. Everything comes with Khoi’s tongue-in-cheek spin on it, making it a great read for those dull office moments.

Willy Lai

He’s done UX in Apple, Intuit, Samsung, PayPal and eBay, so it’s safe to say that Willy Lai has some serious Silicon Valley credentials.

Currently sharing his user experience knowledge through workshops, conferences, and career coaching, as well as mentoring at Stanford, Willy is an oracle on UX design and aligning UX with business goals.

Check out his Eventbrite schedule and catch him if you can; if not, he tweets.

Cory Lebson

As the author of The UX Careers Handbook, Cory Lebson is the go-to-guy for anyone who wants to define their career path in the rapidly changing UX scene.

The book covers everything from UX study to career roadmaps and becoming a thought leader. But you don’t have to buy a copy straight off – Cory’s blog also contains great advice and musings on UX, user research and usability.

Ethan Marcotte

Head of responsive design? Ethan Marcotte is the guy who coined the term that went on to become one of the biggest web design trends of the last decade. He literally wrote the book on RWD.

He blogs infrequently, but his Twitter feed is a firestorm of web rants, expert insights and UX gold-dust.

Don Norman

We left the Grandaddy of UX til last. Don Norman is the man behind the term ‘user experience,’ the UX sensei for all those into user experience and usability. He’s the Norman behind the Nielsen Norman Group, and has opined on UX everywhere from Harvard to Seoul. Keep up with his frequent video presentations via his website.

The post 10 UX Influencers To Follow Now appeared first on Speckyboy Design Magazine.

What Is IconShock? (& Get a Free Icon Set!)

IconShock has provided a great collection of unique virtual and augmented reality icons. Perfect for use in projects that relate to this new and growing industry, so we’re excited to bring you this exclusive, free icon set for you to download today, courtesy of their design team.

Join us as we take a look at some of our favourite icon sets from their collection, and grab your exclusive download of a virtual and augmented reality icon pack!

What is IconShock?

IconShock is a library of over two million professional icons, collected into four hundred icon sets, in many different sizes and styles. There are a few great, unique features which set IconShock apart as a high-tier place to find your next icon set:

Easily Edit Everything

IconShock’s new platform is built to allow for quick and easy editing of several visual aspects of the icons, such as adjusting their sizes and colours, and styles before downloading. This is a really powerful way to put the design of these icons in your own hands (both multi-coloured icons, and monochrome options).

You can either choose from a set of pre-suggested colours, or specify a hex code, to instantly have the icon fit in with the design of your project.

Multiple Sizes and Options

All icons are offered in several standard sizes, as well as custom sizes via vector and SVG files. The simpler glyph-style icons are provided in pixel-perfect grid size choices, customised to look crisp at both large and small sizes.

Their more detailed, photo-realistic style icon sets are designed to be displayed at larger sizes, but do have versions for small sizes as well. You’re spoiled for choice!

A few unique styles to explore are:

Our Favourite Picks

We’ve hand-picked a few other icon sets from IconShock that we particularly liked, to give you a feel for what to expect in their collection.

Flat Icons

Flat icons are still going strong, and IconShock’s collection is one of the best ones out there, featuring a complete series of vector icons with clean illustrations, that combine a soft beautiful palette with geometric shapes. There is a variation, Iconshock’s own brainchild dubbed Isometric Icons, which merge Flat design with with a 3D-like perspective, achieving a great visual effect.

Glyph Icons

Glyph is a collection of minimal, outlined icons. Simple and geometric, these are built in a non standard size of 38px for greater web and app display compatibility. There is a twin collection under Glyph Color Icons to work with on web and app development

iOS Line Icons

A great collection of icons made in the style of iOS 7 and higher icons, this neatly done bundle of Line Icons merges geometric simplicity with concept accuracy under Apple’s outlined icon style, and features several variations, such as Color Line Icons, that work with them as selected or active/inactive state.

Material Icons

Following Google’s Material Design guidelines and concepts, these are the icons we all know, juiced up with Material’s own color palette. As usual, these also have a variation to work with known as Material Black Icons, these two collections have great synergy with eachother.

Pricing

You have a few options when it comes to pricing, depending on what type of access you need:

  1. Individual Icon Sets: You can buy specific icon sets as a one-off, from $19
  2. Yearly Subscription: Access everything for one year, for an annual price of $79
  3. Lifetime License: Access everything, forever, for $99

Many of us find ourselves needing regular access to icons in our work, so one of the full, “access everything” packages is certainly a great deal considering the size of the library you’ll be able to use on your projects.

Get Your Free Icon Set

So here it is! We bring you this exclusive freebie, an icon set for you to download courtesy of IconShock! It’s a great collection of unique virtual and augmented reality icons. Perfect for use in projects that relate to this new and growing industry.

4 Ways To Design a Perfect Split Screen Homepage

One screen divided in two.

The split screen technique has long been known in the film industry, with early examples dating back to the silent movies days of the early 20th century, and it is still a popular device in by film and tv today.

A split-screen layout is in use when full-screen elements are divided into two or more vertical parts. A scene from the film “Scott Pilgrim vs the World”

However, this is a relatively new technique for the web design industry. Split screens only became popular around mid-2016 and now we have more and more websites which use this design pattern. There are a few reasons why this design pattern became so popular:

  • It has a nice aesthetic quality. When executed correctly it can offer users a wonderful viewing experience.
  • It’s a good choice for responsive frameworks. Split-screen design can be adapted for a variety of screens, even small ones. When it comes to smaller screens, such as mobile displays, the panels can be stacked.
  • It helps guide navigation. Using simple design techniques, you can draw the user’s attention to a specific part of the screen or encourage them to click.

When Split Screen Works The Best

Split-screen is especially good when you have two things to promote. For example, when a site offers two entirely opposite variations. This approach allows designers to give prominence to both things and allow the user to quickly select between them.

One screen, two messages in Dropbox Guides

When You Should Avoid Split Screen

Split-screen designs don’t expand well as the content grows, therefore it is not recommended to apply them to content-heavy layouts. It’s important to keep the screens simple because complex split screens make the UI look overloaded with information. That’s why split-screen layout would be a perfect fit for minimalist website designs.

How to Decide if Split Screen is Good For You

If you’re considering a split-screen technique for your website, I advise you to ask yourself a few questions:

  • Is it suitable for your content?
  • Will there be enough negative space to make the layout work?
  • Will your users appreciate the layout or it will confuse them?
  • Will it be OK to split your users’ attention in half?

The most important thing to keep in mind that content is king and split-screen should be a simple way to deliver your message to people.

Design Techniques For Split Screens

1. Pair Vibrant Color and Dramatic Typography

Thanks to Flat and Material Design, vibrant colors and dramatic typography are big trends now. Vibrant colors are visually stimulating and dramatic typography enhances the text content. Simply combine the two and you will create a visually interesting design. Baesman has done this masterfully. They gave equal importance to both elements while, at the same time, allowing the user to choose between them quickly.

Bright colors and interesting typography pairs can add interest

2. Draw User Attention to the CTA Button

Much more than a simple graphic trend, splitting the screen into two distinct parts provides an original way to guide the user through your site. It’s a great option when you want to create a bigger focal point for calls to action. In the example below, you can see how negative space creates a vertical divide to give equal weighting to two different options.

Vertical divide allows emphasis on two different CTAs without favoring either

3. Create Visual Flow Between “Screens”

When split screen represents a single object, it’s important to establish a connection between content containers. One possible way to do that is by using a color. Simply duplicate a distinct color to establish visual flow between two screens. This works particularly well with a brand color or hue with a lot of contrast. Using color it’s possible to communicate a stronger connection between two pieces of content.

Another possible way to create a strong connection is layering a single element such as text copy across screens:

Overlapping text connects two screens

Last but not least you can use a colored overlay for this purpose:

Consider the left part of the screen

4. Use Animation To Encourage Users To Act

Fine animation and interactive effects encourage users to click. Look at the design used for the “Chekhov is Alive” site below. The design begs you to click to find your character.

Conclusion

It takes approximately three seconds for a visitor to make a decision regarding your website. Consequently, your layouts should always be visitor-friendly if you want to reduce bounce rates. Split-screen technique can help you with that. Split-screen designs are a fun, functional, and responsive way to create an engaging design.

eBook: Better Web Typography for a Better Web – only $13!

Source

The Challenge of Convincing Clients to Put Users First

One of the more interesting and important dynamics of being a web designer is the relationship you have with your clients. This relationship really is the basis for your work and can be a big factor in determining the final outcome.

But it’s not just about getting along – although that’s certainly recommended. Even more critical is being able to share a vision of what the finished product should achieve. Part of that is a client’s willingness to accept your expert opinions (and your ability to convince them to do so). Nowhere is that more important than in a website’s UI.

Too often, stakeholders lose sight of what the look and layout of a website is meant to do. For some clients, it can become more of an exercise in pleasing themselves rather than thinking about the users who will actually, you know, use the site.

For designers, it’s a delicate balance. While we want our clients to be happy, we also need to measure their wishes against its impact on users. So, where do we draw that line?

A Client’s Prerogative

There’s no doubt that, as a paying customer, a client should have input regarding their website’s design. That’s their absolute right. But there’s also a point where their preferences can become self-aggrandizing and self-defeating to the end goal.

Changing a background color to a slightly different shade of blue is one thing, but insisting that a design element key to a site’s accessibility be removed is another.

While you don’t want to make someone live with something they hate, you also need to be an advocate for users. It’s then when you can (gently) push back and explain the consequences of certain decisions. If the client sees that their own personal preference may be a turn-off to potential customers, they may just change their tune on the matter.

Frankly, if someone is willing to put their own likes and dislikes ahead of the needs of users, you have to wonder if the project is worth doing at all. But all hope isn’t lost. You can still convince them to do the right thing.

Encouraging the Right Decisions

Encouraging the Right Decisions

One of the best ways to combat this sort of client takeover of the design process is to prevent it from happening in the first place. While there are no guarantees, there are some things you can do to stop the madness before it starts.

For one, you need to be assertive from the very start. Whether through conversation or your proposal, mention that you specialize in making websites that are user-friendly and focused on details that will lead to conversions.

Displaying a confident tone can also go a long way towards legitimizing your expertise. If you sound sheepish or stay silent regarding your ideas, some people will walk all over you. They’ll pick up on your low-confidence vibe and take over the entire process. But if you know what you’re talking about and say it with conviction, you’ll have a better chance at getting your ideas through.

Overall, the best thing you can do is make a case for just how important serving the needs of users is. State that your role in the project is to ensure that the website is as easy to use as possible, while still making it attractive and on point with branding.

It’s also worth noting that it is indeed a team effort, where the client’s role is to make sure the site properly reflects the brand – without negatively impacting usability.

Dealing with the Results

Most people you’ll deal with in the design process will have some degree of flexibility when it comes to hearing what you have to say. Undoubtedly, there will also be people who simply won’t budge on their positions – no matter what you tell them.

Once you’ve made your recommendations and provided solid reasoning for them, the ball really is in the client’s court. The decision is theirs to make.

If they aren’t willing to listen, they may have their own good reasons for doing so. But, at the same time, it can be incredibly frustrating for a designer. At this point, it’s probably not worth arguing any further.

Instead, carry out your mission as professionally as you can. From there, you’ll see one of three possible outcomes:

1. The website will turn out better than you anticipated.
It’s very possible that whatever concerns you had were blown out of proportion. Sometimes, we tend to see ideas that aren’t our own as disasters waiting to happen. But, you can also be pleasantly surprised when things work out better than you initially thought.

2. The website isn’t as good as it could be – and the client recognizes it.
When a site doesn’t reach its full potential, your greatest hope is that the client realizes that their (or even your) ideas haven’t hit the mark. Hopefully this happens before the site launches. Either way, you can play the part of the hero in making the necessary adjustments.

3. The website isn’t as good as it could be – but the client doesn’t see it.
This one is a bit disheartening. You can see that the design decisions made were the wrong ones. Your client, however, is just as happy as can be. Unfortunately, not everyone will take your advice. From here, it’s time to move on to the next project. Who knows? Maybe they’ll see the light in the future.

Lessons Learned

The bottom line is that we can’t fully control the results of a project. While it can be difficult to deal with the decisions made by others, it’s often part of the job. With experience, you’ll find that all you can really do is make your best argument for any particular situation.

Even if things don’t work out the way you hoped, you can still learn some valuable lessons. Perhaps you’ll find a way to improve your argument for future projects. Or you may learn how to better deal with certain types of personalities. So, even if a project won’t become the star of your portfolio, it doesn’t mean that you can’t still take positives from the experience.

The post The Challenge of Convincing Clients to Put Users First appeared first on Speckyboy Design Magazine.

How to Improve and Maximize Your Computer Security

The security of our computer is of utmost importance. Everyone who owns a computer would agree that our computers need to be more protected. There are billions of people using the internet now, and this simply means that there is much room for hackers or identity thieves to cause harm and wreak havoc. Both big corporations and family computers are vulnerable to cyber-attacks. Here are some ways to improve and maximize our computer security: 1. Install and Use Anti-Virus Software So powerful and sophisticated are malware these days that it is now possible hack into a computer using DNA strands, … Continue reading

Visit us at InstantShift.com

RapidxHTML

20+ WordPress Hacks for Developers

One of the things that WordPress really popular today is the opportunity to extend it a million ways. For example, functionality can be enhanced with plugins while themes are great for changing the appearance. As the result, the site gets tweaked to meet various needs of blogging, ecommerce, and others. But what about unleashing a true power of WordPress with tweaks? Let’s take customizing one step further with these killer hacks. #1. RSS Feed with Featured Images Have you ever wondered why WordPress did not allow displaying featured images by default in RSS feeds? That’s clearly a better move if … Continue reading

Visit us at InstantShift.com

RapidxHTML

15 Interesting JavaScript and CSS Libraries for August 2017

A collection of some of the most exciting web development projects of the past few weeks.

Continue reading on Tutorialzine.

Transform Photos into Art with Deep Learning

Life is like a camera. If things don’t work out, you can take another shot. But if you get that perfect picture, you will want to capture the moment and, perhaps, transform it into a work of art.

Have you ever seen art so beautiful and resonating that you wish you could transform your favorite photos into that style? Or perhaps you are a frontend developer or designer seeking an easier way to turn your images into something that’s more appealing, or fits the theme for a special occasion or unique scenario? Maybe you have been tasked to come up with a fun photo booth for a birthday party that enables attendees to transform their photos into a style of art they like? Check out the before and after of the photos below as an example:

Before (left) and after (right)

Before (left) and after (right)

Existing platforms like Instagram and Prisma enable users to upload images, apply different  filters and effects, then produce an image with a very unique style and artistic look. However, you may want to build a similar application that provides more flexibility for the type of art, as well as the kinds of images users can upload.

With Cloudinary, developing a platform that enables you turn photos into art is a breeze. All you need to do is add the style_transfer effect to any delivered image while specifying the image ID of the source artwork as its overlay and activating the Neural Artworks addon.

Source artwork (left), target photo (center), and style transfer result (right)

A Closer Look at Style Transfer with Cloudinary

Cloudinary is a cloud-based image and video management service that includes server or client-side upload, on-the-fly manipulations, quick content delivery network (CDN) delivery and a variety of asset management options.

The style transfer effect applies a complex deep learning algorithm—based on the VGG 16 neural network—that extracts artistic styles from a source image and applies them to the content of a target photograph.

Cloudinary’s algorithm takes advantage of Xun Huange and Serge Belongie’s enhancement on the Gatys algorithm, which make it possible to use any image for both source and target, and still deliver a good quality style transfer in real time, using a single feed-forward neural network.

Cloudinary’s implementation is much faster than other available services, not limited to pre-learned images, and even supports high-resolution outputs that are out of scope for similar services.

How to Implement Style Transfer

To apply this effect, simply specify the public ID of the source artwork as an image overlay (l_ in URLs) and style_transfer as the overlay effect (e_style_transfer in URLs). The target photograph is the public ID of the image to deliver. For example:

http://res.cloudinary.com/demo/image/upload/w_700,h_700,c_fill/e_style_transfer,l_sailing_angel/golden_gate.jpg
http://res.cloudinary.com/demo/image/upload/e_style_transfer,l_davinci_mona_lisa/golf_sand_st.jpg

Source Artwork (left), target photo (center), and result of the style transfer effect (right)

But wait, there’s more!

You can include the Boolean preserve_color option or adjust the style_strength of the effect like so:

Artwork (left), target photo (center), default style transfer (right)

Preserve Original colors in Style transfer (left), adjust Style Strength to 60 in Style transfer (right)

Give Style Transfer a Try

Back to the task you’ve been assigned—creating a photo booth with effects for a birthday party. Here’s a cool, simple app that demonstrates how style transfer works.

See the Pen Style Transfer Demo by Cloudinary (@Cloudinary) on CodePen.

You can start making yours by signing up for a free Cloudinary account and activating the Neural Artworks add-on. There is comprehensive documentation available to show how you can take advantage of style transfer in your applications.

You no doubt have a lot of ideas about how to turn your photos into art. With Cloudinary, it’s easy to make your vision a reality.

 

[– This is a sponsored post on behalf of Cloudinary –]

FREETER PRO: Organize Your Work with this Productivity App – only $14!

Source