articles on

UI/UX Rethinking Digital Healthcare

UI/UX Rethinking Digital Healthcare

Fantasy is a User Experience Design Agency based in San Francisco and New York. In this project they created a system to simplify digital healthcare to make it easier for patients to find doctors and so on. Check it out! For more from Fantasy visit f-i.com. I was fortunate enough during my internship at Fantasy SF to work on one of their renowned case studies : What If We Could Rethink Digital Healthcare? Based on the work of Sacha Jerrems and Anatoliy Gromov, and with the help of Claudio Guglieri (Director of Design) and Scott Carter (UX Lead), I designed the whole experience from desktop, to mobile and Apple Watch, before it was passed on to the motion team that brilliantly brought it to life. - Julien Perriere No matter who we are, staying healthy – and making sure we have access to care when we’re not – is an important part of life. Surely something so important should feel simple? However, in 2015 we believe that health, technology and infrastructure have reached a moment when real improvements can be made to the way people look for and access health care everyday. So we began to look at an aging system through the lens of progressive disruption to explore “what if?”

Web Design: Footer References

Web Design: Footer References

Lately I've been doing a lot of references research and it's cool to see all the different styles of design in many websites. For me, one of the trickiest parts of a website to be designed is the footer. For me it's like the cherry on the top of the cake. Here is a selection I've made of some pretty cool footers. Some might seem simple, others more intricate, and to me this diversity represents footer design these days. If you've seen any cool footers lately, don't forget to share it with us! Cheers. ;) Tens Reuben Crossman mākgoods Maybe.For.You HTO Made by Few Paradox Kittie's Cakes Visual Soldiers Scottie & Russell Windy City Crossfit Designer Trek Skargaarden

Beautiful Web Interfaces by Gene Ross

Beautiful Web Interfaces by Gene Ross

Gene Ross is an Interactive Designer and Developer from Marquette, MI who crafts some beautiful web interfaces. In this post I selected a few of his work for you to admire. Enjoy! For more from Gene Ross visit geneross.co and dribbble.com/geneross.

The Grid: Platform - UX/UI

The Grid: Platform - UX/UI

Since the first time I heard about the Grid platform I got really curious about the idea behind it. "The Grid harnesses the power of artificial intelligence to take everything you throw at it - videos, images, text, urls and more - and automatically shape them into a custom website unique to you." - Sounds awesome but I really wanted to see a bit more about it and in this post I finally got an idea of how the outcome will be, and it look awesome. Check it out. For more information about Leigh Taylor check out his Behance profile at https://www.behance.net/leightaylor Working designs of the Grid platform. A collection of conceptualisations of what is currently being developed. *Subject to change for something more awesome.

Concept Design for IMDb

Concept Design for IMDb

Brazilian Designer JP Teixeira put together an amazing concept design for a new IMDb website. Very modern look build off high quality photos on a solid grid which makes it really interesting way to navigate the site. Take a look! For more from JP Teixeira visit behance.net/joaopaulots. This is just a non-functional prototype built in webflow.com without concern for real content, information architecture neither UX. I know that this non apply in real world and there some troubles for traditional users. It's just an exercise of a tool to show a new concept with responsive interfaces, my only goal with that is just fun and show something cool about the new portal esthetic. I hope you enjoy! Click to view live prototype

UI Design for the Web

UI Designs for the Web

Web has changed so much in the last 10 years, be it the end of the Flash era with the historic Steve Jobs post proclaiming why Flash wasn't good, Web 2.0 and the introduction of the iPhone to the mobile web with responsive design. There has been so much innovation in technology like faster connections that has allowed us to have more visually rich experiences. A couple of years ago we also saw the explosion of long scrolling pages aligned with uniform grids inspired by the Metro design that Microsoft adopted. This post celebrates past innovation while showcasing some design styles that I believe will help keep the web evolving. In my opinion, with CSS Flex Box, Columns, Regions and many new features we will be able to have powerful grid systems that will also allows us to do what graphic designers have been doing for ages, break the grid, explore with typography and create even more personalized and branded designs.

Our Menu UI

Our Menu UI

Simplicity has always been one of the most challenging goals to achieve by any designer. There's a thin line between simple and unfinished and I believe what separates them is the level of attention to details and finesse in the composition, even if the designer chooses to follow an asymmetrical style. The project Our Menu by Hans Pelle Jart is a good example of mixing graphic design with web and the result is quite elegant and beautiful Our menu is a blog about fashion, dance, beauty and film run by Marie Schulz. Marie Schulz is a freelance stylist, Community Manager at Proximity BBDO Swedeb and producer for Forsworks, based Copenhagen. For more information about Hans Pelle Jart check out http://www.make.dk/

Designing for Web in 2015

Designing for Web in 2015

Every beginning of a new year we make our resolutions, we set plans and as if everything starts from the ground up, we talk about trends for the new year. I am one of those but I believe that most of the time the new trends are nothing more than an evolution of something that started before, even crazy changes like in 2013 with the big switch from skeuomorphism to flat design. For 2015 I have been reading a lot of articles about this topic, if you check out on Pinterest there are some infographics and a bunch of boards about it, some have really nice insights, but nothing that someone following the web wouldn't assume. Here's an example: I agree with some of the points the author listed, but mobile first approach has been around us for over 2 years. Also I believe parallax is overused and hijacking the scroll is not very user friendly. Besides that Clean and Simple Layout is not a trend but a goal for every design project. In my opinion I think what we will start seeing more the more and more use of animation to give context and affordance to the most important parts of the UI. Technology and powerful hardware will make this possible more than ever, and we already see some good examples, like the beautiful work of that Jongmin Kim put together giving life to to Google's Material Design Principles That said here is a list of things I think will be on top of our minds in 2015 Motion Design beyond After Effects: We have been seeing more and more beuatiful animations and motion design work being shared on Dribbble and other design sites. I think it's time for us to see the same level of quality in motion on the Web. We know that it can be achieved, thank you Jongmin! Prototyping: In 2014 we saw a bunch of new tools being created to help us to prototype our work, tools like Frame, Pixate, Form, Invision and so many others. I think any designers that wants to have quality work must learn how to prototype and test their designs on the device, not on the laptop/computer screen. Material Design: Google has done a great job putting creating a very comprehensive set of guidelines and a beautiful new visual language. Dead of blank screens while loading new content: with motion design and technical capabilities, we finally might start seeing some native looking animations and transitions on the web. As you could see, I didn't mentioned anything related with visual design per se, I think the visual language will always depend on the branding of the product or service we are designing for. Most of the topics I mentioned are related to creating engaging experiences with refined and beautiful behaviors. I hope these things become true in 2015, otherwise there will always be 2016.

Web Design: Video Backgrounds

Web Design: Video Backgrounds

Web design keeps evolving all the time... trends come and go pretty quick and sometimes we don't even have time to catch up to them. A cool trend I really like seeing the video background, usually used as presentation. I've picked some nice examples of this trend. Check it out! Here you can see my picks. Of course these are only a brief selection. There are tons of other examples all over the web, so if you've seen any site sporting a video background, drop us a link! We'd love to see it. I hope you enjoy this selection. Cheers! ;) P.S.: If by any chance your browser doesn't support HTML5 video and you can't see the animations below, click the titles to visit each website... or for a definitive solution, get Google Chrome. design+code Video not supported. ThoughtSpot Video not supported. Google Photos Video not supported. Oven Bits Video not supported. Union Video not supported. Lees Ferry Video not supported. Towa Video not supported. Dunckelfeld Video not supported. Cobble Hill Video not supported. Geckoboard Video not supported.

Penguin Random House - Concept Project

Penguin Random House - Concept Project

I have seen quite a few personal projects in which a designer picks a website, usually a famous one, and redesigns it from scratch. The designs are generally beautiful and well executed. We know that there are minimal constraints that most designers for those companies might face. Among all these posts about personal redesigns, the one that Serge Mistyukevych put together for Penguin Random House is indeed one of the most complete and really well thought out. Serge is a multidisciplinary designer primarily focusing on creative direction, UI/UX and interaction design. He is passionate about designing digital products the right way for the people who use them. And love to create expressive and effective designs, with scrupulous attention to details. For more information about Serge check out his website at http://mistyukevych.com/

Web Design Works by Agency Dominion

Web Design Works by Agency Dominion

Agency Dominion is a small web design studio based in Toronto, Canada. Since 2008, two people working in a bedroom office had their work been recognized through awards and publications. Designing a website is not only for the content but telling your client’s journey. We’re excited about the future, and privileged that our customers continue to trust us with their most precious asset. Their futures. All Rights to Agency Dominion All Rights to Agency Dominion All Rights to Agency Dominion All Rights to Agency Dominion All Rights to Agency Dominion All Rights to Agency Dominion All Rights to Agency Dominion All Rights to Agency Dominion All Rights to Agency Dominion Links: Website: http://www.agencydominion.com Behance: https://www.behance.net/agencydominion Via Behance

Beats by Dre Website

Beats by Dre Website

Beats by Dre got acquired by Apple recently and like Apple their products they've always had a really stylish design, not the most durable though, I have one that broke a couple of weeks after I bought it. Anyway, for this post I want to share the Beats by Dre website project that Jordan Fripp posted on his Behance profile. I quite like the beautiful photos with the bold/condensed titles. Working on the Beats by Dre brand was a great opportunity to work with a hot global brand and create a fresh e-commerce experience. Collaborating with the R/GA team in LA, we wanted to create a new product detail page that was editorial, beautiful and a great shopping experience. Immersing ones self in each product let's the user fully experience what that product is all about. Gorgeous large scale images, simple animated storytelling and a very thought out navigational experience all came together to create a clean new shopping experience for one of the world's hottest brands. In addition to the product detail page we created new experience for category browsing that integrate celebrity product usage, storytelling for new products and surfacing of limited editions. The shop all page was also scrutinized over to create a very simple but refined experience for Beats small but impactful product line. New icons, a clean simple layout and bold colors make this updated site as alluring as it's products are. For more information check out Jordan's website at http://www.frippdesign.com/

LG.com Redesign Proposal

LG.com Redesign Proposal

Web design has evolved quite a bit in the past years, responsive design, beautiful imagery and lots of cool CSS and Javascript animation techniques has improved the look and feel of the web. Trends are created and they are part of the evolution of the industry. The LG.com redesign proposal created by Vince de Asis is a great example of the currently style. Vince the Asis is a UI/UX designer for Black Pixel based in Seattle, WA, USA. For more information visit: http://dropr.com/vdeasis

Web Design: Sites Using Parallax

Web Design: Sites Using Parallax

It's been a really long time since the last time I published a web design post, but recently I've been crazy about sites using parallax. It's elegant and super dynamic, giving users a new kind of experience, different of that same old, same old way of viewing websites. So I've listed some notable usage of parallax. Of course that these are only a tiny selection and there's plenty more out there in the wild. I'd love to get to know more like theses, so if you know any more examples, don't forget to share it with us in the comments section below. I hope you enjoy my selection. Cheers! ;) Make your money matter Careers at Grooveshark Numero10 Lix Pen Aquatilis Joy Interactive iStrategyLabs 150 Pixels Fixed Jan Ploch Made in days Annexcore Shadow theme Nodo Albino Tonnina

Hit the Road with Us: Travel sites inspiration

Hit the Road with Us: Travel sites inspiration

Do you like to travel? What kind of recreation do you prefer? Are you a desperate vagabond looking for every possibility to escape from the smoggy city into the wild with your old rucksack and tent? Or do you prefer comfortable stay at the luxury hotel where everything and everybody is to your service, where rooms are furnished with royal richness and you can enjoy the roaring sound and salty breeze coming from the ocean having delicious breakfast on the balcony lit with tender morning sun? It doesn’t really matter what makes your heart melt: a palace with complaisant servants facing the crystal bay or impassable jungle swarming with insects and beasts busy with their own business and secretly spying upon you from behind the thick trees. From our viewpoint, the most important thing about travelling is changing the habitual environments, breaking the routine circle. Exactly these factors help us restore our life energy, optimism and inspiration. Now, when the weather is nasty and cold we especially miss the blue cloudless sky, the hot sun and the caressing, transparent waves. We would like to carry you away from your boring office or apartment and take to the most exotic places in the world. (Some of them even don’t exist in reality). Yes, you are absolutely right, the collection of most beautiful, unusual and attractive travel website designs are waiting for you today. We promise that it will be difficult to draw the sight from some of them, so magnificent they are. However, we live in the real world and remember that all content should be not only eye-candy, but also effective. That’s why below you will find some brief tips on good travel sites design. Did you know the depressive statistics that only nearly 30% of consumers consider that travel websites are easy to use? What should you do with it? Please read herein under. Travel websites design guides 1. Easy search. Nothing can be more frustrating for the users than complicated search forms with multiple fields and unclear paths leading nowhere at the end. (According to analytical data, a search function that allows the user to search a date range rather than just one day of travel is much more preferable). 2. Visual appeal of website pages is extremely important. But don’t try too hard. Keep them simple and well-structured, which enables quick scanning. Give preference to light colors (blue, yellow, green) and avoid the dark ones. 3. Make sure that every page of your website has direct purpose and focus. This way your visitors will understand what they are required to do. 4. Take care of speed download time of your website. Internet is getting faster every day and nobody will wait until all elements of you website become visible. 5. SEO optimize your website. Nowadays high search engine rankings are utterly important for your business success as a rare tourist will persistently browse the pages looking for the website, which is somewhere in the outskirts of the web. 6. Navigation onsite should be as simple and understandable as possible. Choosing a tour of your dream is not an easy task, so let your clients focus on it instead of solving the brain-twisters hidden in site navigation. 7. Don’t be too verbose. Your text should be concise and straight to the point. (Mention only important factors such as location clarity, that is, how near the hotel is to the beach, airport, city center, type of holiday, whether children are welcome, etc.). 8. You website should work equally well in all browsers and on all popular mobile devices. Mobile transactions are becoming mainstream (EyeforTravel’s consumer research states that 20% of bookings made today in the USA are made via mobile and this number is still increasing). The utmost accessibility of your website shows how much you care about users’ comfort. And don’t forget about customers with motor impairments and reading difficulties as they also like travelling and can turn into your loyal paying clients. 9. Frequently analyze users’ activity on your website in order to make amendments if necessary. 10. Don’t overburden your home page with super- complex design, animation or intro. All these won’t make it look cool, on the contrary your website will acquire an amateur, cluttered look that cause nothing but users’ irritation! 11. Engage social media tools that your customers use. Some of them like to share their vacation photos, post travel videos or reviews. (We can recommend you to concentrate on Instagram and Pinterest as potential platforms because they are more suitable for visual content sharing). You can also include a travel blog into your site and post useful travel tips, advice and interesting tour info. All this stuff works for your benefit! 12. Touch users’ emotions. In travel site designs user interaction can play the decisive role. If your website stirs positive feelings about the location or travel service you offer, the user will never abandon it straight away. How can you reach this? Of course through HD photos (the larger and the more choice – the better) and welcoming design. Here visual explanation of your message is the shortest way to customers’ hearts, decision-making and their wallets. 13. Be ready to work out a great marketing plan. A gorgeous website design is just the tip of an iceberg. As soon as it is done, switch on the mechanism of your marketing plan to draw traffic to it. 14. Partner with other travel websites. Exchanging links and ad postings with websites that are in similar business gives you additional advertising, which strengthens your online positions. And don’t forget about travel forums for online travel marketing. 15. Offer competitive prices. A holiday is rather expensive purchase, so it’s absolutely natural that lower price will put you ahead of competitors. 16. Good reviews from other holiday makers provided on your site will save your customers from surfing elsewhere for additional information. Olery reports that 81% of travelers find travel reviews important and 49% won’t book a property without sighting reviews. So, encourage your clients to leave reviews on review sites like Trip Advisor and Expedia, on social networking sites and on your blog. 17. Update your content frequently. Firstly, search engines like fresh content, secondly, your visitors will be interested in dropping in more often to be in the course of latest website propositions. 18. Set up a Youtube channel for your travel business. In this case a video costs a thousand words. It brings a destination to life and makes deeper impression on the user. Youtube has a bunch of useful tools that can improve your video popularity. Get creative with your videos; run video contests through your database and award a prize for best travel video. This practice won’t cost you a lot of money, just time investments. 19. Offer users to subscribe to your newsletter, making them tempting hints on great deals, exclusive offers and giveaways, carried out on regular bases only for subscribers. 20. Go creative with your packages – bundle up other components to value add them and make unique on the travel market. 21. The properly selected widgets can improve your website’s design, provide useful information and give your website a more professional look. But don’t be carried away by them: make sure that your widgets are useful, relevant to the topic and complement your website design. Conclusion If your travel agency still doesn’t have an online presence, it’s a good time to get the one. Do you need more arguments? According to Econsultancy’s research almost 85% of holiday purchases by consumers involved the internet (53% booked online, and a further 30% did their research online before booking offline). So making the online offering right has crucial significance for travel agents who want to survive in this market. The key to a successful travel website lies in consistent marketing efforts. You might have a great idea, but it will have no success if your brand is not associated with reliability and trustworthiness. We wish you good luck in your travel business and offer to make a short tour through the most creative, user-friendly, exotic and nontrivial websites on the market. Amaze Vayable Skyscanner Kuoni Winshape Camps Keurig Let’s Travel Somewhere The Hobbit Absolute Travel Elite Traveler Unknown Rovinj. Croatia Pedaling Nowhere Anchor Travel Rob Lutter Gogobot Rome 2 Rio Lastminute Hipmunk We Love 2 Ski Spotted by Locals Bald Hiker The Everywhereist The Most Perfect View Sonicomed Ankommen im Sein Explore Corner Ibis Bay Summer in Tennessee Bed and Breakfast Miglino Pakata Grand Hotel Don Juan Royal Bike Riders Gramercy Park Hotel About the Author Helga Moreno is a learning junkie, requiring a new dose of fresh information every day. She is always keeping her notepad at hand in order not to miss a single thrilling event happening in cyberspace. She diligently puts down all her thoughts in order to share the most interesting of them with web community in general and TemplateMonster.com readers in particular. Want to know more about her? Visit her Google+ profile.

Macaw - Stop writing code, start drawing it

Macaw - Stop writing code, start drawing it

Product design is one of the most sought after fields nowadays. In order to design products a design must have a grasp of the whole creative process, from conception, UX, visuals, user studies and of course prototyping. There are several tools and prototyping frameworks, most of them requiring coding skills. Macaw was created to challenge that and provide a design tool that works like an image editor but also generates great code. Macaw is changing the way the web is created with a revolutionary design tool that works like an image editor but also writes professional-grade HTML and CSS - something long considered impossible. By bridging the gap between design and development, Macaw is lowering the barrier of entry for budding web designers and dramatically accelerating the creation process for pros. The superhot web design tool of the future - Jeffrey Zeldman Features Responsive: Set breakpoints and optimize your site for all devices. Interactive: Set variable names and add scripts for fast prototyping Positioning: Utilize static, absolute and fixed positioning for dynamic layouts. Components: Store elements in your library and reuse them on any page. "I dunno what sorcery they're using to make the code, but it's amazing and beautiful." — Mike Finch REAL-TIME, FLUID LAYOUT ENGINE Macaw’s design environment is powered by a real-time layout engine called Stream, which allows elements to be manipulated in a manner similar to image editors like Adobe’s Photoshop. Behind the scenes, Stream calculates all of the properties necessary (floats, clears, margins, etc) to place the elements into a static document flow just as a seasoned developer would. The days of fighting layout logic are over. The Team Introduction Video For more information visit http://macaw.co/

Web Design Works of Owen Perry

Web Design Works of Owen Perry

Owen Perry is an interactive designer and photographer based in Whistler, BC in Canada. Owen has been designing and developing websites since 2008, whenever it’s a small local company or a corporation. His goal is to build relationships and solve problems with clients who are just as passionate about their own brand. ...I'm fortunate to say that it's both a job and a passion. I love to create clean and beautiful things that people interact with online. It's a responsibility I take seriously but also have fun doing. Apidura All Rights to Owen Perry Into the Mind All Rights to Owen Perry All Rights to Owen Perry All Rights to Owen Perry All Rights to Owen Perry All Rights to Owen Perry All Rights to Owen Perry CIRCA 1983 All Rights to Owen Perry Bartolotta Restaurants All Rights to Owen Perry All Rights to Owen Perry All Rights to Owen Perry George Watts & Son All Rights to Owen Perry Links More info about Owen Perry: http://owenperry.ca Follow Owen on Dribbble: http://dribbble.com/opwann Follow CIRCA 1983 Photography: https://www.facebook.com/circa1983photography