Warning: Cannot modify header information - headers already sent by (output started at /home/content/91/13209791/html/designtalk/index.php:185) in /home/content/91/13209791/html/designtalk/wp-includes/feed-rss2.php on line 8
Design Talk http://designtalk.io UI-UX Design Thu, 06 Apr 2017 23:28:36 +0000 en-US hourly 1 https://wordpress.org/?v=4.6.15 121605177 UI design books for 2017 http://designtalk.io/2017/02/28/ui-design-books-for-2017/ http://designtalk.io/2017/02/28/ui-design-books-for-2017/#respond Tue, 28 Feb 2017 21:33:08 +0000 http://designtalk.io/?p=1362 UI design is all about problem-solving. The result is an interface that’s simple, beautiful and easy to use. I’ve read quite a few UI design books over the years and they’ve definitely helped me gain a solid foundation in the principles of interface design. I love reading, but there are only so many hours in a day, so you need to choose your books wisely. With so many UI design books out there, it’s sometimes hard to figure out which ones are worth reading. With this in mind, I’ve put together a list of my favourite UI design books that I hope you’ll find helpful. Let me know what your own favourites are and how they’ve improved your UI design process.

UI is Communication UI design book

UI is Communication MY FAVOURITE

By Everett N McKay

This book is not about detailed theories; instead, it focuses on providing you with the practical tools you need to solve real-life UI design problems. UI design is often seen in a very subjective way, as pretty pixels on a screen. The author’s premise is that it’s not about aesthetics – rather, UI design is actually an objective way to communicate to users. I like how an interface is compared to a conversation. What should it say to the user, how should it say it and when? Simply writing down the conversation between the interface and the user can lay a strong foundation for the UI design. There are plenty of real examples and design makeovers to help you see the concepts in practice, too, which is helpful.

Designing with the Mind in Mind UI design book

Designing with the Mind in Mind

By Jeff Johnson

As a UI designer, it’s important to understand what’s going on in our users’ minds so that we can create the most effective interface for them to use. This book delves into perceptual and cognitive psychology and how we can use it to create better interface designs. The author covers human choice and decision-making, hand-eye coordination, colour and vision, and attention span and memory. You’ll learn a bunch of user interface design rules as well as the science behind them, and you’ll be equipped to use them in your projects. A great read for those who are interested in the ‘why’ behind a UI design.

Evil by Design UI design book

Evil by Design

By Chris Nodder

In this fun and clever book, we learn about how psychology is used to design interfaces that persuade us to click that button or to buy that product. Organised into seven chapters (one for each of the seven deadly sins), the book focuses on persuasive design techniques and how they’re used to draw customers in, build confidence and convince them to buy products and services. The author cleverly dissects real website examples and shows how they’ve used UI design patterns and human psychology for commercial gain. While some of these design techniques are dark patterns (interfaces aimed at tricking users) that I wouldn’t recommend using on potential customers, others are just clever design that can be helpful to the user. Whether you use this book for good or evil, it’s a fascinating read and you’re sure to learn some new tricks.

Simple and Usable UI design book

Simple and Usable Web, Mobile, and Interaction Design

By Giles Colborne

The title says it all: this book is a practical guide to achieving simplicity in UI design. The core concepts which are central to achieving simplicity are to remove, organise, hide and displace features and UI elements. It’s a very practical guide that teaches designers to figure out the most important tasks for mainstream users, and make them easy to accomplish while removing non-core features. Organising an interface effectively can also make it feel simpler to use, and the author shares many useful techniques to achieve this. This book is an enjoyable read packed with practical strategies for achieving simplicity in your products.

Designing Interfaces UI design book

Designing Interfaces

By Jenifer Tidwell

This book basically documents hundreds of different UI patterns. Each pattern includes examples of best practices of when, why and how to use that pattern in your interface designs. Experienced UI designers would probably be familiar with most of these UI patterns and examples, but it would be a great resource for those with less experience in UI design. This book isn’t focused on the user experience process as a whole; instead, it takes a more practical look at the many UI patterns used to construct an interface.

The Best Interface Is No Interface UI design book

The Best Interface Is No Interface

By Golden Krishna

Krishna is a UX designer and in this book he points out that designing digital products has become all about getting users addicted to looking at their screen, rather than helping them solve their problems or achieve their goals. I’d have to agree that ‘slapping an interface’ onto every idea isn’t a great way to solve the worlds problems. The first half of this entertaining book is about the problems with today’s design thinking. Then, in the second half of the book, he talks about solutions using existing examples (although I would have liked more examples of ‘no UI’). Krishna offers three design principles to design by: Embrace Typical Processes Instead of Screens, Leverage Computers Instead of Serving Them and Adapt to Individuals. A short and thought-provoking read.

About Face UI design book

About Face: The Essentials of Interaction Design

By Alan Cooper, Robert Reimann, David Cronin, Christopher Noessel

About Face was one of the books that was instrumental in bringing interaction design into the everyday language of product design and development. It’s a comprehensive guide on interface design and interactions on both web and mobile devices. The book’s main focus is on creating well-behaved products that are a delight to use, and it covers project process, goal-directed design, persona development and interface element best practices. I’d recommend reading the first third of the book and then using the rest of it as a resource when needed, as it does go into a lot of detail.

Don't make me think UI design book

Don’t Make Me Think, Revisited

By Steve Krug

While this isn’t specifically a UI design book, it’s an old usability favourite, and I think it’s a great and quick read for anyone in the UI design industry. The book contains numerous usability rules based on human psychology that will help you design better interfaces for your users. It’s full of examples too, as well as exercises to help you perform user testing on a small budget. As designers, we can sometimes forget the simple things, and this book helps ensure that we get the simple things right first.

Digital Design Essentials UI design book

Digital Design Essentials

By Rajesh Lal

Suited to those beginning their UI design career, this book is basically a reference for the many types of interfaces in the digital design space. The book is split into three main sections: desktop, web and mobile interfaces. In each section, the author breaks down UI design patterns into concise chunks that are easy to understand. Each chunk includes a theory section detailing the particular traits of the UI pattern, followed by an example of the UI pattern in action. A useful reference for designers getting into the UI design field.

Interdisciplinary Interaction Design UI design book

Interdisciplinary Interaction Design

By James Pannafino

This is an introductory-level book that provides a quick reference for interaction design principles and theories. Each page summarises a design principle and gives you a quick introduction to the main concept. As there isn’t enough information provided to give you a full understanding of each concept, once you find a concept you’re interested in you’ll need to find out more about it from external sources. Some of the design concepts covered include the Pareto principle, personas, principle of least effort, sequence-mapping and affordances. This book basically provides an introductory, high-level view of some of the main interaction design concepts, and won’t be of much use to more advanced designers looking for an in-depth understanding.

I hope you’ve found this round-up of UI design books helpful in your search for your next read. Let me know if you’ve read any other great UI design books too, as I’m always looking to expand my reading list. Happy reading.

]]>
http://designtalk.io/2017/02/28/ui-design-books-for-2017/feed/ 0 1362
50 THINGS ONLY REMOTE WORKERS UNDERSTAND http://designtalk.io/2017/02/21/50-things-only-remote-workers-understand/ http://designtalk.io/2017/02/21/50-things-only-remote-workers-understand/#respond Tue, 21 Feb 2017 22:09:11 +0000 http://designtalk.io/?p=1378 We all do certain things when we’re at home in our comfort zone, but can you imagine having the whole workday to let all your weird hang out? Working in an entirely remote company, we have a blast sharing the funny, frustrating, and often bizarre things that we do and encounter as remote workers.

1. Taking your first 2 calls of the day wearing a robe

2. Making coffee in the middle of meetings while on mute

3. Taking The Lunchtime Shower because you started the day working from your bed

4. Realizing the only friends you see regularly are Ross, Joey, Chandler, Monica, Phoebe, and Rachel.

5. Doing your laundry (in the middle of the workday, of course).

6. Having your boyfriend/hubby to type your Slack responses while you run between activities

7. Going clothes shopping, then exclusively buying pajama sets

8. Announcing to your coworkers that you put on real pants today 👏

9. Making friends with the Amazon Prime and Instacart delivery people. Every delivery person, really

10. Rushing to put on a shirt when you realize everyone else is on video during a call. Pants, of course, are optional. Business on top, party on the bottom! 🎉

11. Being asked to do stuff for friends and neighbors in the middle of the day, because working from home to them means not having a “real” job

12. Having to convince everybody that you do, in fact, have a real job

13. Realizing you’ve never actually met most of the people you work with in real life

14. Using your lunch break to do chores around the house

15. Realizing that your workday at home was far more productive than any you’ve had in an office

16. Seeing the look on people’s faces when you tell them you can work from anywhere you want 😉

17. Initially thinking you’ll work from all kinds of fun and exotic places, but the farthest you ever travel to work is your dining room table

18. Setting your open laptop on the kitchen counter while you prepare a meal

19. Getting excited at the culinary possibilities with all-day access to a kitchen, only to end up eating cereal for every meal

20. Telling your team that you’re going to lunch, but you never actually walk away from your computer

21. Sitting up while working was your greatest non-work accomplishment today

22. Getting exasperated responses from friends when you say you’re exhausted— “…But you work from home.” 😑

23. Talking to your pets more than you talk to people. And bouncing ideas off of your pets

24. Constantly having to apologize for your cat meowing in the background during meetings

25. Being unbelievably nervous when you meet coworkers in person for the first time. It feels like a blind date!

]]>
http://designtalk.io/2017/02/21/50-things-only-remote-workers-understand/feed/ 0 1378
Embed fonts in your website with Google Web Fonts http://designtalk.io/2017/02/21/embed-fonts-in-your-website-with-google-web-fonts/ http://designtalk.io/2017/02/21/embed-fonts-in-your-website-with-google-web-fonts/#respond Tue, 21 Feb 2017 21:59:55 +0000 http://designtalk.io/?p=1375 As web designers we’re all getting a bit bored of using the same old web-safe fonts. Do Arial, Verdana and Times New Roman sound familiar to you? Luckily it’s very simple to embed custom fonts in your website these days. There are plenty of different ways to do it including sIFR, Cufon and @font-face but one of the easiest and best ways to do it is using Google Web Fonts.

Google Web Fonts is a great way to embed fonts in your website without the need for heavy JavaScript or Flash. Google have created a simple interface that allows you to get the font you’re looking for in three easy steps.

1. Choose your fonts

You can search or browse through hundreds of font families until you find the fonts you like. There are some handy search filters that allow you to narrow down your search to Serif or Sans-Serif and you can also define the weight of your font too. Once you’ve found the fonts you like you simply add them to your collection.

2. Review your fonts

To make sure that your fonts will suit your website you can actually test them out in different sizes and styles. You can even test drive your fonts in a simple website preview where you’re able to change the weight, sizes, letter spacing and line height of the fonts which really helps in choosing the right fonts for the job.

google web fonts

3. Grab the code

The last thing to do is copy the link code into the head of your website. In doing this you’re basically linking to a special CSS file that sits on the Google server e.g.

Now you’re ready to use that particular font family in your CSS file and it will render on your site like any other web safe font would normally e.g.

1
font-family: 'Lora', Arial, serif;

Advantages of using Google Web Fonts

There are many reasons why you should be using Google Web Fonts. It’s SEO friendly as text still remains as text and not images, unobtrusive as you don’t need to modify any of your content, light-weight as it doesn’t require heavy JavaScript, accessible for those with screen readers and the fonts are conveniently hosted on Google’s servers which means that you can lighten the load on your servers.

In conclusion

The Google Web Font directory is a great way to embed custom fonts in your website. It’s simple, convenient and light weight. There isn’t a huge variety of fonts at this stage but it’s growing steadily and there should be enough variety for most of your website projects. If you’re looking for another similar solution with more flexibility and variety you could try @font-face.

]]>
http://designtalk.io/2017/02/21/embed-fonts-in-your-website-with-google-web-fonts/feed/ 0 1375
CSS Sticky Footer sticks your footer to the bottom of the page http://designtalk.io/2017/02/21/css-sticky-footer-sticks-your-footer-to-the-bottom-of-the-page/ http://designtalk.io/2017/02/21/css-sticky-footer-sticks-your-footer-to-the-bottom-of-the-page/#respond Tue, 21 Feb 2017 21:44:43 +0000 http://designtalk.io/?p=1367 There are many ways to keep your footer stuck to the bottom of the page, but the cleanest and most well tested method I have come across is CSS Sticky Footer. It’s very simple to implement, uses semantic code and has been tested in over 50 browsers. Keep your footer at the bottom of the page with CSS Sticky Footer.

The HTML

You’ll need to structure your webpage in the following way in order for the Sticky Footer technique to work. You basically have a wrap that wraps around your whole page except your footer. The footer div needs to sit outside the wrap by itself as you can see below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="wrap">
    <div id="header">
    </div>
    <div id="main">
    </div>
</div>
<div id="footer">
</div>

The CSS

This small snippet of CSS will keep your footer at the bottom of the page but you’ll need to make a few tweaks to the code. You need to make sure that you set the height of your footer and then edit the top margin of your footer and also the bottom padding of your main div. These values should all be the same as your footer height as you can see in the below example.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
    padding-bottom: 150px;}  /* must be same height as the footer */
#footer {position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;}
/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/
}

You’ll also need to add the following conditional styles in your web page head to fix some IE issues. This will effects all IE’s except for IE7.

1
2
3
4
5
<!--[if !IE 7]>
    <style type="text/css">
        #wrap {display:table;height:100%}
    </style>
<![endif]-->

Useful tips

Try to avoid using vertical margins for elements inside your wrap div and instead use padding as it could affect the height of your wrap and thus cause your footer to move down the page. Also be careful not to overwrite any of the Sticky Footer styles in your own CSS as it could cause issues with the Sticky Footer.

]]>
http://designtalk.io/2017/02/21/css-sticky-footer-sticks-your-footer-to-the-bottom-of-the-page/feed/ 0 1367
Free image placeholder services to generate dummy images http://designtalk.io/2017/02/21/free-image-placeholder-services-to-generate-dummy-images/ http://designtalk.io/2017/02/21/free-image-placeholder-services-to-generate-dummy-images/#respond Tue, 21 Feb 2017 21:42:16 +0000 http://designtalk.io/?p=1364 When you’re building website templates, user interfaces or initial application prototypes there is often the need for placeholder images or dummy images. Rather than wasting time and effort finding and cropping custom images you can simply use a free image placeholder service that will automatically create an image for you with your specified dimensions. Here are some of the best free image placeholder services on offer.

placehold.it

A clean, simple and polished image placeholder service. If you’re looking for a minimalistic approach then this is the way to go as it uses simple grey boxes in place of images e.g.

1

Lorem Pixel

This service provides actual images that have been categorized for you so that you can display placeholder images that match the theme of your website e.g.

flickholdr

This is quite a clever image placeholder service as it sources images from flickr based on tags. This makes it a great option for pulling in images that are related to your site e.g.

1

Dummy Image Generator

This one is very customizable as you can change the colour, add text and even change the image file format. It doesnt look the best but it has great functionality e.g.

Place Kitten

Definitely the cutest image placeholder service. Lot’s of kittens are ready to be used as placeholder images in your designs or code e.g.

1

Do you know of any others? Be sure to include them in the comments below.

]]>
http://designtalk.io/2017/02/21/free-image-placeholder-services-to-generate-dummy-images/feed/ 0 1364
10 Reasons To Switch From Photoshop To Sketch http://designtalk.io/2016/12/23/1341/ http://designtalk.io/2016/12/23/1341/#respond Fri, 23 Dec 2016 20:31:12 +0000 http://designtalk.io/?p=1341 You are a seasoned UX/UI Designer. Photoshop and Illustrator are your weapons, and you master them to perfection. You produce the screens, icons, wireframes … in no time, and you wonder: why change? Why sacrifice my efficiency and my workflows well established to the benefit of a new tool, which will have to learn and tame, to finally produce the same things?

I told myself the same thing when I was first told about Sketch. Photoshop and Illustrator met all my needs, and although I was not against the idea of adding a tool to my portfolio, the praise I had been given was not convincing enough to push me To break the pace.

Everything changed when i downloaded the Sketch trial. In a few days of use, I was conquered. Why, you ask me?

 

Reason # 1: Any vector and non-destructive

Sketch is primarily a vector tool, meaning that an item can take all sizes without loss of quality (Unlike Photoshop that is a bitmap based software). In the age of digital and multiple screen resolutions, it is a real advantage to be able to make models without having to worry about the final dimensions.

But the vector is by no means new, and Illustrator is already doing very well , you might say. Of course, but with Sketch, I can modify all the properties of a shape (up to the radius of curvature of a corner and the effect of blur applied) on the fly, directly in the inspector, which neither Photoshop nor Illustrator Do not allow. No need to destroy the shape and then recreate it, a real saving of time!

 

 

 

Reason # 2: Infinite Canvas, number of infinite screens

The canvas of Sketch is infinite, and can contain an infinity of artboards, which means that it is easy to centralize all its models of screen in a single file, even on very ambitious projects. In comparison, the Illustrator canvas has a pre-defined size and can contain no more than fifteen artboards without seeing its performances suffer a big blow. Photoshop incorporated an infinite canvas and artboards in 2015, but Sketch goes one step further by also offering pages, each containing its own infinite canvas and its own artboards, for advantages of organizational flexibility.

 

Reason # 3: Export function, so simple, so effective

This is one of the most magical features of Sketch. Thanks to it, I can export the same asset in different dimensions in just a few clicks! And whether it’s an entire screen or only a given selection – icon, button, header …: just click on “make exportable” at the bottom of the inspector, choose the Resolution and export format, and it’s done!

 

Reason # 4: Quick and easy preview with Mirror

Sketch provides free Mirror, a quick preview tool. Install the application on your iPhone, and immediately check the rendering of your screens directly on your device. Perfect to put them in situation as quickly as possible! Mirror also works in your browser, if you are on the same local network.

 

Reason # 5: Symbols to Stay Coherent

Stay visually consistent to provide a better user experience: this is the struggle of any UX / UI designer. And it’s extremely simple with the symbols. Any element (icon, menu, header, or full screen) can thus become a symbol, reproducible to infinity, and whose manipulation of the master immediately affects all other instances of the same symbol. The icing on the cake: easily replaceable text fields and the ability to prioritize symbols by simply adding a ‘/’ in their name.

 

View post on imgur.com

Reason # 6: Intelligent Boolean Operations

These work like Boolean operations on Illustrator. But I have always been frustrated by their irreversibility: once a Boolean operation is done, it is impossible to go back on it in a simple way. With Sketch, no more worries: the shape resulting from the operation retains the original shapes, which can then be changed, moved etc … to modify the final shape. We can even change the Boolean operation applied, or even delete it!

Reason # 7: A mathematical precision

The position and size fields of shapes on Sketch include simple mathematical operations: + – * /, and even the percentage. It is thus possible to place an element precisely, or to put it to the right size simply. Small plus: Grouped shapes will take the overall size of the group (not the screen) as the basis for calculating a percentage. Make an icon whose height is 50% of the button in which it is placed, which itself is 60% of the width of the screen, is now possible!

 

Reason # 8: Direct access to colors

Sketch on the pipette allows us to recover an exact color pixel, anywhere on the screen, even outside of the software. What more can be said ?

 

Reason # 9: Simple Gaussian blurs like hello

With the arrival of iOS 7, the new fashion is to apply a Gaussian blur on a portion of the background. An effect that I find the most beautiful, and the most tedious to achieve on Photoshop. You have to duplicate the background image, make a shape, make a clipping mask, and add a filter that takes an eternity to apply and slows down all the software. Sketch does it all in one simple option in the inspector, without too much impact on performance – provided you do not put it all out!

 

View post on imgur.com

Reason # 10: Easier integration for developers

At Bohemian Coding (Sketch of the creators), they understood that designer and developers work together on daily basis, and they thought of them. Sketch thus offers the possibility of exporting simply the CSS of an element or even of a whole screen. Sketch also has a whole ecosystem of plug-ins and additional tools that simplify the workflow of developer integration, such as Zeplin, which allows them to simply read the dimensions and colors of the elements.

 

Bonus round if you are still not convinced:

 

Bonus Reason # 1: The Price

The Sketch license costs only $ 99. If you stop there, you’ll Sketch for life without its updates, otherwise, expect $ 99 per year to get the latest versions of Sketch.
In comparison, a Creative Cloud subscription for Adobe Suite software is worth about $ 287 a year, and it is mandatory or the software is blocked. If you want to save money, the choice is quick.

Reason Bonus # 2: Lightness
Sketch is much lighter than Adobe Suite software: the application takes 47.5 MB of memory on disk while Photoshop takes 2.11 GB. Similarly, it is much more economical in RAM: by having both applications open with an empty artboard, Sketch takes 98 MB against 661 for Photoshop.

Bonus Reason # 3: Ease of Getting Started
I opened Sketch for the first time two weeks ago. In less than a day I had found my bearings, in less than two I was as productive as on Photoshop or Illustrator. The interface of Sketch is extremely intuitive, especially thanks to the inspector which gathers all the modifiable properties of an element, which allows a very short learning time, in spite of the operating logic quite different from the software of the Adobe suite (including shortcuts)

Everything is not rosy in the best of worlds
Like any tool, Sketch has its limits. Already, it is only available on Mac, which is a pity. And it’s a tool that’s really and definitely designed for interface design – which is both its strength and its weakness. It will never replace Photoshop in image processing, nor Illustrator on some vectorial applications (I find its feather tools – here called vector – a little less efficient, A question of habit). And finally, it seems that Sketch still suffers from some bugs and some worries of stability, even if the team of Bohemian Coding is very listening and reactive when it comes to settle them.

Sketch is, in my opinion, a combination of the best of Photoshop, Illustrator and even Keynote, designed and designed for interface design, making it a formidably effective – or even indispensable – tool for any designer. I hope that the reasons I quoted today will make you at least download the trial version, so that you have a personal opinion of the matter – but I do not doubt that you will find your own X quickly enough Good reasons to  to Sketch!

]]>
http://designtalk.io/2016/12/23/1341/feed/ 0 1341
hello