articles on

Adobe Portfolio - Case Study

Adobe Portfolio - Case Study

Andrew Couldwell shared a great case study showing the behind the scenes of the design process for Adobe Portfolio which is Adobe's service for designers, photographers and enthusiasts to create beautiful portfolios. I had the chance to play around with it a bit and I quite like it. My only qualm was with the Behance integration, I wish I could have projects there without being on Behance. Perhaps it's possible however I have yet to discover. After this post I will definitely seek this out. Product Design The editor must enable the user to quickly and simply edit their portfolio. The UI is very minimal — it gets out of the way and allows you to focus on the design of your website. All changes you make happen live in the editor. We were going for simple, clean and beautiful. It empowers the user to: Easily edit anything they can see, manage and add content, responsively preview their website, and publish/update a live website. Editor The editor UI is very minimal, putting the website you are editing front and center. All edits happen live as you edit and you can preview your website responsively on tablet and mobile at any time, in the editor. Everything can be accessed via direct access by hovering over elements and being presented with edit icons and options to edit. Managing and adding content and site settings are all done via the toolbar to the left of the screen. And the draggable remote to the right accesses the main editable features of whatever page you are currently viewing. Here a couple of images: Specs Customizing and layouts Most layouts by default have aspect ratio cropping enabled for project covers, to unify the presentation and layout of projects in galleries. For me, one of the coolest features in the product is the ability to mass change the aspect ratio (crop) of all covers, so you can very quickly and dramatically change your layout. For more information and to read the full case study check out the Behance post.

Amy Website

Amy Website

I believe we have already posted about this website for the Sites of the Week in the past, however I would like to feature it on a full post because it's still one of the sites that really caught my attention in terms of beautiful execution and seamless integration of audio, video and typography. Kudos to Benjamin Guedj and Digital Creative Boutique Watson DG. From celebrated documentarian Asif Kapadia, AMY is a powerful documentary exploring the triumphant career and tragic life of singer Amy Winehouse. Watson brought the powerful documentary online by building a site that showcases a sampling of the unarchived, never-before-seen footage of Winehouse and gives users a forum to comment on their relationship with the film and the artist. The AMY site is structured by themes that apply to both Amy Winehouse's life and the documentary's narrative arc. These themes serve to connect with the visitor on an emotional level and are brought to life by carefully cut and timed fullscreen background video. Because some of the most prolific commentary on Winehouse’s life comes from the artist herself, quotes by Winehouse from Kapadia’s film animate over each theme section’s video. Throughout the site, fans of the film and the artist are able to leave their own comments to be displayed in each theme section. The site also serves as the documentary’s official online destination with link outs to ticketing and information on the director and production team. Visitors are also able to download a wealth of shareable assets throughout the site or link directly to a particular theme on social media. For more information check tout http://www.watsondg.com/

SolarCity Recruiting Website

SolarCity Recruiting Website

One thing that really amazes me is how much better the web has become, especially in terms of visual design. Video has become part of the tools available to communicate the desired message and enhance the user's experience. The work that Kyson Dana and Garth Pratt put together for the SolarCity Recruiting Website is a great example. Beautiful imagery, appealing video loops. Founded in 2006 by the Rive Brothers and with Elon Musk as the Chairman, SolarCity has since grown to become America’s largest solar provider with more than 12,000 employees. The company has a mission and vision to entirely remove the need for fossil fuels in the US and make each home, building, and business completely sustainable on solar energy. In order to accomplish their vision and continue to grow faster than any other clean energy company, SolarCity needs to be recruiting a massive amount of new employees per month. Our task was to create a recruiting website that could handle the job of bringing in and hiring the people who are going to build this planet's future energy company. It's only been a few weeks since the launch of the website but we've already seen tremendous results. Not only does the website look beautiful but it is incredibly effective as well, driving 80% of its traffic into the conversion funnel. We couldn't be more pleased with how it turned out. For more information about Garth and Kyson, check out http://www.garthpratt.com/ and http://www.dribbble.com/kysondana

Web and Branding Works by Akufen

Web and Branding Works by Akufen

Akufen is an interactive studio focusing their work in Print and Visual Design, Web and Interactive Development based in Montreal, Canada. Being creative around a specific branding is not always a beautiful task with the requests and demands. But Akufen does a pretty good job! All Rights by Akufen All Rights by Akufen All Rights by Akufen All Rights by Akufen All Rights by Akufen All Rights by Akufen All Rights by Akufen All Rights by Akufen All Rights by Akufen All Rights by Akufen All Rights by Akufen All Rights by Akufen All Rights by Akufen All Rights by Akufen All Rights by Akufen All Rights by Akufen Links More info about Akufen: http://www.akufen.ca/en/home/ Follow Akufen on Twitter: https://twitter.com/akufen

Grid Design References

Grid Design References

For the past few weekends I have been playing with some new ideas for the Abduzeedo layout. Checking stats, analyzing what other sites do in terms of organizing large amount of content and heavily visual. One of the references I have been trying to use is newspaper grid systems. Below I selected some references I have in my mood board.

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

Water Drop Effect in HTML & CSS

Water Drop Effect in HTML & CSS

The best way to learn anything is by doing it, plain and simple, trial and error. With the explosion of mobile devices and the evolution of HTML5, CSS3 and browsers, knowing to code is almost a requirement to anyone willing to work with web. I have been playing more and more with CSS, trying to create simple things like basic typography styles to more complex ones, like water drop effects. In this post I will show you how to create a simple water drop effect using CSS. The process is quite simple but it will require some basic knowledge of CSS and a little bit of jQuery. Step 1 - Reference First thing to do is to look for references, in this case photos of water drops effects. Google Images is a super useful resource to create mood boards and find inspiration. Step 2 - CSS for the drops Create your simple HTML/CSS boilerplate or download it at http://html5boilerplate.com/. After that start putting together the CSS for the drop. Below you can see the basic code with no color effects. .drops li{ position: absolute; z-index: 100000; display: block; height: 25px; width:25px; margin: 20px auto; border-radius: 50%; background: rgba(255,255,255,.03) -webkit-radial-gradient(center 75%, ellipse contain, #ffffff, rgba(255,255,255,0) 60%); box-shadow: inset 0 0px 6px rgba(0,0,0,.5), inset 0 -1px 6px rgba(0,0,0,.4), inset 0 8px 3px rgba(0,0,0,.3), inset 0 10px 3px rgba(255,255,255,.1), 0 3px 6px rgba(0,0,0,.5); } Step 3 - Water Drop Effect To create the effect we will use "box-shadow" and "background". For the background you can see below that we are using a white at 30% and a radial gradient. With shadow we will create the 3D effect. To do that we will use 3 inset shadows and 1 normal shadow. Below you can see the code. background: rgba(255,255,255,.03) -webkit-radial-gradient(center 75%, ellipse contain, #ffffff, rgba(255,255,255,0) 60%); box-shadow: inset 0 0px 6px rgba(0,0,0,.5), inset 0 -1px 6px rgba(0,0,0,.4), inset 0 8px 3px rgba(0,0,0,.3), inset 0 10px 3px rgba(255,255,255,.1), 0 3px 6px rgba(0,0,0,.5); Step 4 - Basic Javascript with jQuery to create instances To fill the screen with // Number of drops in the screen ndrops = 1000; // Width and Height of the screen wW = $(window).width(); WH = $(window).height(); // Loop for(i=0; i<=ndrops; i++){ // drop dp = "<li class='d" + i + "'></li>" // Ramdon values for X, Y position dX = Math.floor((Math.random()*wW)+1) + "px"; dY = Math.floor((Math.random()*WH)+1) + "px"; // Ramdon values for scale dS = Math.floor((Math.random()*1)+1) * 0.3; // Ramdon values for Opacity, Width and Height dO = (Math.floor((Math.random()*2)+1) * 0.5); dW = "25px" //Math.floor((Math.random()*30)+30) + "px"; dH = Math.floor((Math.random()*20)+18) + "px"; // Append the drops $("ul").append(dp); // Apply the random values $(".d" + i).css("opacity",dO).css("width",dW).css("height",dH).css({x: dX, y:dY, scale: dS}); } CSS body{ background: #666; padding: 0; margin: 0; overflow: hidden; } .bg{ background: #000 url(../img/bg.JPG); background-size: cover; position: absolute; top: 0; left: 0; right: 0 bottom:0; width: 100%; height: 100%; z-index: 10; } .drops ul{ position: relative; z-index: 1000; } .drops li{ position: absolute; z-index: 100000; display: block; height: 25px; background: rgba(255,255,255,.03) -webkit-radial-gradient(center 75%, ellipse contain, #ffffff, rgba(255,255,255,0) 60%); margin: 20px auto; border-radius: 50%; box-shadow: inset 0 0px 6px rgba(0,0,0,.5), inset 0 -1px 6px rgba(0,0,0,.6), inset 0 8px 3px rgba(0,0,0,.3), inset 0 10px 3px rgba(255,255,255,.1), 0 3px 6px rgba(0,0,0,.5); } Conclusion You can also animate some of the drops, it would be an extra step but it can be achieve quite easily using CSS animations. The whole idea was to explore the possibilies of CSS to create different effects and water drops effect was one that I had done before in Photoshop, so I thought it would be a good exercise. Now it's up to you not only to play with it but to make it better. Image Click on the image to see the demo HTML for Webkit and Chrome

The UX Book: Process and Guidelines for Ensuring a Quality User Experience

The UX Book: Process and Guidelines for Ensuring a Quality User Experience

The book suggestion this week is about UX design, the title is The UX Book: Process and Guidelines for Ensuring a Quality User Experience by Rex Hartson and Pardha S. Pyla. This book was the winner of a 2013 Most Promising New Textbook Award from the Text and Academic Authors Association, is a comprehensive textbook on designing interaction to ensure a quality user experience. Book description Combining breadth, depth, and practical applications, this book takes a time-tested process-and-guidelines approach that provides readers with actionable methods and techniques while retaining a firm grounding in human-computer interaction (HCI) concepts and theory. The authors will guide you through the UX lifecycle process, including contextual inquiry and analysis, requirements extraction, design ideation and creation, practical design production, prototyping, and UX evaluation. Development activities are linked via handoffs between stages as practitioners move through the process. The lifecycle template concept introduced in this book can be tailored to any project environment, from large enterprise system development to commercial products. A very broad approach to user experience through its components-usability, usefulness, and emotional impact with special attention to lightweight methods such as rapid UX evaluation techniques and an agile UX development process Universal applicability of processes, principles, and guidelines-not just for GUIs and the Web, but for all kinds of interaction and devices: embodied interaction, mobile devices, ATMs, refrigerators, and elevator controls, and even highway signage Extensive design guidelines applied in the context of the various kinds of affordances necessary to support all aspects of interaction Real-world stories and contributions from accomplished UX practitioners A practical guide to best practices and established principles in UX A lifecycle template that can be instantiated and tailored to a given project, for a given type of system development, on a given budget Buy Now

iOS7 Frosted Glass Effect with HTML 5 and Javascript

iOS7 Frosted Glass Effect with HTML 5 and Javascript

With iOS7 Apple introduced a completely new design for the 6 year old OS. Among all the changes, one that really caught everyone's attention was the blurred background effect. Basically some parts of the UI get a nice frosted glass effect. There are a couple of ways to achieve this effect using HTML and CSS. The easiest way is to use CSS filters, however the performance on phones is far from usable. With that in mind I decided to experiment with Canvas and the result was quite good. So in this post I want to share a little bit about the idea behind this prototype. Basic workflow What we want to accomplish here is a simple way to blur the content once it goes underneath a part of the UI. For this prototype we will use an action bar, or header. To do that in HTML we will have to use a little bit of Javascript. Basically what we want to do is: Render the HTML Duplicate the content area and convert it to canvas. Move the Canvas to the Header part Sync the scroll of the content with the canvas in the header Basic code   See the Pen eJlfj by Fabio Sasso (@abduzeedo) on CodePen Javascript To convert the content area from HTML to Canvas I used a library called html2canvas (http://html2canvas.hertzen.com/). It's pretty simple to use if you follow the steps in the documentation: html2canvas(element, { onrendered: function(canvas) { // canvas is the final rendered <canvas> element } }); After the Canvas is rendered I then move it to the Header. I also added an ID so I can play with it in CSS and apply the blur effect in the future. html2canvas($("body"), { onrendered: function(canvas) { $(".blurheader").append(canvas); $("canvas").attr("id","canvas"); } }); Blur Effect To apply the blur, I used another library for that, it's called Stackblur and it applies Gaussian Blur to a canvas element. html2canvas($("body"), { onrendered: function(canvas) { $(".blurheader").append(canvas); $("canvas").attr("id","canvas"); stackBlurCanvasRGB('canvas', 0, 0, $("canvas").width(), $("canvas").height(), 20); } }); Conclusion The end result works pretty well for a simple iOS7 prototype. I am still working on fixing the issues with the scrolling, iOS doesn't have "on scroll event" which complicates things a little bit. Below you can see a demo of the prototype. You can fork it on GitHub (https://github.com/abduzeedo/ios7-blur-html5) and make it better :)    

Creative UI Design by Cosmin Capitanu

Creative UI Design by Cosmin Capitanu

Cosmin Capitanu is a UI Designer from Bucharest, Romania. His style is very modern and trendy, using a lot of transparency and flat icons. Take a look at each UI and get some inspiration for your next project. For more from Cosmin Capitanu visit dribbble.com/Radium and radium.ro.

Free Web Icons

Free Web Icons

I have personally used many icons on my designs and I'm always looking for some cool icons to use on the next project. Well today I picked quite a few free sets that you can download and keep by your side in case you need. Enjoy! I know that are many more free icons out there so feel free to share the ones you like on the comment area Flat Icons by Alberto Simple Flat Icons Download Social Glyphs - Mini Icons by Joel Siddall Social Media Mini Icons in PSD Download Vector Web Icons by Yunmie Kim Icecreamcons are 96 free Photoshop vector web icons in 32 by 32 px boxes Download 350 Vector Web Icons by Brankic1979 A set of 350 pixel perfect glyphs icons, perfect for apps, websites or just about anything you can think of. You may use this icon set for both personal and commercial use, which means this resource can be used in any project without worrying about licensing. Download Vector Social Icons by Luke Taylor Download the attached .eps file for a great set of free social media icons. Download Square Social Media Icons by Abhishek Kumar Set of 28 icons. They are in png format, but in 500x500 pixels which should be more than enough. Download Social Media UI Buttons by Ivo Ivanov Free scalable circle social media buttons (with custom shapes icons) in .psd format Download Icon x256 Set by Centis Menant You can use & change it without legal problem. Let's Rock mates! Download Batch 300+ Icons by Adam Whitcroft A lovingly designed and crafted suite of 300+ icons for web and user interface design. Download

App Review: Gradient by Jumpzero

Today I wanna share a review about an app I tried a couple days ago and I truly enjoyed it. It's the Gradient App from Jumpzero, the app is the opportunity to create gradients for web browsers. It's a really good app for the web designers and also for designers that wants a useful colour app at hand. All rights reserved to GradientApp.com The Look As I first noticed, the look is really simple, one window with straight-forward options. We can clearly see that the purpose is to create the gradients. All rights reserved to GradientApp.com The Options The Gradient App is coming with three different main functions to make gradients. You have selecting the colours which is pretty common. You have also by setting the gradient appears or by creating it in CSS. The use of the Custom Color Picker is very recommended also. All rights reserved to GradientApp.com More Options You can also select the type of gradients, either is direction and centre position. Choosing “linear” type, you will choose one of four directions; down, right, diagonally down and diagonally up. If you select a radial gradient then you have a few more choices as to where you want the gradient to centre. I think it's a good option to make some variations. All rights reserved to GradientApp.com Get the Code The CSS button will give you a Live Preview of the code you chose. If you're happy happy with it, you can just copy to clipboard and paste it into your design, or go back and make some modifications. All rights reserved to GradientApp.com Final Words I truly enjoyed the simplicity and efficiency of the Gradient App. For the price of 4.99 (US - Canada), you get a simple useful app packed with great features. Get it now on iTunes. For more information about the Gradient App and Jumpzero, you can check out the gradient website at GradientApp.com or simply follow them on Twitter @jumpzero .

Corporate Identity Work by David Arias

David Arias is an independent graphic designer based in Vancouver, BC, Canada. David dabbles in a variety of different things including print, web, packaging design, information graphics, signage, marketing communications, but it was mostly his corporate identity work in particular that caught my attention on Behance. Swing on over to his portfolio for more and let me know what you think via twitter.

9 Awesome Web Comic Series

The internet is a wonderful and beautiful thing. It used to be that if you had the talent to draw your own comics you were still limited by the avenues of distribution like newspapers and magazines. Now all you need is a computer and a small chunk of change (some web design skills wouldn't hurt.). Here are 9 of my favorite web comics that I think you will also like. Diesel Sweeties You 8-bit graphic lovers out there will like this one because it's illustrated in an 8-bit style, but the videogame nostalgia ends there. It takes place in a world were robots exist and even have relationships with humans. It's very witty and fun to read. Cyanide & Happiness This is one of my favorite web comic series. It's very simply drawn and so dark in its humor. They also produce animated versions of their comics which are incredible as well. Freak Angels A very popular web comic written by Warren Ellis, an experienced writer who has worked with Marvel, DC, Image, and others, and an amazing illustrator named Paul Duffield. It's a more classic comic-book style. The Brads Brad Colbow is web designer and illustrator. He also releases a web comic series titled "The Brads" which is about two web designers making fun of the issues that some designers face with their clients and technology. If you're a designer you will certainly enjoy this comic. You might have seen his work in Smashing Magazine or Vector Tuts. Octopus Pie Octopus Pie is an ongoing comic series about two women living in Brooklyn, NY - their jobs, social circles, and some problems. Ctrl+Alt+Del A sci-fi/geek/videogame culture comic in the same vein as Penny Arcade. One awesome thing that they do is a choose-your-own-adventure style mini-series where they ask readers to email which decision should the character make. Antics Comics This one is similar to Cyanide & Happiness. Dark humor and simple drawing style. Creased Comics It's really a bunch of comics and video-comics in one. They are weird, dark, and funny. Penny Arcade And last but not least, Penny Arcade, the godfathers of web comics. A geek-culture comic strip about videos games, role playing games, movies, and even fatherhood. They've expanded into a little geek empire with an online TV series, an animation series, and 3-day gaming festivals held on both coasts of the U.S. WIRED magazine even did a nice profile on them in 2009, read it here.

The Future of Web Design - New York City 2009

Next week the famous Carsonified Event "Future of Web Design" takes place in New York City and here you will see what to expect from this great event. The best web designers in the world will take place to talk about different topics that will bring up your web game to the next level. Check it out! First you need to visit the event page http://events.carsonified.com/ to get a good felling of what's going on. This year FOWD will take place in NYC on November 16th and 17th. To Find out about Event Location and Schedule visit http://events.carsonified.com/fowd/2009/nyc On November 16th you can choose from 8 different workshops to attend, here is what's on the list. Open Web Standards for the Rich Web - Molly Holzschalag Real World Accessibility for Web Designers - Derek Featherstone WordPress Theme Development for Web Designers - Elliot Jay Stocks How to Design Effective Web Content - Kristina Halvorson How to build a HTML5/CSS3 Website Today - Steve Smith Design Secrets of digg.com's User Interface - Daniel Burka How to use JQuery to Enhance your Web Design - Karl Swedberg Best Practices in Web Typography - Dan Rubin On November 17th, the Conference will take place and this is what will go on: Progressive Enrichment with CSS3 - Dan Cederhom Feedback informing design: Listening, really listening, to your users - Daniel Burka 3 Dimensional thinking for web designers - Mike Kus Accessibility in a Web 2.0 World - Derek Featherstone Stop Worrying & Get On With It: Tips and Tricks for designing for the Modern Web - Elliot Jay Stocks Partner Presentation - Bill Buxton New York Shorts: Vimeo - Blake Whiteman Familiar Futures: Making Mars Feel Like Home - Kyle Sollenberger The Long and Short of It: Panel Discussion - Liz Danzico, Jason Santa Maria, Paul Ford, and Kristina Halvorson. HTML5 Killed XHTML2: And the Mysterious Future of Markup - Molly Hozschlag FOWD Keynote: "Space: What does it mean?" Joshua Davis Meet the Speakers We’ve got some awesome speakers lined up for you this year at FOWD. Here's who we've got lined up so far. Don't forget to check back for updates to the speaker list. Click here to check the list. For all the abduzeedo users, I will be attending the event and would like to meet up with all our users that are going, leave a comment and will set it up. Last year FOWD was in New York as well and here you can watch all the content: Dan Mall The Experience Layer: Using Flash, JavaScript, and other technologies to engage users. Derek Powazek The future of community and crowd-sourced design Hillman Curtis Then minutes of Design Inspiration Mike Kus Whatever happened to the Art in Design? Nicholas Felton Charting Daily Data Nick La Finding Inspiration from your Environment Patrick Haney Web Design Fundamentals: Learning from the past to the better future Paul Boag Educating clients to say yes

10 Impressive Portfolio/Blog Websites

Everyone tries to be different when creating their own website where their portfolio will be displayed, and lately it seem that more and more people have been choosing to have a little blog together with their portfolio. The trend of blogging got to designers and artists and here are some great samples of it. Having a blog on your portfolio website can help in many ways, you can use it just as a 'news' so every time you want to let your visitors know about something you have that little blog there to tell them, you can use it as just a simple blog to share your thoughts with your visitor, or even go further and boost up the blog content to attract people that will fortunately end up looking at your portfolio. No matter what reason fits you, it's always a good option to have it. Here are some good samples with really good use of it. Enjoy! Douglas Menezes http://douglasmenezes.com James A. Mathias http://leihu.com Rockatee http://rockatee.com Ond?ej Ve?tát http://www.ondrejvertat.cz J. Pedro Ribeiro http://jpedroribeiro.com Snoop http://snopp.no Husani http://www.husani.com Tylor J. Reimer http://www.tylorjreimer.com Noe http://www.noedesign.com Gil de los Santos http://yosoygil.com/

Web Inspiration: Video Backgrounds

Hello, it's been a long long time since I've posted something but I'm happy to be back and I hope to post more often. I've had this idea for a post for a while, it's something I've seen only a handful of times but I really like it. It's about websites that use full page videos as their backgrounds. Similar to the idea of using full page photos that we talked about here on abduzeedo last summer. I totally dig this design style. Can't say it's a trend yet because I haven't seen too many. Here are some examples of sites that do this. The first used to automatically start when you loaded the page but then he changed so you have to click on the image to start it. If you know of anymore sites like this, please post the links in the comments. Electrick Suicide This one (IDEAL) is my favorite out of all them. The look of it is awesome, you can control the video just by the move of your mouse or you could just let it play on it's own. IDEAL I'm sure many of you already know of this site since they are a pretty big international agency. Razorfish And if you are interested in doing this for yourself, I've found this website that you can buy a pre-made flash file. I'm in no way affiliated with this site, it just turned up in my search. I like how you can choose how many scan lines your video could have. Lets you give your site that old found video feeling. Flash Den