articles on

Web Directions USA - The Web Industry Conference

What about going to a conference to listen to several great names of the Web Industry? Will you be anywhere near Atlanta from September 21 to 25? So check this out... CSS3, HTML5, Geolocation, mobile web — we’re seeing an explosion of innovation in design and development unlike at almost any other time in the web’s history. To keep you ahead of the curve, Web Directions USA features leading web practitioners, bringing you the freshest technologies, techniques and know-how. At the Web Directions USA you will have the chance to see speakers like Scott Thomas, Jonathan Stark, Aarron Walter, Zoe Mickley Gillenwater, Dan Rubin and many other. Click here to check out all speakers that will be at the conference and to know more about them. Abduzeedo readers will have a 30% discount to join the conference! Register using the ABU code and you will receive the discount specially offered to our readers. Founded in Australia in 2004, by long time web industry figures Maxine Sherrin and John Allsopp, Web Directions conferences bring together the web industry’s leading experts from around the world to educate and inspire our attendees. To check out the complete program, click here. Unlike many conferences, rather than calling for papers and speakers, we have a editorial approach – we put together programs based on current trends in the industry, and seek out speakers who are working in those areas to give inspiring, entertaining, but most importantly practical presentations. Take a look at our blog and resources site to see slides and hear podcasts from our previous events. But as important as the content is, conferences are also about connecting with your peers – making new connections, and strengthening existing ones, sharing know-how and expertise, finding an expert, or new clients. At Web Directions events we pay careful attention to this side of things with social events, and innovative use of social software to help build and strengthen those relationships. To download the One-Pager summary of the conference, click here. I will attend the conference! Will you? Yes... that is right. I will be attending Web Directions USA, so if you want to meet, get in touch via @gismullr. :)

Targeting Kids: Various Strategies Involved in Designing their Websites

Have you ever wondered, “ Children don't read to find their identity, to free themselves from guilt, to quench the thirst for rebellion or to get rid of alienation. They have no use for psychology.... They still believe in God, the family, angels, devils, witches, goblins, logic, clarity, punctuation, and other such obsolete stuff.... When a book is boring, they yawn openly. They don't expect their writer to redeem humanity, but leave to adults such childish illusions.” And,there is no doubt that they form the most important targets for the marketeers. The research says that the expenditure of the advertising industry in regard to the children has exploded. This is most probably because children have their own purchasing power. This is in terms of their power to the decision-making within the family, incorporating the tool to take advantage of the 'pester power' that comes in-built in today's kids. The marketeers follow in-depth study of the developmental, emotional, behavioral, and the needs of the children at different stages of their lives. They tend to sow the seeds of brand recognition/identity at a very young age. And, 'word-of-mouth' forms an integral part of this conquest. Finding the coolest kid in and around, and then, enjoying the fruit is another successful way, but actually accompanies to what we call, Online Marketing and Buzz Marketing. “Online marketing is potentially way more powerful that the television ever dreamt of being.” And there is no doubt to the fact that today, it has become really important for all the web designers to learn to design a website that creates an ever-lasting impact on the psyche of children. This post has actually been written to highlight the trends and practices one should follow while designing a website for children. And, it is actually true when it is said that one needs to be extra-particular regarding the way he/she handles the design, because kids are the most vulnerable section of the society and tend to be molded in the right direction. Here is the list that would help you cater the attention of the kids audience. Stimulation Is the key To be able to stimulate a child's senses, is a task that requires a toil and to be handled with care. The senses play a key role when you see something for the first time. Step into the shoes of a kid, and try and visualise things. Have you ever tried and think what captures a kid's attention at the first go? No...? Then, the answer is the bright colours. As we all know that colours form an integral part of our lives. The more bright the colour is, the more happy our mood tends to be. The choice of the colours and the combinations that a designer tends to choose becomes really important. The choice of the bright, variety of happy-go-lucky colours such as, yellow, pink, bright red, green, orange, blue, etc. proves to be a choice and creates an everlasting impact on the children. Mood of the website is also a determining factor in the website creation. A positive, cheerful, and a 'smiling' website tends to result in creating in baiting more and more of the kids towards the particular brand. For children, though creativity is an essential element, yet, children tend to follow recognisable elements. The designers ought to incorporate the maximum they can, in this respect. As we know that children are the most related to the elements of Nature, such as, trees, birds, fruits, sun, snow, moon, grass, and may more. Try and incorporate them in your designs. I am hundred and one percent sure that they would never fail to relate to your site. Try and think large Large does not mean that you need to widen the scope of your design and the content, but it is actually using the larger than life figures and the characters to be able to create a platform for the kids audience to develop a relationship between your brand website and themselves. There is no denying to the fact that children tend to relate themselves to the animated characters. Mickey, Donald, Barbie, Dora & the Backpack, and many more being their favourites. They are naturally drawn towards these characters and doubles the chances of baiting more and more visitors. There is a need to emphasise on the need to allow the child's imagination run into a fantasy world and then, see how well you are able to grab hold of their fascinating world. If we talk about the navigation system in the world of the websites for the kids, it is actually very important for you to relate them as well. A total cartoon-like theme, a kind of story-telling pattern where they can find a novel scramble of their favourite cartoon characters would bear unbelievable results for sure. Interaction is the another key As we already mentioned that stimulation is the first key in any process, similarly interaction becomes the another. Interaction has always played a key role in one's life and rhythm is the basis of any life. If children are allowed to play and given a scope for entertainment, they would love to visit your site again and again. Animations, Flash designs, and sounds are the keys to a successful kids website. We have already discussed that a kids' website would be completely different from the regular websites and the trends they follow. Interactive videos, and yes, the Interactive Games... how can we forget that? You need to follow a habit of educating the kids audience at every step in a very unique manner so that even their parents encourage their children to follow your website. Allow them to sparkle their own creativity. Let them enjoy colouring, something tangible. Avail your website with the printable designs so that even they can let their nourishing creative juices flow. Try and not forcefully incorporate any stuff in their minds. Gone are the days when a designer tend to follow a set pattern and the preconceived notions for designing a website. There is a lot more you can do to your website. Just as you made the design larger than life, you can make out of the box and a lot of creative cursors for the website. According to the theme, create a unique and yet, attractive cursor with a lot of glittery, and shining effects. Get away from the conventional methods of navigation used in the regular website. See... there is no denying to the fact that there is a lot more scope to the to creativity and actually kids are fun to work with. But, at the same time they ought to be handled with the utmost care. There is a need to incorporate in the sense of responsibility from the designer as well as the company's side as well. There is a need to be able to develop in that level of trust with the kids' parents so that they don't have any problem. You tend to educate the kids with a lot of user interactivity. Last,but not the least, its actually quite helpful if you test your website beforehand. An extensive test is actually quite apt and help you observe and analyse the shortcomings and the positive side of your website. There is no doubt that creating and developing kids centered website is a difficult task but its actually more similar to going back in your childhood days once again, where you get to connect with the Nature, colours, larger than life characters once again. Recommended Reading Designing Websites for Kids: Trends and Best Practices About the Author This post is shared by PixelCrayons, a creative web design and development agency that specializes in custom web design & development, PSD to HTML service, CMS & E-Commerce solutions.

Web Design: Dark Layouts

I do love everything creative... illustrations, graphic design, architecture and all that, but I'm finding myself deeply in love with web as time passes. Dark layouts are a real treat for me... usually, they're awesome. Dark layouts tend to be full of style and really classy. It's cool because you may use neon colors with it, and make just the right thing glow in that layout. For me, the possibilities are numerous, but I wonder how do you like it. Tell us! Here I've selected some great examples of dark layouts I've seen lately. I hope you enjoy these. Cheers. ;) thetoke David Fooks Fully Illustrated Digital Invaders QUE Where They At Rokkan Blake Allen Design Future of Web Design Pictory Blue Collar Agency Ismael Burciaga Versions Digitallabs

Web Localisation is Important... but Why and How?

Today, Internet is the fastest and the most reliable source to reach out to the international market. Participating in the international trade, and that too just one click away, avails you to incur maximum profits. But, how come its possible? You set up a business website of your own, and what next...? “Globalisation was a deep trend pushed by technology and right ideas, as much as anything else.” If we talk about the International market, if we do not modify a product to usable and accessible to the market all across the globe, then, what's the use? This is actually what the World Wide Web is meant for. It is a medium that supports web localisation, which has actually become a necessity. Language barriers “Thought is the blossom, language the bud, and action the fruit behind it.” It's not that every person in the world knows the English language. Its no longer the International language and web localisation surpasses all the boundaries, and incorporating almost all the foreign languages. No website is alien to anyone now. Boosts up the revenue Obviously, if web localisation is accessible to all the people in and around the world, that would multiply the chances of a good revenue. Website localisation is a huge investment, and is not an easy process to handle. So, a good web designing and development agency is what you need, who can actually understand the cross cultural aspect of a web based business. Then, what do we need for this? A good and a creative website that incorporates all the cultural considerations in mind so that the outcome is accompanied by the capability to lure almost everyone's interest. There is no denying to the fact that not everyone is pleased by your site, but trying to adapt considering each and every cultural aspect in the mind is something of the priority these days. Now, coming to the main aspect, if we stressing on to the concept of web localisation, we need to create a website that suits the purpose. “A man who works with his hands is a laborer; a man who works with his hands and his brain is a craftsman; but a man who works with his hands and his brain and his heart is an artist.” By Louis Nizer This is what a designer has to do while designing a website. There are some aspects that needs to be considered while designing any website. And they are as follows— 1. The Content As mentioned again and again that content is the King, and only the vibrant colours and a nice layout won't do anything for you. Keeping the visitors' requirements in mind, you need to keep the content as informative as you can. And, if we talking about the language being the global aspect, we need to keep in mind the different writing systems and scripts. The use of the Unicode is quite essential, which is a standard numeric representation of characters that could be used for over 90 scripts, and has a a repertoire of over 100,000 characters. Almost all the standardised web design applications support Unicode documents, giving you the option to choose the language of your web page. 2. Colour Colours play a different role in every culture and, what is the most important thing is that they are of a significance because the first thing that someone notices are colours one carries. If we take example of the Chinese civilisation, red colour represents good luck, symbolised by the element Fire, happiness, and joy. While, in North America and Western Europe, it represents danger or passion, but on the other hand, it is known as a symbol for purity. Similar to this, when it comes to the colour black, where it represents death in the Western culture, white represents the same in the East. This does not mean that you need to have different colour scheme for everyone, but its something of importance that you need to understand before deciding on to the colour scheme. 3. Graphics What do you understand by this? It may mean that there are still some areas where 'the so-called revealing imagery, would not be acceptable. Here we go like this, when we talk in terms of graphics and flash images in the web world. A more simple version to the ones who have slow Internet connections, and the other ones for the speedy connections, is the most appropriate technique to the problem of graphics and imagery. While considering the fact on a global level, then, you need to be pretty sure about such aspects so that it does not hinder in baiting the potential customers worldwide. 4. Horizontal-ism Is the Key There is no doubt to the fact that there are different reading styles when we talk about the languages. For example, the Arabic language is read right to left, and many others as such. Therefore, it becomes really important when it comes to the scrolling navigation bar. Horizontal-ism is the key and it saves you from the technicalities involved with the different languages. A vertical navigation bar is not universal. Therefore, horizontal-ism is the key you ought to follow if you stepping into the 'e-world' and to incorporate the international success in your business. Give variations in the foreign standard, if you considering localisation becomes a real important factor. And, “We must ensure that the global market is embedded in broadly shared values and practices that reflect global social needs, and that all the world's people share the benefits of globalization,“ once said Kofi Annan. This is what we are considering in this era of a “virtual” global market. The websites form an integral part in the current scenario. They tend to form the mirror image of an individual, organisation, corporate, or be of everyone that relates to that particular site. Therefore, website localisation forms an integral part if we want to consider the global market. About the Author Jenny Warner is from PixelCrayons, a creative web design and development agency that specializes in custom web design & development, markup services, CMS & ecommerce solutions.

Abduzeedo Redesign Case Study

After months of study, designing, and developing, the new Abduzeedo is up. I know it might sound quite dramatic but this probably was the design I put most thought into. I tried to define exactly how the user experience would be and also what I could do to make that happen without losing reference from the previous designs. Now that the site is up, even though I am still fixing some minor issues and I know that will never end, I will share with you here a little bit of my creative process and what directed me to make some of the design decisions I made. Goals The first thing to do on any design project or anything you want to do is to define the goals of the project. For this new version of Abduzeedo I had tons of ideas and things that I wanted to do, but I am only one so I picked up just a few that I considered the most important, so the goals of this new design were: SIMPLICITY SHOW MORE CONTENT EASY TO BROWSE Simplicity The design must be simple in all senses of the word, the UI must be almost invisible in my point of view for a site like Abduzeedo in which the content is what matters and the only way to drive the user’s attention to the content is to make the UI as simple as possible. Show more Content After almost 4 years we have an incredible amount of content, and the best part is that most of this content is atemporal, they are pure inspiration and they will always be, so we needed to find a way to make this content more reachable to the readers like even random articles. Easy to Browse I love some iPad apps like Pulse for example because they are easy to browse through the content. Abduzeedo’s previous layout was very blog style with all the posts piled in a column. It was necessary to scroll down a lot to cover 10 articles. We needed to find a way to make that less of a hassle. Defining Constraints With the goals defined it was important to set some constraints so I would be able to start the labor work. In order to make a site simple my decision was to simply not use any graphics on the interface. The UI would be simply text and some gradients on the navigation to separate it from the rest of the content creating a hierarchy. To be able to show more content the site would have to use more screen area and also be fluid for some resolutions. Another really important thing in my case was the resources I had in terms of who would do what. Basically this was a project I did solo, with some feedbacks from Fabiano Meneghetti and a jQuery help for the User News form from my brother Eduardo Sasso, and I have to work with my available skills and also learn things that were necessary to make it happen, however I couldn’t try to reinvent the wheel because I wouldn’t be able to make it. It’s always good to know your limitations so we know where we can improve ourselves too. The visitors statistics were really important to set some constraints in terms of browser and resolution usages, important areas and what to show to them. Inspiration As I mentioned before tons of things inspired me for the new design. First and foremost I wanted to change the grid style to a more magazine-ish grid style, therefore I could present more content. Below you can see some of the references I took in consideration. Before going to Fireworks I sketched quite a lot especially trying to come up with a fluid grid. I also did something that I think was very good and I will definitely do that more often. Before designing the UI in Fireworks I went straight to HTML first. So I played with solid colors and basic shapes in order to have a look and feel of the real deal and not a static mockup. My first concept was a total fluid layout that would adapt to any resolution and fill the screen with content. I really like that idea, however after testing the HTML I noticed that in certain resolutions the main content was sort of weakened by the amount of content next to it on the sidebar. Once again, that was only possible after testing the HTML, because in my static sketches the idea looked killer but in reality it would be a flaw. Below you can see some of the sketches and the first HTML concept. Click on the image to see the grid in action. Resize your browser window to see what happens. I also tried some jQuery plugins for fluid layouts like the Masonry one, which looked awesome in their demo pages, however once again, as I tested it with the real Abduzeedo content it didn’t work well. I mean, the plugin did what it was intended to do, what happened was that some content would radically change its position depending on the resolution, weakening the consistency of the UI. For example, in my computer the User News is in the top left and in my iPad it’s in the bottom right. That would make the user think too much in order to surf the page and what I want them to do is to get inspired and not to learn how the Abduzeedo UI works. We use this plugin for the User News section. Final Design As you can see the final design is what your looking at right now. Just a few highlights about the design. Header The new header now uses much less of the screen, in the past it was like 250 pixels high, now we shrank it to 110 pixels. Therefore we gain more space for the content. We kept the original black style and added a gradient for the navigation bar so it differentiates itself from the content area. Background I am a huge fan of noisy backgrounds especially dark grey ones, probably because they remind me of the Atari 2660 console which has that rough texture very alike the noise background we have on Abduzeedo now. Home-page and Section pages The posts now have a smaller thumbnail with description and title. They are organized next to each other instead of piled up in a gallery style. We had this sort of style in the previous version but it was a different view option for the home-page and a laboratory for us :) User News and Tutorial of the Week This area is really important because every week we have a cool tutorial and lots of user generated content. In the former design the tutorial of the week was buried a day after it was published, which is really bad. Now it will be visible on every page till a new one comes along. The same applies to the User News...they will be visible on all pages. Random Inspiration This is a little experiment I wanted to do. We want to show you some random inspiration, let the odds show you what's cool and inspiring for you at any given moment :) Footer The tags are now in columns, the end of the tag cloud hehehe, and we have some other blocks with the link to our iPhone App, which wasn’t promoted in the previous design, and of course our magic mug for you to buy us some coffee because we are all human beings in the end and not aliens. Resolutions The site now has 2 layouts for different resolutions, so those with higher resolutions which represents more than 65% of our audience will have less scroll with the same amount of content. Layout for iPads, Mobile Phones, Netbooks based on 1024x760 pixels resolution Layout for resolutions higher than 1024x768 pixels Well there are many more new features like focusing all the sharing features to the Meebo Bar, the new post design with larger images, tons of CSS3 little effects and transitions such as the Not-found page and we are also working on new features while fixing some minor bugs the site might have. I hope you all like the new design and feel free to send us suggestions, opinions and critics about it. Our goal is always to deliver the best content to you and to ourselves because we use the site for inspiration as well, so it's as much mine as it is yours.

Brian Hoff talks about the redesign of TDC

In this exclusive interview, the designer from Philly, Brian Hoff talks about the redesign of his blog TDC (The Design Cubicle). It will open your eyes to his goals on the redesign, the process on the making and much more that beyond a pretty interface design. For those who don't know him Brian Hoff is a graphic designer from the always-sunny Philadelphia. He collaborate mostly on web design and brand identity, but he's experienced in building all kinds of quality, strategic design, both on the web and in print. Brian recently redesigned his blog The Design Cubicle with changes that made me drop my jaw, the quality of the redesign is intense, with a lot of attention in details I just lovely and satisfying to navigate through the new design. Why did you think a redesign was needed for you blog and when do you think other bloggers should consider working on a redesign? Having started the Design Cubicle almost two years ago, I was more looking for a place to record my thoughts and processes and choose a standard, free Wordpress template which I customized and tweaked at the time. It really didn't reflect my design sensibilities but at the time it served its purpose. However as the blog took off, my work was maturing, and business was growing because of the exposure, it was in dire need of a matured look, reflection of my passion for design and functionality of how the website should look and needs of the readers. This was my first ever blog, so I had a lot of extra elements that did not need to be there and were of no interest to my readers. Blogs should consider redesigns or realignments when things need to be polished matured or just all around updated for the better of functionality. Also, you should pay close attention to your readers and the purpose of the blog and bring the focus and design to those elements. When I started my redesign process, I kept seeing my designs turning out similar to the "more traffic driven" blogs, which I feel are often flooded with too many ads, buttons, widgets, and other distractions. My focus was to bring back the attention to what people visit my site for: to read, learn and interact. What was the goal of the redesign? It sort of touched base with this question above, however the functionality was most important when considering my redesign was placing emphasis back on the content and improving readability and experience. I wanted to redesign to reflect my design sensibilities, which are heavily inspirited by print design, typography, and small detail. I also wanted to focus on sharing more valuable, quality information from others by adding the new Notebook section, which replaced my weekend round-up called "Sweet Tweets." I now update the Notebook "on-the-fly" and mostly everyday as I discover a great, informative article or resource. Tell us about the process of making this happen, how did you turn this idea into reality and how long did it take? The entire process started about a year ago which underwent countless revisions and restarts. I even put it aside for a few months to let my thoughts digest. The color palette was inspired by a book cover I saw while browsing a book store in Princeton, New Jersey. Also, I wanted to replace the old logo with more of a masthead to reflect a more editorial sense of the site. The detail surrounding the outer edges of the content area (the cross-hatching pattern) was inspired by a neighbors fence and how the grates interlaced one another in a rounded fashion. I decided to remove a lot of sidebar clutter and focus more on important elements such as, social media, work availability and navigating around the site. This decision was based on analytical research by discovering what my visitors were clicking on the most. What was the biggest challenge you faced while creating the redesign? The biggest challenge was knowing that I wanted to go a bit different from the standard, redundant blog aesthetics / layouts / etc. While I could have went with the easy route and took a similar approach (many of my earlier renditions took this approach), I wanted to push my own boundaries and levels of where I would like to see my work. Challenging because it can be a bit nerve-racking knowing that because something that is often "unfamiliar" might not be approved of by others. In the end, the amount of positive feedback I received was overwhelming though, so it helped to later calm the nerves. The details on the new design are incredible, in which part of the process do you start applying these details and how important you think they are for the overall result? The tiny detailing was held off until the vary end mostly. I fully attest to the small details that make a huge difference. Other's work I admire always have the right details in the right places that take a good design and make it great. Paying attention to minor details often helps to push your work over the edge, although it's important to note that sometimes too much attention to detail can do the exact opposite. Finding the right balance is the science behind the art form. You are a typography lover and as we can see the new design has some typography improvements with the use of fonts from TypeKit. Why did you decided to go with that and how did you select these typefaces? I'm a huge supporter of what the folks over a Typekit are doing. Coming from a traditional print design / fine arts background, typography was always a passion of mine and for a while always felt restricted on the web. There are so many type foundries out there with beautiful, quality and suitable typefaces and it's amazing to see companies like Typekit and Fontdeck supporting this. The font used for the body copy, FF Dagny Web, was selected based on readability mostly. It works extremely well at very small sizes, renders extremely smooth since it was reformatted for specific use and legibility on screens, plus it went well with the rest of the type on the page. I, along with friends Trent Walton and Dave Rupert, spent a few hours one day going back and forth with a few different options deciding which worked the best. In the end, Dagny was the best fit. The result of the redesign is simply beautiful, and the new look has been on for a few weeks. How was the acceptance by the viewers and looking back would you change anything? To be honest, the amount of positive criticism has be astounding – much beyond my expectations – and I am extremely humbled by all of it. Site's that I admire, such as Unmatched Style, Cameron Moll's website, and Web Standardistas, all shared really kind feedback and praise, while the amount of comments on my 'Launch post' was all well taken in for the most part. I've also received good word on Twitter and email that the Notebook section is a new favorite, so that makes me extremely happy as well. It's great to be able to easily share other valuable information with my readers. From a direct standpoint, I guess I can say the acceptance has been mostly positive. From an evaluation standpoint, It appears that I am receiving more visitors and more importantly, more comments per post than previously. [I think] it's due to placing emphasis back on the content and having the number of comments butting out on the left side helps to draw more attention and encourage participation. Beyond the good, my readers have also provided me with valuable feedback, such as adding a 'Back to top' link (in the back bottom footer). One thing I recently changed is the wording of the blue 'Contact me' link at the top (used to read 'Email'). I've probably received around 10–15 emails with a link to my article and nothing else. It appears that some were getting confused and thinking the 'Email' link would email the reader my article for future reading / reference. I've since changed it to read 'Contact me' and it seems to be taken for what it is now. Thank you Brian for taking the time to for this interview and keep up the great work! Here are some exclusive screenshots from the previous design and the new design with the process in between. Old Design Process of Redesigning Process of Redesigning Process of Redesigning Final and current Design Now make sure to check out The Design Cubicle

Openjobs New Site - Case Study

One of the projects that we are very proud here at Zee is the job board Openjobs. Launched in 2008, the website has renewed since its launching, but we decided that it was time to make a full upgrade in it... and I decided to share with you how was this whole renewal process - design and development. When we launched Openjobs, we had great reference sites like Authentic Jobs and Krop, we miss something like that here in Brazil, a job board simple to use, without bureaucracy and focusing on creative professionals. At the time it was done hastily developed in Java, which became a hassle when we needed to do some tweaking. Old Version And with time we increasingly felt the need to create and implement new things. Just as we saw that the design itself was already needing to be refurbished to follow new standards and allow better web experience for users. Another issue we always have here is that we use Drupal for all of our projects, and Openjobs it was in a framework in Java, that was nowhere near the power and flexibility of Drupal. Also, since late 2009, we hired HR Consultant Renata Fraga, working fulltime on it, further increasing the visits and the number of jobs posted, often also contributing to the blog. We saw that it was time to do a complete renewal in Openjobs, from head to toe, and this process started in March. Scratches to the change We knew the key was to keep it simple and try not to modify the flow of how to post a job - that was already understood by users - but we needed to add new features. We began the studies of wireframes, layout, colors and talks about the features. The new version Having decided the layout we began to implement in Drupal with the help of developer Thiago Régis. All the infrastructure was built, CSS, the main features and then we started internal tests at Zee. Surely this intensive to finalize and launch the project is the most time consuming because there are a lot of details that require attention, but that ultimately makes the result very rewarding! Below are the screens of the new Openjobs with the main features and some layout details: Many innovations will be implemented in Openjobs, so stay tuned: openjobs.com.br. And share with us your thoughts about the new Openjobs.

Psychological Study of Web Designs

A website is the window to the soul of an Internet business as well as the people behind it. It may have a positive or may be a negative effect on your end result. If you take the time to think about what your visitors want and how they want to get it, then you’re already on the right track to creating a site that will tap into the psychological drives of your target audience. There are somethings more important to a successful website than its design. A good website is noticeable to not just designers, but to everyone who will visit your website. When you see a website for the first time, you tend to make an instant judgement on its quality and relevance. Even if it is done subconsciously, we are able to take a fairly accurate impression very quickly. Web designs busy with too many elements fail. In that, they attempt to express too much, confuse visitors and make interaction stressful. On the other hand, those which are too barren or sparse fail to build trust or convey purpose. Important Factors in Website Designing: There are some factors which act like determinants for making a good website. These actually contribute a lot in enhancing the usability and experience of the visitors on the website. The factors are listed below: You need to be very particular about images that suit your website the best. The focus of the page— the area where your eyes tend to look when you visit a page for the first time. Be particular about the object you tend to focus on— a single wrong move can ruin the expected traffic Get a hold of your competitors— what their website look like. Simplicity is the best policy and there is a need to create a balance between quantity and quality— be concise and qualitative. This is where psychology helps you! Psychological principles are either looked upon as unnecessary, or too complicated. The human mind is able to recognize a combination of general human psychological and website design factors in the same way where you are able to recognize several letters jumbled together as a specific word and assign meaning to it. When you break it down, web design is simply the manipulation of content and images on a website to appeal to the perceptions of a target audience. When you are trying to make a website that stands out amongst the rest, that has a high conversion rate and performs well, you need to get more specific with your designs. To help you with all this, here we load you with some of the best psyches of humans, which can actually help you to create not only a website that stands out but, the one which leaves a deep impression in the minds of the visitors. Don't let them think that they have landed up in a Wasteland There are certain things that someone naturally, or to put it in other words, have already made a perception that they would see certain things right away when landing to a page. The only things that people expect is the purpose of the site and the form of navigation menus. The designs compliment and reinforces the message. They even expect certain things to be at certain places. People expect blog posts on the front page of a blog. They expect products on the front page of an e-commerce site. And in most cases, they expect some kind of “about” information and a contact page. Trust, is What is In Demand Trust doesn’t come easily, especially in this age of scams, schemes, and unsavory characters, which are readily available online. No matter how recommended the website is, one becomes really suspicious if they visit a website and then, it asks for any personal information. Internet is often considered as a black hole of personal information and creates a terror in the minds of the users, be it clients or the clients' client. With this in mind, try and inculcate that trustworthy design in your website by making use of design psychology. Symbolism of Colours Colours are the non-verbal communicators and go beyond the limits of ink. It all depends on how our mind perceive and associate meanings with each colour. But the colours have a deep impact on how your visitors perceive your site, reinforcing the message you want to portray, only if the selection of the colours is right. Red Fiery and passionate, strength, boldness, excitement, determination, desire, courage. It stimulates people to make quick decisions. Orange Enthusiasm, cheerfulness, affordability, stimulation, creativity, and is highly accepted among young people. Yellow A warm, happy color. It is attention-grabbing, comfort, liveliness, intellect, happiness, energy. It stimulates mental activity. Green Durability, reliability, safety, honesty, optimism, harmony, freshness. Green can sometimes represent inexperience. On the flip side, green is sometimes associated with envy or jealousy. It has been known to drive people away, so in most cases, unless the website is associated with nature, it is better to use it only for website accents. Blue Depth, stability, professionalism, loyalty, reliability, honour, trust. It proves to be calming and cool, but too much can be depressing. It is often associated with corporate images. Purple/Violet Long associated with royalty and wealth. It’s also a spiritual colour— power,nobility, luxury, mystery, royalty, elegance, magic are its phenomenal characteristics. Black Elegance, sophistication, formality, strength, mystery, with a bit of chameleon touch. White Cleanliness, purity, newness, virginity, peace, innocence, and simplicity. Brown A wholesome and down-to-earth colour that denotes stability and reliability. Grey Neutral and balanced. Conservatism, traditionalism, intelligence, seriousness depicts “Grey”. Colours make us feel a certain way, so they can and should be used to support the purpose of a website. Reinforcing Concepts Psychological and emotional triggers are the most valuable tools in influencing visitors. The images you use on your sites can either help or confuse visitors. A well-chosen image can put your visitor at ease, making your intensions clear enough. Every page ought to have a focus. Your design needs to put the emphasis on the focal element of every page. Abstract images may prove helpful, and sometimes work quite well if they tend to focus on a vital subject. They may have different meanings to different people. Therefore, their use should be minimal. That concludes us to by far the most important concept of white space and breathing room. If a visitor arrives on a page filled with every possible thing imaginable, there are possibilities that they are likely to become claustrophobic. “Whitespace,” or “negative space” is the space between elements in a composition. More specifically, the space between major elements in a composition is “macro whitespace.” - MARK BOULTON - Whitespace article for A list Apart Don't let your visitors experience the negative space on your site. Try and encourage your readers to focus on a thing and then, take the appropriate action. Incorporating not so essential information within the 'Z' reading zone means your visitors may leave the site before they find what they’re looking for. People tend to read in a “Z” pattern on a website, starting across the top from the left and ending in the bottom right corner of their screen. So, try and follow this technique to be able to hold readers. Now that we are well aware of the psychological approach behind almost each and every website design, it becomes important to avail you with the information regarding incorporating these techniques into your website designs — Its high time that you start figuring out who your target audience is. It can range from a tech-savvy, to a layman who just checks out a website for photos. Being well aware of the target audience helps you to aim right at bulls' eye and nothing can actually stop that bait or in other words, trigger. Its advisable that you follow and act on customers' advices. Customer's satisfaction should be your soul motto and try and build up a strategy where you tend to interview customers and ask for their feedback and requirements. A sitemap, is very important so that it gives the reader an idea that every single page consists a single objective and it rules out. Try and make sure that you at least have a choice to figure out the best element. Rather than merely being the production of online decoration, web design is an effort of direction and communication. The main goal of such a psychologically triggered web design is to strike a balance between client preferences, design principles, and trial-and-error tests based on end-user analytics data. It should be an on-going process incorporating all the essentials. About the Author Jenny Warner is from PixelCrayons, a creative web design and development agency that specializes in custom web design & development, markup services, CMS & ecommerce solutions.

Playing with CSS 3 - Animations, Rotate and Scale

I have been working on the new Abduzeedo design and have had the chance to play more with CSS 3, even though it's not fully supported on all browsers we can start using some really cool features such as round corners, text-shadow, box-shadow, transitions and transformations. The major downside still is Internet Explorer, however it seems that the IE 9 will have a much better CSS 3 support and support those features. I believe that HTML 5 and CSS 3 will replace Flash eventually, and we can notice that the web design community has been talking a lot about it, Smashingmagazine, one of the largest web design sites out there has been publishing great articles and even launched a CSS 3 contest to incetinve designer to play more with CSS 3. So in this post I will show you some experiments I've been doing with CSS 3, especially with animations using transitions and transformations like scale and rotate. *The demo and code will only work with Webkit browsers like Safari and Chrome. CSS Buttons and Thumbs In this example I will show you how to create a really cool navigation bar using CSS only. I used gradients, transitions and shadows. I also used a Flickr Javascript badge to load some images from Flickr and then use CSS transitions to scale up them when the user hovers an image. HTML Code CSS for the Navigation Bar For the navigation bar I used CSS to create the gradient, the syntax for the gradient in CSS is -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*). For more information about CSS Gradients I recommend that you check out the http://webkit.org website and this article in special http://webkit.org/blog/175/introducing-css-gradients/. One site that is very useful to generate the CSS 3 codes is http://css3generator.com/ especially because of the extra code we have to add to support Mozilla and Opera. #menu{ position: relative; display: block; margin: 20px auto; width: 600px; height: 60px; padding: 0 20px; background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(82,82,82)), color-stop(1, rgb(125,124,125))); -webkit-box-shadow:#000 0 1px 2px; -webkit-border-radius:2px; } CSS for the Navigation Buttons For the buttons once again I used CSS gradients once again and also Text-shadow, and CSS transition so when the user hovers the button the background color will change with an animation. ul li{ list-style-type: none; margin: 15px 0; float: left; height: 30px; line-height: 30px; } ul li a{ background: #666 -webkit-gradient( linear, left bottom, left top, color-stop(0.5, rgb(40,40,40)), color-stop(0.5, rgb(80,80,80)) ); display: block; padding: 0; text-decoration: none; color: #fff; font-size: 12px; font-weight: bolder; text-shadow: #000 0 -1px 1px; width: 90px; text-align: center; border-bottom: 1px solid #666; border-top: 1px solid #222; border-left: 1px solid #666; border-right: 1px solid #222; -webkit-transition:text-shadow .7s ease-out, background .7s ease-out; } ul li:first-child a{ -webkit-border-top-left-radius:20px; -webkit-border-bottom-left-radius:20px; } ul li:last-child a{ -webkit-border-top-right-radius:20px; -webkit-border-bottom-right-radius:20px; } ul li a:hover{ text-shadow: #f5fc39 0 0 10px; background: #222; } Animated Flickr Images Here I used the same hover effect I applied on the images of my new personal site http://fabiosasso.com. So when the user hovers the thumbs the image scales up using the -webkit-transition and -webkit-transform:scale(). Below you can see the code, the transition is applied to the image code, while the transform goes on the hover state only. #flickr_badge_uber_wrapper{ width: 550px; position: relative; display: block; margin: 0 auto; margin-top: 100px; } .flickr_badge_image{ float: left; } .flickr_badge_image img{ margin: 10px; border: 3px solid #fff; display: block; position: relative; -webkit-border-radius:5px; -webkit-box-shadow: #000 0 0 2px; -webkit-transition: -webkit-transform .2s ease-in-out, -webkit-box-shadow .2s ease-in; } .flickr_badge_image img:hover{ -webkit-transform:scale(1.2); z-index: 10; -webkit-box-shadow: #666 0 5px 10px; } Click on the image to see the demo. 90s design with CSS The possibility of rotating and scaling HTML elements allows us to create different compositions that before would be possible only using images or Flash. So, I had this idea of playing only with CSS and basic typography to create a design inspired by David Carson. Basically I just added some rectangles and messed the typography reducing line-heights and rotated some texts, then with transitions I animated the whole composition to rotate and scale when the user clicks on the "Who am I" text. Below you can see the final result of this experiment. It is still a working process but you can have an idea of what you can accomplish now with CSS3. Click on the image to see the Demo CSS Scale and Rotate - Click on the image to see the Demo Recommended Articles Start Using CSS3 Today: Techniques and Tutorials CSS Gradients, Transforms, Animations, and Masks Cleaner Code with CSS3 Selectors CSS Animations Going Nuts with CSS Transitions CSS SELECTORS AND PSEUDO SELECTORS BROWSER COMPATIBILITY Download Click here to download the CSS and Html file used for this tutorial

Using Texture to Get the Most Out of Design

There are a number of design elements that are important to design, texture being just one of them. However, texture can be a powerful force when presented in any type of design, adding visual interest and more detail. Texture is often times associated with the sense of feel, so adding it to a purely visual reference can make a 2D piece appear 3D or more real to life. What's the benefit of this? Things that seem more real to life often result in a more emotional response from the viewer, and are in return, are more memorable. Let's look at how texture can impact various forms of art and design, and some examples within each category. Typographic Design Typographic design has been quite a trend in recent years, and its place in the design world is growing increasingly. Below are some excellent examples of typographic design that use texture incredibly well, in an area where texture was once hardly present. Graphic Design Graphic design is always supposed to send out a message, and texture adds an emotional and 'real-life' response that can almost always yield better results. From posters to business cards, check out these examples of texture used in graphic design below. Web Design Texture is always more difficult to implement in web design because designers must consider varying screen sizes, resolutions, and a number of other factors. However, texture, just like in graphic design, can set the correct mood and give a better feedback than a web design that uses no texture. Below are some favorite web designs that focus on texture, and towards the end, web designs that don't necessarily focus on it, but definitely include it for an enhanced look. Art Traditional art for the most part is separate from design, but of course, texture is just as much a part of it. Check out these amazing art pieces in a number of different mediums that put their main focus on texture. Best Methods for Using Texture in Design From the examples above, it's easy to see how texture in any medium can enhance design. However, what are the best methods for incorporating it? Texture can add a lot of interest to a design which means it can also go too far as well. There are situations where texture can be distracting or used incorrectly so that it is ineffective. Of course, depending on what artistic venue you're working in, texture should be used differently. For example, logo design should keep texture to a minimum, while web or graphic design can use a lot more. Despite the differences for each type of design, let's look into some general rules, or guidelines. 1. Don't Distract from the Essential Elements There are different levels of texture and different types that can be used in better situations that others. If texture is distracting from the needed content or other imagery, then it is being used incorrectly. Try to think about this consciously and get other people's opinions before using too much texture. Also, try not to use heavy textures on backgrounds, unless it is meant to be part of the focus of the design. 2. Follow a Texture Theme Use similar texture styles to create repetition, in a seemingly random design. This can also be used to cause unity in the design. In certain types of design that use texture, the design can seem disorganized and messy, while design should always seem put together to an extent. A designer should use texture for visual interest, either to break a pattern or add variety to a repeating pattern, but texture should not be used to create such chaos that the design looks disorganized. Similar textures will help combat this. 3. Add Texture to Repeating Patterns Most of the examples above are seemingly random textures used for visual interest. However, there are many designers that add texture in a much more organized way, via patterns. An example of this practice would be straight wooden planks used as a background, or dust/noise added to a pattern. 4. Gradients and/or Fading Texture Sometimes an extreme texture can be made more subtle by simply not covering the entire design with it. Try fading a texture into a solid color, or to a darker and less noticeable version of the texture. Be sure to put the lightest part of the gradient (where the texture will be most noticeable) in an area of the design where it's needed — highlighting a main feature, or adding visual interest to a place that needs it. 5. Try Putting Texture as the Main Focus While most designs succeed with adding texture but making it as subtle as possible, other designs excel by making texture the primary focus. An example of this practice is a large background website. A well-textured large background along with interesting shapes and themes can be the main focus of the design, and therefore not be too distracting. This technique is also used often in graphic design with varying textures are clashed to create a design in itself. Wrapping Up Texture is an important part of any style of design, and many forms of design or art aren't visually appealing enough without it. While there are many examples of texture-less design still used today, many viewers see textured designs as more appealing and are more emotionally responsive. Even when knowing this, many designers are afraid of using texture in the wrong way to an extent that they avoid using it, or avoid using too much of it. Our advice to any designer or artist: always feel free to experiment with texture! Trying out new things is the only way to explore and discover new ways of using this one design element to its fullest potential. About the Author Crystal Ramsay is a web designer from the U.S., with a love of Wordpress, simplicity, and user-centric design. She is co-owner of a small and local design firm, and editor-in-chief of The Free Creatives (http://thefreecreatives.com), a blog made for freelance web designers. You can find her on Twitter at @freecreatives

Basics of Slicing with Pixelmator

In this tutorial, I will show you how to use the Slice Tool in Pixelmator to, of course, slice a design to be coded into a functional Web site. I will also show you the HTML/CSS walk-through process. In the end, you will be able to download the files and tinker with them as well. Step 1 Open the Pixelmator file we created for our UI tips tutorial. Step 2 The tool that we will use in this tutorial that will allow us to transform our design into a Web page is the Slice Tool (K). Basically we will use this tool to select the areas that will be save-as images. We won’t need the whole design, just a few parts that will be a part of the UI (background, logo, buttons, screenshots). Step 3 With the Slice Tool (K) selected, create a rectangle slice around the logo as the first slice. Notice that I didn’t include the text next to it because that will be HTML text. Step 4 Now select the Tab of the navigation. Try to be very precise when slicing your site because a single pixel can disrupt the alignment later on in the HTML part. Step 5 The cool thing about the Slice Tool is that we have some options; for example, if we are slicing a photo, we can use JPEG, while for UI elements, we can use transparent PNG. Also, you can change the slice name; in this case, my slice name is “active-tab.” I’m using transparent PNGs for the UI elements and logo, and JPEG for the screenshots. Step 6 Keep selecting the parts of the design that need to be sliced. In the screenshot below, I created 2 more slices, including one for the line that divides the feature content that will be used twice, at the top and bottom of this section. I also selected the main screenshot. Step 7 Here, let’s select only one screenshot, and then we repeat it in the HTML, or you can save different images later on.. Step 8 A very important part is the background. This slice will have to be exported first because we will need the background to be active for this UI element; otherwise, it will be transparent. Step 9 This is a the shadow that we have in the feature section, but I moved it down to slice it separately from that area; once you export it, open the file and go to Edit > Transform > Flip Vertical to create the bottom shadow. Step 10 After you have created all of the slices and named them properly, go through the layer palette hiding layers that are not necessary: all of the text and the background. As I mentioned before, the background slice will have to be exported again later on with the background active. With all the adjustments done, click on Export for Web in the Slice Tool Option. A dialog box will open asking where you want to save the slices. Create a new folder on your computer called “Site”; inside this folder, create another folder called “imgs.” Select the imgs folder and export all of the images into it. Step 11 If you did everything right, you will have images like those pictured in the image below. Step 12 This is not exactly part of Pixelmator, but I will illustrate the HTML and CSS parts so you can understand what I did. Below, you can see the HTML file. We will use the “<div>” tag to create the structure of our HTML. We could use the new HTML 5 tags for that, but we would have to make some adjustments on the CSS, and it would have problems with the different browsers. However, I highly recommend that you check out HTML 5; it’s the future. Step 13 If you take a look at the HTML code in line 8, there is a <link> tag where I linked the HTML file to the CSS file, the “styles.css” file. In this CSS file, I will define the look of the page using the images from Pixelmator. CSS is like writing a cooking recipe: you indicate how the elements will look. You define the font properties (size, color, type, style, weight…), the background, the margins, the padding, and everything. The BODY element is the page itself. There you can find the background using the slice image from Pixelmator (bg.jpg). Also, there are HEADER styles. Step 14 Here you can see how I coded the menu. The slice image of the tab is defined in line 71 for “#menu ul li.active a.” Step 15 Here we have the FEATURE area; again, the backgrounds are defined in lines 79 and 85. Also, the font size for the title and the paragraph are present. Step 16 Here is the code for the screenshots section. I used some CSS 3 properties to create some eye-candy effects, like the -webkit-transition and the transform. Step 17 Here is the code for the footer; it is very simple. Conclusion Pixelmator’s Slice Tool (K) can definitely be used to design user interfaces. The secret of a good UI is simplicity and consistency, so it’s very important to optimize your design to have as few slices as possible as well as the code. Now it’s up to you. Once again, I highly recommend that you check out some tutorials on CSS and HTML; it’s not difficult, and in my opinion, it’s super fun. Site demo Download the Pixelmator and Demo Files Site demo files | Pixelmator file

Mobile Web Design

Adjusting a site for the mobile environment is a great challenge. A lot of techniques you are used to applying on web design would not make any sense on mobile, and vice-versa. Mobile is a great place to try new things with different limits. People using the mobile web are much less patient than those in front of a computer--cellphone screens are much smaller and the mobile internet connection, usually 3G, isn´t as fast yet. Design Adjustments Navigation The omnipresent menu can´t be applied in many cases because of the screen size. The menu probably would have to be in a vertical way and it could be very uncomfortable if for every single page people would need to scroll down all the menu to see the content. So, only use omnipresent menu if your site has only three links or less on its top navigation and, because of that, it can be horizontal. The solution is to put the navigation on the first page and on the others pages use a link at the top to come back to the first page or use breadcrumbs. Content Your content should be the highest priority. The screen is very small so make your design as clean as possible with less images and a lot of white space. The mobile connection isn´t as fast yet to handle images, and it can make it harder to focus on the content. Links On mobile everything is smaller and it is not different with links. You have to make them easier to click on. That can be done with, once again, more use of white space around them and bigger font sizes. When the link is selected, instead of just underlining it or changing its color, it should change the background color, even if the link is in the middle of a paragraph. It´s much better for mobile user to see what they have clicked on. Various Screen Sizes Each phone has a different screen size, and the iPhone has two positions: vertical and horizontal. So, your site cannot have a fixed width with pixels. It´s much better to use percentage and EMS. This method will make your site adaptable to the various screens sizes. Also you can limit the zoom of the interface and the size of the screen using the META properties for mobiles Cross Platforms Don´t expect your mobile site to look the same in all mobile browsers; there are dozens out there. There are some HTML elements and CSS properties that aren´t supported by some mobile browsers or, at least, it doesn't work the way it should. The various heading markups for example will look different from browser to browser. But if all you want is a site that works well on the iPhone and android, you won´t have too much trouble with the code as you already have with desktop browsers. All you need is to adapt the site as I said in the other topics. Check out well coded sites at Mobify, a place where you can build your mobile site. Some designs aren´t as nice but the codes are all valid. You can test it and see if it works for you. Some design blogs use it very well, others not so much. I tried it but I ended up building a mobile site all by myself. And here you can validate your code. Great Examples Below are some great mobile adjusted web designs, all of them and more you can find at a very useful mobile website showcase, Mobile Awesomeness. Other Resources Learn How To Develop For The iPhone - It shows you how to build an alternate page and style sheet for the iPhone and iTouch. Give Your Website a Custom iPhone Bookmark Icon - This tutorial teaches you how to get your own custom icon to appear when someone bookmarks your website on their iPhone home screen. Create a Slick iPhone/Mobile Interface from any RSS Feed - This article is about creating a web page that is formatted for the iPhone that will dynamically fill itself with content from a RSS feed. iPhone Apps Design Mistakes: Over-Blown Visuals - The development of iPhone applications has recently become a hot topic. However, many of these applications are poorly designed and just don ´t become useful as it could be. MobiSiteGalore - A free site to build your mobile site Create a Unit Converter Application for Flash Lite Enabled Devices- Flash Lite is an implementation of the Flash runtime for mobile phones, consumer electronic devices, and Internet-connected digital home devices. Developing with Flash Lite - Mark Doherty over at FlashMobileBlog has teamed up with Dale Rankine to produce a video tutorial series: "Developing with Flash Lite" on their Adobe Flash Lite Vimeo channel. Doctype: jQTouch and Mobile Design - In this week’s 7 minute episode of Doctype Jim covers jQTouch, a plugin for jQuery that enables quick iPhone websites, and Nick talks about how to design for the small screen.

CSS 3 Tips by Nick and Jim from Doctype

Doctype is the show for people who make websites. Every episode, Nick and Jim, break down the latest topics and trends in web design and web development, from CSS3 and iconography to jQuery and web security. Whether you're a designer that wants to learn some coding or a developer that thinks everything they make looks like crap, Doctype is the show for you! They have some very useful episodes with tips for those, like me, are trying to improve their CSS 3 skill, using rounded corners, text-shadows and columns. That's why we're sharing these episodes with the Abduzeedo community. For more information visit http://doctype.tv/ or follow them at Twitter (http://twitter.com/doctypetv) or Facebook (http://facebook.com/doctype). Episodes CSS3 Columns and jQuery Plugins CSS3 Borders and HTML5 Sections CSS3 Gradients & HTML5 Databases

UI Tips in Pixelmator

Many people have been asking me how to create a nice, Apple-style UI in Pixelmator with bevels and letterpress effects. I have also received some inquiries about creating rounded corners. So, I created this tutorial to explain some efficient, helpful tips. Step 1 Open Pixelmator and create a new document. I used 1000×1000 pixels. Then, fill the background with grey. On the menu, select File>Stylize>Noise. Select 1 as the amount. Step 2 Select the Rectangular Marquee Tool (M) to create a rectangular marquee. Step 3 Go to Edit>Refine Selection. Now you will be able to change the selection; you can increase or reduce the size, make the edges blurry with Feather, or create rounded corners with Smooth. I select level 15 for Smooth. Step 4 Add a new layer, and then use the Gradient Tool (G) to fill the marquee area with the gradient. For the colors, I used a dark grey gradient from #666 to #999. ? Step 5 Select the Rectangular Marquee Tool (M) again and create a marquee selection like the one in the image below. The idea here is to create a tab for site navigation. Next, simply delete the bottom part of the rectangle. Step 6 To select only the objects within the layer, roll over the Layers Panel, hold Command, and click on the thumbnail of the layer you want to select. Step 7 Go back to Edit>Refine Selection. Let’s increase the size by 1% and raise the Smooth level by 1%. The idea here is to create a little bevel, or stroke, and apply a gradient on it. Step 8 Add another layer behind the tab layer. With the gradient tool and the selection still active, fill the layer with the gradient. The colors of this gradient are black to white, with the dark grey is at the bottom and the white at the top like a highlight 3D bevel. Use the image below for reference. Step 10 Here is our navigation tab. We are accustomed to having filters and commands to create this type of effect in tools such as Fireworks or Photoshop, but as demonstrated here, these can be easily replicated. Of course, the manual process might take a few extra steps, but it can also help us better the way in which light and shade add depth to things. Step 11 With the Rectangular Marquee Selection (M), create a rectangular selection of 1px height. Step 12 Add a new layer and fill the selection with white. That way, we can create a white line. Step 13 Add another layer and fill it with grey that is a little bit darker than the background. Go back to Filter>Stylize>Noise and add 1% noise to the grey. Then, move the layer down and place it right beneath the white line. The line will be the 3D bevel of the layer. Step 14 Select each layer and go to Layer>Add Layer Mask. Fill the layer mask with black using the Paint Bucket Tool (N). The layer will disappear. With the Brush Tool (B) and a very soft brush, select the color white and paint over the areas you want to show. In this case, only the top center part of the rectangle and line will show, as in the image below. Step 15 Select the two layers and duplicate them, then go to Layer>Merge Layers. Next, select Edit>Transform>Flip Vertical. This will create a rectangular area in which to feature the main content of the site. Try to match the colors of the tab with those of this main area. You can edit the colors of the layers by selecting Image>Adjustments>Hue and Saturation. Step 16 People often ask me how to create a subtle letterpress effect. Some tools allow you to apply shadows or bevels, but Pixelmator does not have such an automated feature. However, there is a quick and easy way to create the same effect. First, add the text you want; in my case, I added “About Us” in black text, Arial font 16px. Step 17 Duplicate the layer and change the color of the text to white, and then move it down 1 pixel. Now you will have a very nice letterpress effect. You can also make the effect subtler by reducing the opacity of the white. Step 18 Create a few more navigation items, this time without tabs. The tab will be used only for the selected item. Step 19 Add a little text about the product. For this, I switched to a bigger font, black Arial at 20px. Step 20 Repeat the Step 17 to create the letterpress effect. Duplicate the text layer, change the color to white, and move it down by one 1 pixel. Tip: If your text color is white, you can create the effect by selecting black and moving the text 1 pixel up. Step 21 Add more text using a much smaller font of 12 pixels. Outside the main area, add a title for Screenshots using the same 20-pixel font used to create the main text. Repeat the letterpress effect. Step 22 Import a screenshot or other image and place it in your design. Move it to the right side so it can become the main image of the site. As you can see in the image below, the one I used is bigger than the main area and is overlapping the white line. To fix this, use the Rectangular Marquee Tool (M) to select an area that fits the part of the image located within the two white lines. Use the image below for reference. Step 23 Next, go to Layer>Add Layer Mask. The mask will hide the areas that did not fit inside the marquee selection. Step 24 Import a few more screenshots to use in the area below the Screenshots title. Let’s add some nice touches to these images. To create a little white stroke, go to Edit>Stroke. Select white for the color, 4 for the Width, and Inside. Press OK. Step 25 It’s also very simple to create a shadow. First, create a marquee selection of the image, as we did in Step 6. Then add a new layer and fill it with black using the Paint Bucket Tool (N). To create the shadow, go to Filter>Blur>Gaussian Blur. I used 15 for the radius, but you can select a larger radius to create a larger shadow. Conclusion Next, just add your logo and a slogan. That’s it! Even though there are not explicit filters to create round corners or bevels, it’s very simple to make these yourself with only a few extra steps. This process is a good exercise for our eyes and brain, and will help us better understand the way in which simple gradients, colors and shades can add depth to a flat image. I hope you find this tutorial useful. Please feel free to send additional requests to abduzeedo@abduzeedo.com. Tutorial Resources Pixelmator file

Web Design - Pricing Tables

We've been working in project for a Web Hosting client. After doing a few wireframes, we realized that we had to find good references to the pricing page. A good table just pops out in the middle of the layout, and makes it unique. So, I had to find some examples of Pricing tables to use as reference, so I spent my afternoon looking for these... we even had some kind people helping us at Twitter (thanks guys). So, here are the ones that we got to get together. I hope you enjoy it! :) Media Temple LightCMS Squarespace Wufoo Backboard HiTask Gloss Shopify SlideDeck Check the link for full view. Big Cartel The Invoice Machine Newsberry Pulse Ballpark MailChimp The Resumator Highrise Web Notes Crazy Egg

Web Design Case Study - Refilmagem

It is a great honor for me to present you the new project that I was working on called Refilmagem. A site about movies that was planned to add in a same place all the information about movies premiers, upcoming and showtimes from our home town, Porto Alegre. The project is from our partner at Zee and his girlfriend, Eduardo and Gisele (yeap, GisMullr!), and bellow I will show you how was the whole process of this project. When Eduardo spoke to me about this project and asked me to create the layout for the site, I loved the idea - not because I love movies, because I only go to the movies, watch some films and that is it - but I loved the concept, the approach of showing this kind of content in a simple and direct way, without all of that 'over information' and 'over colors' from other movies sites. The idea of Refilmagem came from a great frustration and difficulty of finding in a single site all the information about the premiers, showtimes, box office of the weekends and also the film review, poster and subtitled trailer. Gisele/Eduardo To begin the work, he sent me some sites' references that apply interesting concepts, as typography usage, content disposal, simple presentation, etc, so I could understand what he was looking for. Here are some of the references: Emptees Strange Beautiful Volumedia Robbie Manson Development before the Design The site was developed in Drupal, we love this CMS, and Eduardo is having lots of fun with the diversity of its modules. By the way he is being very successful with it. He had already started everything when I came along, and this process was pretty cool since we started the layout with the idea of the structure already defined. Refilmagem is basically a mashup where almost 90% of the service is automatic utilizing many types of API's and technologies like yahoo pipes, yql, json and jquery. Besides that the site counts with an editor/admin to give a special/personal touch to assure the that the service will run smoothly. Eduardo Sasso Drupal with very basic CSS. After that we started some mockups using pen and paper to see what we could do to maintain that same structure, or if we were going to test something different, how we would present the content, the header we were going to use and so on. First wireframes 'hand made'. And of course, having a defined wireframe we went through a lot of layout tests until we got to the final design. Different design tests Fabio also participated in this final part of process to help with the layout, and his help was very important in this step of the work. When we found the model we all liked, we started to improve its design working on Fireworks and CSS at the same time. In some moments it's faster to test straight at the CSS before, because we can gain time and we can have a notion about how it will the the behavior at the browser. Adjusting the Design basic CSS already with some definitions of colors and spaces. Started to work with header elements, shades and gradients. used lots of CSS3 at the shades and Round Corners Header detail, it gave us a lot of work to refine and organize the content. Some 'last minute' details. And as Eduardo is a huge fan of Rocky, he also joined the project! Right now this project (showtimes, movies, etc) is available for our home town - Porto Alegre, but soon it will be available for other cities in Brazil and maybe some cities around the world. We are already working on it. If you are not from Porto Alegre but you want to take a look at the project and browse around the site, go to refilmagem.com.br. Final Design

Great Reads for 2010

The beginning of the new year came with lots of plans and resolutions. In my opinion, it's very important to share our experiences and to learn from others as well, and because of that, in this post I will show you some books that I got and that I think are really good for designers or anyone tech-savvy. Some books I have already read, while others I am currently reading or looking forward to start. There are books more technical about web standards and usability, but there are also good motivational ones that I'm sure will boost your confidence for the new year. In the end that's basically all it's about, doing what you love and having confidence. Crush It!: Why NOW Is the Time to Cash In on Your Passion Publishers Weekly Review Yet another rallying cry to the banner of turning your passion into a career, from braggadocio-ridden entrepreneur Vaynerchuk. After taking over his father's local liquor store, Shopper's Discount Liquors, and building it from a $4 million business to a $50 million one, he created the wine-tasting blog Wine Library TV and discovered the power of the Internet for driving sales. This book shares his experience and step-by-step advice for using Twitter, Facebook, etc., and suggestions for monetizing an online persona, reiterating that the Internet makes it possible for anyone to make serious cash by turning what they love most into their personal brand. His enthusiasm is admirable and his advice solid, but there's nothing new here, and his unappealing swagger—repeated stories of how he crushed it and dominated grate particularly—gives his story more the tone of adolescent peacocking than of worthwhile and sober business advice. (Oct.) Copyright © Reed Business Information, a division of Reed Elsevier Inc. All rights reserved. Abduzeedo Review I have been following Gary for quite some time now and I have always admired him for his passion. The book is all about passion with some incredibly valuable tips on how to start doing what you like to do professionally. It's a motivating book, perfect for the beginning of this year, so you can start putting to practice your new year's resolutions. Great read, short and effective. Logo Design Love: A Guide to Creating Iconic Brand Identities Editorial Review There are a lot of books out there that show collections of logos. But David Airey’s “Logo Design Love” is something different: it’s a guide for designers (and clients) who want to understand what this mysterious business is all about. Written in reader-friendly, concise language, with a minimum of designer jargon, Airey gives a surprisingly clear explanation of the process, using a wide assortment of real-life examples to support his points. Anyone involved in creating visual identities, or wanting to learn how to go about it, will find this book invaluable. - Tom Geismar, Chermayeff & Geismar In Logo Design Love, Irish graphic designer David Airey brings the best parts of his wildly popular blog of the same name to the printed page. Just as in the blog, David fills each page of this simple, modern-looking book with gorgeous logos and real world anecdotes that illustrate best practices for designing brand identity systems that last. David not only shares his experiences working with clients, including sketches and final results of his successful designs, but uses the work of many well-known designers to explain why well-crafted brand identity systems are important, how to create iconic logos, and how to best work with clients to achieve success as a designer. Contributors include Gerard Huerta, who designed the logos for Time magazine and Waldenbooks; Lindon Leader, who created the current FedEx brand identity system as well as the CIGNA logo; and many more. Abduzeedo Review I'm currently in the middle of this book. It's a very useful resource for designers who want to specialize in logo design. The book has good examples with the story behind the logos. Besides that it's a very well designed book, beautiful layout and typography. I will prepare a more in-depth review as soon as I finish reading it. A World in HDR Editorial Review High dynamic range (HDR) photography lets you capture the myriad colors and levels of light that you can see in the real world, and the results are amazing photographs that run the gamut from super real to surreal. Explore this fantastic realm of photography through the unique vision of renowned travel photographer Trey Ratcliff. In this book, Trey shares his phenomenal HDR photographs as well as all the backstory on the adventurous circumstances of their origin. He also reveals the techniques he used to get the final shot. The breathtaking images gracing these pages and the author’s real-world advice for capturing and manipulating images will inspire you to create your own HDR magic. So Trey also includes his simple and straightforward tutorial that teaches you everything you need to know to make your own HDR photographs, whether you’re a beginner, amateur, or professional Abduzeedo Review Gisele is preparing a complete review of this book following the tutorials that Trey prepared especially for it. I took a brief look at the content, and there are some gorgeous photos. If you love HDR like I do you must get this book. Designing with Web Standards (3rd Edition) Amazon Review Standards, argues Jeffrey Zeldman in Designing With Web Standards, are our only hope for breaking out of the endless cycle of testing that plagues designers hoping to support all possible clients. In this book, he explains how designers can best use standards--primarily XHTML and CSS, plus ECMAScript and the standard Document Object Model (DOM)--to increase their personal productivity and maximize the availability of their creations. Zeldman's approach is detailed, authoritative, and rich with historical context, as he is quick to explain how features of standards evolved. It's a fantastic education that any design professional will appreciate. Zeldman is an idealist who devotes some of his book to explaining how much easier life would be if browser developers would just support standards properly (he's done a lot toward this goal in real life, as well). He is also a pragmatist, who recognizes that browsers implement standards differently (or partially, or not at all) and that it is the job of the Web designer to make pages work anyway. Thus, his book includes lots of explicit and tightly focused tips (with code) that have to do with bamboozling non-compliant browsers into behaving as they should, without tripping up more compliant browsers. There's lots of coverage of design and testing tools that can aid in the creation of good-looking, standards-abiding documents. --David Wall "Some books are meant to be read. Designing with Web Standards is even more: intended to be highlighted, dogeared, bookmarked, shared, passed around, and evangelized. It goes beyond reading to revolution" - Liz Danzico, Chari, MFA Interaction Design Once You're Lucky, Twice You're Good: The Rebirth of Silicon Valley and the Rise of Web 2.0 Editorial Review Once You’re Lucky, Twice You’re Good is the story of the entrepreneurs who learned their lesson from the bust and in recent years have created groundbreaking new Web companies. The second iteration of the dotcoms—dubbed Web 2.0—is all about bringing people together. Social networking sites such as Facebook and MySpace unite friends online; YouTube lets anyone posts videos for the world to see; Digg.com allows Internet users to vote on the most relevant news of the day; Six Apart sells software that enables bloggers to post their viewpoints online; and Slide helps people customize their virtual selves. Business reporter Sarah Lacy brings to light the entire Web 2.0 scene: the wide-eyed but wary entrepreneurs, the hated venture capitalists, the bloggers fueling the hype, the programmers coding through the night, the twenty-something millionaires, and the Internet “fan boys” eager for all the promises to come true. Abduzeedo Review I finished reading this book at the end of last year. It's another motivating one because it tells the story behind the web services we have been using now. All this revolution with the Web 2.0 and with user participation becoming the center of the equation. It also really encourages us to try to do what we believe is right. Eyetracking Web Usability Editorial Review Eyetracking Web Usability is based on one of the largest studies of eyetracking usability in existence. Best-selling author Jakob Nielsen and coauthor Kara Pernice used rigorous usability methodology and eyetracking technology to analyze 1.5 million instances where users look at Web sites to understand how the human eyes interact with design. Their findings will help designers, software developers, writers, editors, product managers, and advertisers understand what people see or don’t see, when they look, and why. With their comprehensive three-year study, the authors confirmed many known Web design conventions and the book provides additional insights on those standards. They also discovered important new user behaviors that are revealed here for the first time. Using compelling eye gaze plots and heat maps, Nielsen and Pernice guide the reader through hundreds of examples of eye movements, demonstrating why some designs work and others don’t. They also provide valuable advice for page layout, navigation menus, site elements, image selection, and advertising. This book is essential reading for anyone who is serious about doing business on the Web. Next week I will have a few more books to share with you so stay tuned. Also I'd like to thank David Airey, Pearson Education, and Trey Ratcliff for sending me books to read and share my thoughts with the design community.