Monthly Archives: May 2017

2016 Web Design Trends

1.Hero Video Headers (Think Movie-Style Sites)

Websites design is going to the movies. Higher speed Internet connections and better video plugin integration is making it easier for more websites to include an immersive movie-style experience. Video clips are growing from small snippets to almost full-length preview clips. The images are sharp, crisp and in high definition, creating a video experience online that is new to users, but familiar from other devices, such as televisions.

2. Bolder, Brighter Color (With an 80s Vibe)

Big, bright color really started to emerge with the flat design trend and has continued to gain momentum. Google’s Material Design documentation furthers that conversation. And just take a look around Dribbble, where color is everywhere. These are key indicators that color will stay big in the coming year. Some of the change to the big color trend is in the type of colors used. While 2015 used more monotone big color designs, usage is starting to shift to larger and bri

3.Websites with Slides

First there were sliders, so that websites could move images within a frame to showcase content. The next part of that evolution includes full-screen slides. Each slide refreshes the entire screen with new content; it can work with a click, scroll or timed effect. Users can navigate forward and backward for an experience that is almost physical. Expect to see plenty – and we mean a lot – of sites using this concept in the coming months.

ghter color palettes with an almost 1980s vibe to them.

4.Reality-Imagination Blur

Is that site real or animated? Is the path predetermined or can I make choices along the way? The next step of gamification and design is emerging with a blurred line between what’s real and what’s created (or imaginary) in web design projects. And the results are pretty stunning.

From virtual reality to websites that let you make choices to find new content, this type of customization is personal and users seem to really like it. This trend also includes creating imagery that looks real, but you know that it is not.

5.illustrations and Sketches

Illustrations and sketches bring a fun element of whimsy to a site design. They can work for sites of all types and aren’t just for children anymore. The illustration style has also started to grow in popularity when it comes to some of the smaller pieces of website design as well, such as icons and other user interface elements. What’s nice about this trend is that illustrations make a site feel a little more personal. Because an illustration or sketch style icon appears to be hand-drawn, it looks and feels personal for users. That can go a long way into creating a connection with them.

6.Tiny Animations

Animation has been one of the “it” trends of 2015. From hero-style animations that lead off a site design to those tiny divots that you almost miss, moving elements are everywhere. And they will continue to grow in popularity, even as they decrease in size. Animated user interface elements are a fun way to help engage users, give them something while they wait for content to load and provide an element of surpr

 

Designer vs. Develope

Designer vs. Developer

Traditionally web designers and we developers have been separate job titles. (You can learn more about that in a previous Designmodo article.)

Typically 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

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.

 

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.

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.

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

The web 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 soun

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 could watch 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.

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 of Chromium, 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.

While impressive for a new technology, the simulations are far from the virtual Amazon we are all looking for.

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.

 

Trend in Website Design

  1. Fjord Trend

    The homepage features several image backgrounds that are enhanced by duotone technique. The combination of colors is pretty modest and soft. Everything looks calm, serene and businesslike. The solution adheres to website’s philosophy and provides a sharp contrast to vital details.

  2. Heroes and History

    Heroes and History is marked by a lovely hero-themed illustration that is made in two primary colors. Secondary white is used for adding some accents. Although dominant red can be a bit aggressive yet, in this case, it does the trick.

  3. Finesse Design Atelier

    The portal is packed with numerous gorgeous photos that characterize agency’s sphere of expertise. Some of the pictures are left in its original state while others are jazzed up with some nice touches. The screenshot below demonstrates an interesting take on duotone image.

    4.jonkopingssodra

    Green, yellow and halftone touch make the ‘welcome’ background look so outstanding. It is eye-catching and at the same time soft and robust, ideal for supporting the foreground content. The color choice is well-suited to the concept: it reflects the idea more effectively as well as captures its jovial spirit.

    5. Campaign by Lois Jeans

    Campaign by Lois Jeans is charged with energy that is going to burst. Not only is sophisticated layering aesthetics responsible for delivering an overwhelming general impression, but also duotone effect that is applied to videos. Paired with the main light coral shade it ties everything together, achieving a harmonious environment.

    6.New Deal Design

    The website strikes the eye with its unbelievable coloring. Pink and yellow are what makes the project feel so unique and special. Duotone images are bright, dramatic and intensive. They steal the show and substantially contribute to the friendly air and positive mood.

    7. Year in Music by Spotify

    We could not help but mention Spotify. This year portal is the talk of the town. The brilliant interface took the Web by storm and set high standards for the rest. If you need a sheer inspiration for utilization of duotone, then you should give it a try. There is a range of highly intensive images that are worth a thousand words.

    8.Adidas Football
    The campaign’s front page is personified by a series of incredible photo backgrounds that thanks to duotone effect look stylish and modern. They create an amazing atmosphere that meets the mood of the brand and strengthens a sports vibe.