Design & UX
Daniel Schwarz, Dec 20

Adobe XD or Sketch: Which Will Result in the Best UX?

Adobe have finally offered a genuine competitor to Sketch. The big question is: Adobe XD or Sketch? Is the new kid on the block a real contender?
HTML & CSS
Louis Lazaris, Dec 19

Introducing CSS3

4 COMMENTs
HTML & CSS
Louis Lazaris, Dec 15

Introducing HTML5

1 COMMENT
Design & UX
Alex Walker, Dec 07

UI Motion : Can You Tell a Story with Movement?

We all think carefully about choosing a color, but – as Heider and Simmel show – the way an object moves can have a profound impact on how we feel about it.
20 COMMENTs
Design & UX
Daniel Schwarz, Dec 07

What is Adaptive Design? (And is it Different from Responsive Design?)

We all have an understanding of responsive design, but how does it relate to 'Adaptive design'? Turns out the answer depends on who you ask.
3 COMMENTs
Mobile
Tatsiana Levdikova, Dec 02

Using Color Schemes in Mobile UI Design

According to Kissmetrics, a product’s visual appearance is the number one factor influencing consumers’ purchasing decisions. Nowadays, it is common practice among marketing managers to hire color consultants to get assistance in determining a color (or colors) that would attract their customers. They understand that colors are an important marketing tool. Mobile app developers have many useful things to learn from them. The color wheel based on the three primary colors (red, yellow, and blue) has been used by artists for centuries. The first color diagram was developed by Newton 350 years ago. The color wheel used nowadays includes primary, secondary (green, orange, and purple) and tertiary colors (yellow-orange, red-orange, red-purple, blue-purple, blue-green, and yellow-green).
Design & UX
Daniel Schwarz, Nov 29

Animations: Using Easings to Craft Smarter Interactions

Modern user interfaces move. But as Fun Boy Three and Bananarama once said, "T'aint what you do, it's the way that you do it!". Let's talk about easings.
3 COMMENTs
Design & UX
Alex Walker, Nov 23

How to Hack Brains with Cinemagraphs

Cinemagraphs are like the snow globes of the web – simple yet strangely mesmerizing. Here's how to use them in your web design.
8 COMMENTs
Mobile
Elio Qoshi, Nov 22

Firefox OS post-mortem - Interview with Andre Garzia

I am happy to be joined today by Andre Garzia, a Mozilla Tech Speaker, Firefox OS book author and contributor at Mozilla for the past few years. At SitePoint we tend to cover cutting edge topics and keep developers in the loop about the latest happenings around the web. This time however, we will have a look back and talk about Firefox OS, which as you might have heard, was discontinued earlier this year. We will have a look at the things Firefox OS stood for, what impact it had on the web and what lessons we can learn from it. Elio: It’s great having you here Andre! Also thanks for taking the time to cover a few things about Firefox OS, which might be a rather difficult topic, as we have all been so passionate about it. Andre: It’s my pleasure. After all this time we can have a look at Firefox OS in a less biased way, I believe. Elio: I suppose. It would be great if you could tell me more about yourself at Mozilla and how did you get involved with Firefox OS in the first place? Andre: I was participating in a hackathon, on a brazilian campus party. They had these huge hackathons there lasting for many days. People basically camp there with activities 24/7. I went to that event alone, I didn’t have a crew to hang out with and a couple of days before that event, I went to a Firefox OS app day, where they explained the system and the API-s.
8 COMMENTs
Design & UX
Michaela Freeman, Nov 21

Web Layout 101: Making the Most of the Top Right Corner

The top right of screen is a difficult area of the screen to design for. Michaela shows you how to select the best images for your layout.
2 COMMENTs
Design & UX
Ivaylo Gerchev, Nov 15

The Best Way to Create Fantastic 'Invisible Pen' Effects in SVG

Watching an SVG image drawn onto screen is powerful effect. Ivaylo shows you how to create the 'Invisible Pen' Effect in SVG using Vivus.js
1 COMMENT
Web
Adam Rasheed, Nov 13

Mobile User Interface Design with Sketch

We recapped our Live Lesson with Adam Rasheed, teacher of our User Interface Design with Sketch course on SitePoint Premium.
Design & UX
Adam Rasheed, Nov 07

Is Figma a Serious Option for Sketch Designers?

There's a lot of social buzz around 'Figma' , a new Browser-based UI Design tool. But is it a serious alternative? We look at Figma for Sketch Designers
Design & UX
Jan Losert, Nov 01

26 Steps of Product & Dashboard Design

Jan Losert has spent 4 years refining his refining his design product dashboard design – now he's ready to share his insights and secrets. Read on.
Design & UX
Adam Hatch, Oct 27

I'm a Designer: How Do I Deal with a Cease and Desist Letter?

There are few things more disconcerting than getting legal notice from seemingly nowhere. But if you receive a cease and desist letter, Adam has your back.
28 COMMENTs
Design & UX
Daniel Schwarz, Oct 25

How to Lift Your UX Out of the Ordinary with Micro-Interactions

Micro-interactions are subtle “moments” centered around accomplishing a single task. Daniel shows how they count for UI designers.
3 COMMENTs
Design & UX
Adam Rasheed, Oct 24

UI Designs with Sketch 40 - Live Lesson!

We're giving you a chance to speak directly with our course instructor and ask your questions directly! This week we focus on Sketch and build a UI design.
5 COMMENTs
Design & UX
Stephen Moyers, Oct 21

The Movement Towards Motion in Website Backgrounds

While the background video trend might not be an automatic usability fail, that doesn't mean you can't get it wrong. Stephen looks at the wins and pitfalls.
Design & UX
workerbee, Oct 20

How to Create More Fun, Playful Typography

While crafting type can sometimes feel stiff and overly mathematical, workerbee wants  to help you find the joy in creating more playful typography.
Design & UX
Adam Rasheed, Oct 12

Designing Custom Icons with Sketch 3

Sketch 3 has design templates included, and many of those have icons in them. This is an easy way to get started, both with icons and with your user interface design. In this video, we'll focus on building your own custom designs, including icons from other sources. We'll takes you through the process of locating good icons, and how to include them in your design projects. We'll also detail the process in finding exact brand colors, so that your icons can be on brand.
Design & UX
Alex Walker, Oct 12

Type Nugget: Good Typography is About Finding the Right Playground

While web designers have more typography choice than ever before, arguably our tools haven't caught up.Type Nugget hopes to fill the gap.
Design & UX
Massimo Cassandro, Oct 10

‘Reskinnable’ SVG Symbols: How to Make Them (..and Why)

How can you create a single SVG graphic – maybe a logo or icon – that can be easily restyled and recolored in any setting or device? Massimo has a solution.
2 COMMENTs
Design & UX
Catarina Borges, Oct 05

What if Your Icon Choices Ruined Your Work?

Icons are about communicating meaning but meaning isn't fixed – it moves. Catarina looks at the icon choices that are causing problems for users.
6 COMMENTs
Design & UX
Jessica Enders, Sep 28

Form UX: Sometimes Even Apple, Google and Amazon Make Mistakes

Jessica Enders looks at how even the giants of digital media can slip up in their web form UX.