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.
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/
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
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
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.
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
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
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.
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
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 .
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.
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.
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/
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