This is default featured slide 1 title
This is default featured slide 2 title
This is default featured slide 3 title
This is default featured slide 4 title
This is default featured slide 5 title
 

Monthly Archives: January 2017

Why Designers and Web Developers Must Work Together

It seems like a common sense idea: Designers and developers must work together.

But too often, these individuals work apart while working on the very same project. The designer works to create elements and color palettes and typography that looks great, while the developer codes and prepares the material for web publishing. And this can cause discord between the designer and web developer and in the final design itself.

If designers and developers work together on projects from start to finish, the result is a more cohesive web project with great aesthetics, user interface and clean code. There is less work and rework during the collaborative process, hopefully resulting in a project that can be completed in less time.

Designer vs. Developer

aTypically web designers use graphic design software such as Adobe Photoshop and Illustrator to create what websites and elements will look like. This aesthetic is then coded using HTML, Javascript, jQuery, CSS and other programming languages by a web developer to make everything work on the web.

While designers and developers may often work from separate rooms or even countries, each needs the skills of the other to create a complete website. So they have to work together.

Pros of Working Together

Simply, the biggest reason that designers and developers should work together is to create a more complete web project. From the look to interactions to experience, the project will only bet better when designers and developers collaborate. (And it’s almost impossible not to these days.)

And while we are talking about designers and developers working together, don’t forget to invite interaction designers to the party as well.

Collaboration plenty of other benefits:

  • A second set of eyes to look everything over and find flaws or mistakes
  • More creative brainstorming and design
  • A more complete experience, because designers can understand what the developer is capable of creating
  • A more cohesive finished product, where all the parts look like they belong and interactions fit the aesthetic
  • You’ll learn something about how design/development works
  • Merges ideas for a more rounded vision of what a project is supposed to be
  • Fosters focus on the mission and goals of the design project

Cons of Working Together

While I’d like to say there are not any cons to working together, that would be naïve.

There are not many downsides to collaboration. But there are two things to consider:

  1. There can be some costs associated with having everyone getting together at the same time, especially if workers aren’t typically in the same location. Use tools for teleconferencing and online sharing to communicate when you can’t get everyone in the same room at the same time.
  2. Sometimes people will disagree or just won’t get along. But we’re all grown-ups, right? We can work through it.

Things You Can Do

Now that you are thinking about all the reasons why you should work with a designer or developer, how can you put it into action? It starts with clear communication.

Web designers and web developers have to put the project first and think about the big picture during the process and as decisions are made. Understand that you will win some and lose some fights along the way.

The best place to start is by taking your co- designer or developer our to lunch, or coffee or for a walk. Get to know him or her and their style before you draw the first sketch or wireframe. Talk about how you plan to work together as a team and set some ground rules.

Everyone involved in the project should make a point to check in with everyone else often (maybe even schedule it in to the project calendar) to make sure that everyone is on task and on time. Remember to be nice; offer constructive criticism and be open to feedback from others. And be open to the fact that you are going to learn new things along the way, be appreciative of that.

5 Tips for Designers

  • Explain design theory in a simple manner to help developers understand where the aesthetic is coming from.
  • Consider interactive elements as you design, and how they will work. Make sure all parts are designed for al stages of interactivity.
  • Design completely. Don’t expect a developer to copy and edit like parts. Create element for every state and have it ready.
  • Ask for help along the way. If you are not sure if a specific font will work on a website, ask.
  • Provide design elements in usable file formats and at the appropriate resolution and size for web use.

5 Tips for Developers

  • Learn about design. Knowing a little theory in terms of color and type and even the lingo can go a long way.
  • Be upfront about what you can and can’t do. If a designer is going down a road that is not going to translate on the web, say something sooner rather than later.
  • Be available to answer questions and help during the design process.
  • Get involved in the process from the start. Help brainstorm design ideas that will work with the UX.
  • Maintain the integrity of the design – even parts you don’t like or agree with – in the development process. You will only make enemies by changing things visually without a “development” purpose.

One of the greatest bits of advice for designers and developers is not all that new, but is still relevant. The “Manifesto for Agile Software Development” highlights four principles that all web designers, web developers and interaction designers should live by.

  1. Individuals and interactions over processes and tools
  2. Working software over comprehensive documentation
  3. Customer collaboration over contract negotiation
  4. Responding to change over following a plan

Skills Everyone Can Benefit From

Skills

To help bridge the gap between designers and developers and to better work in concert, both types of web professionals need to speak the language of the other. Designers and developers should start to expand their skillsets.

Every designer and developer should have a basic understanding and knowledge of:

  • Design principles, such as color, space and typography
  • Optimal image formats and sizing
  • Basic understanding of HTML and CSS
  • Use of web fonts
  • Trends in design and development
  • Understanding of user wants and needs
  • Grids, framework and wireframing

Conclusion

The question really starts to become less about why designers and developers should work together, but how they can better work and understand the duties of the other. At the end of the day both jobs have a singular goal: To create a phenomenal website.

The thing we really need to start thinking about is designing development. Because the reality is that all development is design and web design is development. You can’t have one without the other, and as web design becomes increasingly complicated this will become even more true. So maybe what we need is a new job description or title that shows that web designers and developers are linked.

5 Ways Creative Web Designers Work on Awesome Websites

An awesome website created by a talented and creative web designer is a thing to behold. Websites like these, set the bar so high that even approaching that level of craftsmanship seems out of reach. It sometimes seems that this task requires a level of creativity we have yet to achieve.

Like many other things in life, it’s doable. It may take years of training, and involve a fair share of sweat and tears but, — it is doable.

Yet, there are ways that you can reach that level of craftsmanship more quickly. And one of them is with the help of a state of the art creative design tool like this highly flexible WordPress theme.

Let’s see how creative web designers work their magic

What are some of the key characteristics top-tier creative designers have in common? Here are five of the more common ones:

1. They work with concepts – and not just with design techniques

Coming up with great conceptual designs takes research, experience, and digging into what other creatives achieved. Success comes when you are able to take a concept, and bend it into something that offers a realistic solution to a client’s brief.

This visual concept was created by a skilled web designer using Uncode WP theme as a starting point.

In the example above, that looks easy-going with a playful twist, the relationship between the headline and the visual provides a grand introduction.

2. Creatives keep their head in the clouds, but their feet firmly on the ground

Creativity involves thinking outside the box. The visions and ideas you come up with have produce practical outcomes. Creatives are able to tailor their ideas to the extent that the websites they build exhibit top performance.

Top creative designers never neglect the UX. Uncode, the creatives’ WordPress theme created by the Undsgn team is a valuable tool. Here’s an example. Uncode’s unique and original adaptive image feature automatically delivers a re-scaled version of your pages to different screen sizes.

Another example: Instead of the longer response time associated with serial requests, the creative Undsgn folks incorporated an innovative solution.

Am asynchronous response approach that enables the browser to download multiple images simultaneously. Creative designers are always looking for solutions, and the Uncode team brings a host of creative solutions to the table.

3. Creative designers mix techniques in with styles and trends, without sacrificing visual coherency

Learning what’s the latest and greatest is an essential part of being a good web designer. To be a creative designer, you have to learn and practice the art of blending and mixing different trends and styles.

This is an example of an effective mix – from the Uncode showcase.

The mix is subtle, but impressive. This showcase example provides insight into how a creative web designer achieved coherency. And spiced it up a bit in the process.

4. Creative web designers select tool that satisfy their need for perfection

A tool that is does not allow you to create pixel-perfect designs can be a source of frustration. Creative people, like you, strive to implement their ideas to perfection. If you can imagine it, your WP theme should enable you to build it.

Take a concept like this one. With the help of Uncode’s extraordinary flexibility, you can customize to your heart’s content. And you can create a beautiful, completely original layout.

5. Think out of the box, but into the brief at the same time

Sometimes, there is a tension between the client’s perspective and the creative designer’s vision. You want to transform a great visual idea into reality. A good creative is able to think outside the box. At the same time he or she can show a perfect respect for the requirements outlined in the brief.

An example of a brief well solved.

Uncode’s concept was the starting point for this website. The visual experience arising from these concepts creates a visual world around the product. And ir provides the user with information relevant to the product.

Discover more about Uncode – the theme dedicated to creative web designers

The beauty of having a flexible theme to work with is you can create a universe of original amazing websites. All are coming from a similar starting point, but are different.

You can compare a flexible theme’s concept to a mind map’s central image. Using it as a source of inspiration, you can go out in many different directions to create award winning websites.

Uncode has some awesome starting concepts.

“There isn’t anything you can’t do with it.”

“The theme itself is extremely flexible – there isn’t anything you can’t do with it. Seems you are only limited by your imagination.” mecan, ThemeForest user

It takes a highly flexible, customizable theme to meet the creative, idea generating mind. This is how Uncode does it:

  • An Advanced Grid System. With design options that allow you to push your layouts to the cutting edge
  • Unsurpassed flexibility. 30+ homepage concepts to mix, match, or combine
  • Adaptive Images. It detects a visitor’s screen size, and delivers a re-scaled version of the page.

 “I purchased the Uncode theme a couple of weeks ago, and I’m amazed at how detail-oriented and responsive the guys who created this theme are. They clearly value customizability, flexibility and high quality design. Thumbs up!” Olivier Berton, ThemeForest user.

An improved Visual Composer. This popular page builder has been enhanced. It has extra, advanced, functionalities and a clean, organized skin.

What is an Interaction Designer?

These two little words are being used a lot in the design sphere these days. But what truly is interaction design? And what makes you an interaction designer? Here, we’ll answer both of those questions and offer a showcase of some great interaction design work.

Interaction Design 101

Interaction design is a process in which designers focus on creating engaging web interfaces with logical and thought out behaviors and actions. Successful interactive design uses technology and principles of good communication to create desired user experiences.

Interaction design in terms of websites and apps is something we have been talking about for 10 years or so, but those bigger conversations and much never. One of the best and most cited introductions to the concept was published by Bob Baxley in 2002 in a 12-part series that defined interaction design for web applications.

“Introducing Interaction Design” breaks the field into five pieces that are still useful and relevant today:

  • Human/machine communication is the translation of conversations between the device and user.
  • Action/reaction looks at how interactions happen and unfold.
  • State ensures that users know what is happening and why in terms of the application.
  • Workflow ensures that users know who to use a tool or application and what happens next.
  • Malfunction takes into account mistakes that are bound to happen.

Further, there are certain considerations to keep in mind when creating design interactions. Usability.gov offers basic questions in six different categories that can help shape how the design comes together.

  • What can a user do with their mouse, finger or stylus to directly interact with the interface?
  • What commands can a user give to interact with the interface?
  • What about the appearance gives the user a clue about how it functions?
  • What information do you provide to let a user know what will happen before they perform an action?
  • Are there constraints to help prevent errors?
  • Do error messages provide a way for the user to correct the problem?
  • What feedback does a user get when an action is performed?
  • What is the response time between an action and response?
  • Are the interface elements a reasonable size to interact with?
  • Are edges and corners strategically being used to locate interactive elements?
  • Are you following standards?
  • Is information chunked into a few items at a time?
  • Is the user end as simple as possible?
  • Are familiar formats used?

Role of an Interaction Designer

If you find yourself thinking about or asking the questions in the list above, you are an interaction designer.

An interaction designer is the person on the design, development, creative or marketing team that helps form and create a design strategy, identify key interactions of the product, create prototypes to test concepts and stay current on technology and trends that will impact users.

This may sounds like a lot of different concepts compiled into one fuzzy job description. To make is it simple: Companies hire an interaction designer to make sure their digital applications work and function in the hands of users.

The career paths of interaction designers are varied. Some formal design programs are teaching it. Others come into it from experience or by chance. But one of the common traits of interaction designers are a thirst for how things work, not being afraid to ask questions and an ability to visualize and play with elements and concepts in new ways.

Interaction Design Concepts and Principles

So what really pushes forward the field of interaction design? What makes it different from just design? That line is pretty blurry. We mostly talk about interaction design because it carries weight and focus. But the reality is that interaction design is just one piece of good design in terms of digital, web and application design and development.

The “Complete Beginner’s Guide to Interaction Design”, published by UX Booth in 2009 is still a great reference. While some of the key players and tools have changed the concepts that drive interaction design are the same.

Here’s a look at each of those concepts:

  • Goal-driven design: Why does your site or interaction exist? Figure it out and make sure your application does this one thing exceptionally well.
  • Interface as magic: You don’t even really see the best interfaces. “The best interaction designs don’t exist: they don’t take a long time to load/respond; they don’t make users think; and they don’t give user’s cause for grief.”
  • Usability: “Interfaces which make the state of the underlying system easy to understand and use are favored.”
  • Affordances: “The best (industrial/interaction) designs are those that speak for themselves; in which, as the saying goes, form follows function.”
  • Learnability: “A great deal of what comprises a usable interface is made up offamiliar components. … The best interaction designers don’t reinvent the wheel every time a similar design challenge comes. Rather, they call upon a set of patterns.”

Interaction Design Showcase

So we can’t talk about interaction design without showing some great examples of work happening around us. Each of the projects or shots below is something that gets to the heart of what this concept s all about. Make sure to visit the links to really learn more about how each of these projects (or shots) came together and work.

Everything You Need to Know About Virtual Reality and Web Design

How will the web look in virtual reality?

The 2D web could become immersive, interactive and tangible. Imagine Wikipedia as an extensive multimedia library. Instead of reading about the Egyptian pyramids, you could wander around them, explore the inside of the pyramids, view the texture of blocks used to build it or solve a puzzle to gain access to the pharaoh’s tomb. You could even have a virtual guide accompanying you, narrating the history of the pyramids and answering questions. And all this while being accompanied by distinct ambient sound effects and sounds.

Not impressed?

What about surfing Amazon, searching for the ultimate wedding dress? You could try them on, see yourself from a 3D perspective. You could create multiple avatars to compare several dresses to could choose the one that fits and have it delivered in one day. Visit a virtual car dealer, test-drive the car, select options, tweak the seat position, see if it suits you and … summon it (Hello Tesla!). Science fiction? Twenty years ago, shopping on the internet was science fiction. Twenty years ago, the idea that you couldwatch the Olympic Games on your VR headset was equivalent to Star Trek’s holodeck.

The hardware to achieve this, while still in infancy, is here. HD cameras, 360-degree cameras, fast graphical processors and VR handsets are the pathfinders to a new era. Expensive, bulky and sluggish at this time, as the rate of adoption will rise, the hardware will get cheaper, smaller and faster.

Microsoft’s Hololens are shipping to developers. Not the developer type? Sony’sPlayStationVR is available for preorder. In a hurry? Oculus Rift can be purchased now for $599. Expensive? Samsung Gear can be ordered for $99. If you already have a Galaxy, you could experience VR at the price of two high-quality cases. Or, if you are extremely budget conscious, Google Cardboard is available starting at $15. You can even build your own.

In fact, you can even browse the virtual web as you are reading this. Open the Janus Browser, and you can experience a very probable future of the web. You’ll have a lot of fun in Janus Reddit section, trust me.

The technology behind VR is quickly advancing. WebVR, the experimental Javascript API that provides access to virtual reality devices such as Oculus Rift or Google Cardboard, is available in Firefox’s Nightly builds, in experimental builds ofChromium, and in the Samsung Internet Browser for Gear VR. Test your browser for compatibility here. You can even emulate a VR headset for testing the API without needing any VR hardware with Jaume Sánchez Elias handy Chrome extension. You can even experience VR without a VR headset, but to truly understand the concept, you should get one.

Ready to roll? Head on to MozVr, select one of the 11 showcased projects and prepare to be amazed. (My personal favorite is Inspirit). If you’re still here instead of frantically reading the documentation available on Mozilla Developer Network, then I’ll point you to Vizor.io, where more VR goodies are available. If you happen to have an HTC Vive, you are probably on your first steps to becoming the Picasso of the VR with Mozilla’s A-Painter.

Most of the projects above are based on A-Frame, the open-source WebVR framework for building virtual reality experiences with HTML. Powered by three.js, A-Frame is created to make virtual reality accessible to the web developer and, intrinsically, to jump start the WebVR content ecosystem. A-Frame is made on top of an entity-component-system pattern and integrates with a lot of existing web development frameworks and tools. Being fully extensible if a feature doesn’t exist, you can write a component to enable a missing feature or, if you find a particular component limiting, you can fork it.

In fact, we may never have a virtual web. Unlike games, or entertainment, where VR is more or less bound to happen, a functional virtual reality web is a complex ecosystem. While individual sites could offer an interactive virtual reality version to differentiate themselves from the crowd, the plethora of sites available on the internet will still limit to a 2D version floating in a 3D environment.

And this won’t work. The basic desktop monitor is at 30 to 40 centimeters away from the user. All UI elements are there in front. A slight eye movement is sufficient to focus on the element. In virtual reality, the canvas is the environment. There is no bottom or top of the screen. Moving your head to the left, and you have additional canvas. Look down and the canvas expands. You could artificially establish a frame, where you could align icons or notifications (F22 Raptor anyone?), but this is no longer virtual reality. This is augmented reality. Virtual reality is all about creating an immersive environment.

Instead of a screen in front of us, we can have apps, browsers and even a window to the reality surrounding us. Such an environment is based on depth and scale.

To give you an idea of the canvas in virtual reality, we’ll refer to a passive VR device such as Oculus Rift. According to a paper by Mike Alger, based on useful observations provided by Samsung’s Alex Chu, the main canvas is the field of view when the user is looking straight forward. For example, Oculus Rift’s actual field of view is 94.2 degrees (110 according to specs), close to the 120-degree view of binoculars. Oculus recommends a distance of 0.75 meters to provide a comfortable experience for the basic user. This canvas can be extended 30 degrees from the center with a maximum distance of 55 degrees to the side as a result of head rotation. Upward the canvas can be increased to 20 degrees with a maximum of 60 degrees and, downward with a minimum of 12 degrees with a high of 40 degrees.

The shift to a new paradigm in UI/UX is necessary to avoid the “window” metaphor in VR environments. Developers are adapting the metaphor to suit the needs of basic VR device. On the Samsung Gear VR, the familiar web interface floats in front of your eyes. Head gestures, taps and voice commands are functioning the way we are accustomed to with a traditional keyboard and touch interfaces. And while this is sufficient to sell the consumer the idea of virtual reality, it is not enough to convince the user of the advantages of simulated realities.

Should you invest your time in learning WebVR? Definitely yes. In the immediate future, designers and developers will start including VR features on their websites. Interactive maps, educational tools and visualization tools are elements which could set your website apart and give you an edge on the competition.

Obviously, the traditional web will continue to coexist with VR. Some things are just not practical in VR. While I could read a blog post with a virtual reality handset with SPRITZintegration, I still prefer to actually read it on my iPad. And, while I love my Kindle, I prefer to read a book the old-fashioned way. The smell of typographic ink, the habit of turning pages, the written notes I scribe and the sense of accomplishment after I finish the last page are totally worth it.