Tag Archive: Web Design

Mobile UX Trends for 2015

With mobile web usage outpacing desktop in 2014, and mobile apps accounting for most of the time spent on digitial, the importance of mobile UX is continuing to grow. As well, the boundaries are blurring between device sizes.  It’s becoming harder and harder to distinguish between mobile and tablet, with the ‘phablet,’like the iPhone 6 Plus, – straddling the limits between the two. So what kind of UX trends are going to drive mobile? In this post, I’ll walk you through a handful of them.

Responsive design

figure 1_rwd2

By Tooroot (Own work) [CC BY-SA 3.0], via Wikimedia Commons

Responsive design is of course nothing new, however in the increasingly device and screen size fragmented world we are creating, it will continue to be an important trend. To some it might seem like old news, however many companies, large and small, are still behind the curve in terms of implementing responsive solutions. Expect lots of demand for responsive redesigns of existing sites. Excellent resources exist online such as Brad Frost’s This is Responsive, which details, for example, responsive solutions for navigation patterns. As a web designer in 2015, responsive web design is a bare minimum and a best practice. If you want to read more on responsive design, I wrote a blog series on the topic.

From skeuomorphic to flat to somewhere in between…

New Dreamweaver CC Starter Templates Make Responsive Design a Snap!

One of the great new features in the October 2014 release of Adobe Dreamweaver CC 2014 is the addition of five starter templates: About page, Blog post, eCommerce, Email, and Portfolio. Each of these templates provides a responsive structure to build a new web page that will look great whether it is opened on a mobile device, a tablet, or a PC. The About page, Blog post, and eCommerce templates are built with media queries. The Email template is built with tables, and the Portfolio template is built with Fluid Grids. This is a very positive step toward simplifying the process for those less comfortable with building a responsive design from scratch.

You can create a new page based on one of the Starter Templates by using either the File menu or the Welcome Screen. Although the screens are different, the results will be the same.

Web Designs We’re Falling For This Valentine’s Day

The possibilities for web design are endless. The industry is evolving and designers are looking beyond the frame to incorporate the narrative and visual components of film and television into their designs. Never before have so many beautiful websites existed, doubling as works of art and fully immersive user experiences.

We talked to three designers from award winning studios around the world to find out which websites they’re loving right now, and to learn how other web designers can incorporate these innovations into their own designs.

Valentine #1: Warsaw Rising

warsaw

A great example of incorporating film, says Clayton Kemp, creative director at Zen Den Web Design in San Francisco, is Warsaw Rising. Kemp’s portfolio includes highly visual sites such as Terra Gallery and Events, Alta Mira Recovery, and Humanity United – Performance Report.

“I really love how the overall aesthetic principles of the site lend themselves to an old film or map from the era,” he says. “They have combined a perfectly matched vintage color palette with just enough subtle graininess to create an awesome product. The site seamlessly blends modern technology with archive WW2 footage to craft a very unique and memorable experience for their users.”

Designed by Warsaw’s Bright Media, Kemp says Warsaw Rising’s main goal is to educate through entertainment, a trend he expects will be huge in the coming years.

Designers can learn a lot from this site, Kent says.

  • The stylish and contemporary UI does not detract from the vintage theme
  • The design invites users to walk through the narrative, rather than having to flip from page to page
  • It’s also been optimized for web flawlessly, loading quickly despite being visual and interactive

“All of these elements make this piece remarkable,” Kemp says.

5 Things to Do In 2015 to Make You A Better Web Designer

It takes talent, time and innovation to turn someone’s vision into something tangible, to take an idea down from the clouds and translate it into an experience. While practice will certainly make you a better web designer, there are things you can start doing right now that will immediately help you improve your designs.

1. Take out a pen and a pad of paper.

Web designers spend a lot of time building things in applications such as Dreamweaver and Photoshop, but sometimes the best way to hash out an idea is the good old-fashioned way. Don’t be afraid to write notes and organize information on paper beforehand so you have a better idea of how to approach the design later. Drawing or sketching your ideas can help you pull together concepts, layout ideas, and experiment with styles, all while simultaneously allowing you to see your designs through the lens of a different medium. And if you use smart technology like the Creative Cloud connected notebook you can save time by importing your sketches directly into the program using an app.

Is Flat Design a Web Design Standard That’s Here to Stay? 10 Designers Chip In

These days, the number one thing that’s required of web designers working on anything (that’s anything) is to make sure that their creation “has this flat feel about it.” In other words, the term “flat design” has become almost synonymous with “good design.”

But is flat design just a temporary trend, or is it here to stay and we’ll be designing flat websites for years to come? Can it be, perhaps, the new standard of web design?

Let’s find out.

To help me solve this mystery, I’ve invited 10 designers and web design experts to share their input on one big question:

  • Is flat design something that’s here to stay, or will it fade to make room for another, completely new trend?

Dreamweaver CC: PSD to HTML and CSS

Our team continues to streamline and improve Dreamweaver. It has a modern UI, edit capabilities in Live View, CSS Designer and a 64-bit architecture. That’s not all though, it gets even better. It also has a complete integration of Extract which empowers users to easily go from PSD comp to code.

Extract enables web designers and developers to build web and mobile content from a Photoshop comp directly in Dreamweaver, bridging the gap between Photoshop and Dreamweaver, and reducing the need to go back and forth between the two.

Overview of the Enhanced CSS Designer and Element Quick View in Dreamweaver CC

The latest release of Dreamweaver CC has not only introduced new features, but also has major improvements to existing ones such as the CSS Designer and the Element Quick View. We’ve created a couple of videos to provide an overview of these features and the enhancements we’ve made in Dreamweaver CC.

CSS Designer

This video provides an overview of the CSS Designer panel and highlights the improvements to it. In this video you’ll learn how to:

  • Start a page design with the CSS Designer.
  • Work with the CSS Designer visual controls.
  • Use the panel’s workflow enhancements.

You’ll also take a look at how Live View integrates with the CSS Designer feature, making web design easier than ever.

Adobe Dreamweaver Survey 2013

The Dreamweaver team is conducting a customer feedback survey. The objective of this survey is to connect with you, our users, and figure out from as many of you as possible what’s working in Dreamweaver and what isn’t. 

Your feedback is important to us. Participation in this survey is voluntary and your responses are completely anonymous. 

Dreamweaver In Action – Be Part of The Story!

We’re thrilled to announce the #DreamweaverInAction series. Many of our customers have shared their great work and stories, so we decided to pass it along to the community.

The primary aim of this series is to show off our customers’ exciting work, inspire further creativity by sharing ideas and cultivate a discussion about the modern Dreamweaver. It will also help our featured customers get exposure through Adobe’s social channels and website.

We kicked off the series by showing off the creative work of AltaSartoria web design agency. Claudio Caciagli, lead designer and developer, has just launched this stunning responsive website http://altasartoria.com

AltaSartoria web design agency

AltaSartoria web design agency

 

We followed that up with an inspiring example by designer Jordan Flower, who used Dreamweaver and WordPress to create a business at Keys Apparel that supports victims of human trafficking.

Keys Apparel

Dreamweaver & WordPress site.

 

Do you have a great story to tell? Tell it to millions of Adobe customers. Send us your website or work you’ve created with Dreamweaver CC and be part of the story. You can share your story by sending us a message on Facebook (https://www.facebook.com/AdobeDreamweaver) or tweet it with the (#DreamweaverInAction) hash tag.