A Portfolio and blog for Mustafa Kurtuldu

Designer Vs Developer

Photocomposition in action
Photocomposition in action

How to create a design system

The autonomy of design systems like material design and how one can start to build their own.

A design system is a set of principles that helps guide designers trying to navigate a platform, environment or ecosystem. Sometimes they impose restrictions and force rules, but a good set will always seek to guide. Design principles are not a new thing, Roman architect Vitruvius had three golden rules for great architecture;

  • Durability (Firmatis ): The building should be robust and remain in good condition.
  • Utility (Utilitas): The building …
Material Money PWA
Material Money PWA

Designing a progressive web app

This article covers the process and the lessons learned when designing a PWA and the things we learned.

A progressive web app (PWA) is a website that has app like features, for example, it can work offline, send you notifications and provides more seamless integration into the native features & behaviors of your phone & desktop.

There is a spectrum of PWA UX, with some PWAs focused on content websites that let users browse them when their network connection dies, and others offering an interactive, functional experience such as Spotify. …

Photo by NEW DATA SERVICES on Unsplash
Photo by NEW DATA SERVICES on Unsplash

Stress testing your designs so that they are flexible

How we can be creative and realistic with the websites

For graphic designers, this will seem quite odd, but to produce boxes with rounded corners on the web was tricky to implement 10 years ago. To get them you needed hacks and horrible HTML tricks to get a box with rounded corners.

Ironically when the ability to add rounded corners with CSS standardized across all major browsers, designers didn’t want to do them anymore because they became unfashionable.

The tools we use reflect the things we …

Photo by nikko macaspac on Unsplash
Photo by nikko macaspac on Unsplash

Getting started with UX research

In this article we will look at the steps to take to conduct UX research

To start with, I have to state that you should always have professional researchers on hand to do research properly, in the same way, you need a trained designer or engineer. That said, if you are starting out, or want to improve your process and site or app, diving into research is the best thing you can do to improve the work that you do.

When you run research during product development, what you are looking for are the problems people have …

Photo by nikko macaspac on Unsplash
Photo by nikko macaspac on Unsplash

What are the pain points for web designers?

To better understand the designer community we have been looking at the challenges designers face

We have been exploring some of the pain points web designers faced in the industry and did a small research project to understand better what challenges designers and developers face.

This project was broken down into three activities, two roundtable discussion with new graduates, conversations with designers on social media and looking at existing buckets of research from discussions with professionals as part of the British Design Council’s …

Hacking user perception to make your websites and apps feel faster

In this article I cover different design devices you can use to make your experiences feel quick

Ever wondered why when you call up a utility company and you are put on hold, they play music? Consider how you would feel if there was no music, just dead silence. CNN ran a survey that showed 70 percent of callers who are on hold in silence hang up within 60 seconds. Because the silence would make you think the line had perhaps disconnected, and the wait would actually feel longer. The idea is to fill the space and occupy your time.

Houston …

Designing with the Gestalt principles

This week we take a look at the Gestalt theory

The Gestalt principles are a series of laws that are used to explain why human beings naturally find organized patterns in objects they see around them. The goal with the principles was to explain why we group objects in some ways but not others.

There are many different principles, but here I am going to look at the ones that effect grouping, these are; proximity, similarity, common fate, continuity, closure, and prägnanz.

Proximity

When items …

Photo by Josh Couch on Unsplash
Photo by Josh Couch on Unsplash

Scenario based design

Techniques on how to design user flows and not just tacking on a bit of design at the end

Many years ago I was designing a website and was given a set of design guidelines that were quite interesting, shall we say. I think they were going for a Zen-like approach, in that it was a style without style, they used Arial everywhere and blue was their primary colour; it was painful to look at. I was tasked with designing the flow and UI.

During one of the presentations, I was asked by the PM if I could “add a bit more design” to the …

Photo by Josh Couch on Unsplash
Photo by Josh Couch on Unsplash

Design, economics and ethics

Are ethical choices economic or moral? In this article, we look at both

I feel that we as an industry are sometimes a little unwelcoming to newcomers and at times can come across as a little condescending. Especially when beginners are caught using technology or tools that are deemed too simplistic.

Take WordPress, the free content management system used to power blogs, that makes up ~30% of websites on the internet. Also ~80% of sites use PHP, the programming language that powers for WordPress. But both are …

Photo by Damien Kühn on Unsplash
Photo by Damien Kühn on Unsplash

The dangers of designing for one browser

How we should always try to design for everyone

Ithought the phrase; “best viewed using Internet Explorer version 4.0 or higher” would have been killed off by now. It seems someone forgot to tell NASA. Ok to be fair that site is there for historical purposes, still, that message was littered all over the web in the 1990’s and early 2000’s.

These days we are bombarded with websites asking you to download their apps. So not much has changed.

In those early days browser share was in Internet …

Photo by Marcus dePaula on Unsplash
Photo by Marcus dePaula on Unsplash

Variable fonts and the digital revolution

How tools change the way we design

The tools we use sometimes inspire the things we make. Their inherent limitations become the epitome of a style that later generations look back on in awe. For example, Andy Warhol’s use of silkscreen printing defined the pop art style of the 1950’s and 1960’s.

The silkscreen’s; ability to reproduce the same images precisely at a high quality allowed Warhol to create works that were almost impossible. He chastised for the use of repetition by …

Polaroid photos
Polaroid photos

Homogenising the web and praying for anarchy

The tortured soul of a designer who longs for something more

Every generation of art and design seems to revolve around a political debate with the previous generation. On one side you have a custom, hand-made, personal approach to design and on the other you have a more uniform, systematic and functional perspective. From Realism Vs. Modernism to New Wave Vs. Swiss Design, the design debate pendulum swings from generation to generation.

We, in the UI design world, did for a moment have our very own …

Cafe in Istanbul 1905
Cafe in Istanbul 1905

Designing in context with a peace pipe

Methods to break down the design process and remove mysticism of creativity

The cornerstone of any empire is a monument that lays the foundation of what that empire represented. The Roman Empire had the Colosseum, the Greeks the Acropolis, and the Egyptians the Pyramids. To be a real empire, you need a building that awes visitors to your capital city.

In 1550 the Sultan of the Ottoman empire, Kanunî Sultan Süleyman, wanted a building that could rival with the empires of old. He saw himself as a “Second Solomon” and …

Photocomposition in action
Photocomposition in action

How to become a designer

A list of methods to break down the design process

Every so often a non-designer will ask me “How can I learn to design?”. This seems to imply that design is a checkbox that you can tick, on a checklist of things.

I think the reason for this confusion is in part due to the aesthetics being very prominent. The aesthetics appear superficial and, thus, give the illusion that ‘design’ is something you slap on at the end.

“All industrial designers work within constraints, this is not fine art” — …
Photo by Kelly Sikkema on Unsplash
Photo by Kelly Sikkema on Unsplash

Beating your imposter syndrome

How we can solve our creative block and improve the way we judge our work

How do we know that we’re good designers or creatives? This is a question we often time ask ourselves. The imposter in us seems to show its ugly head every time we come to a blank canvas to start a new project.

Aforementioned in turn causes -insert skill- block — that condition where we can’t focus on the task at hand because we are too busy dealing with our inner demons telling us that we are fake and phony.

We compare ourselves to others in our …

Photo by Kelly Sikkema on Unsplash
Photo by Kelly Sikkema on Unsplash

Preserving Design’s past

So the queen is dead, long live the queen.

So this is it then. The era of Flash is officially over. When my teammates and I first heard the announcement, we collectively cried a tear and reminisced about the good old days.

Long gone are the times when we would wait 10 hours for an intro to load. Gone are the whizzing sounds of our computers fans because they are about to choke. Bye bye to the era of designing and developing for an audience of one.

The article I wrote previously now seems …

Photo by Kelly Sikkema on Unsplash
Photo by Kelly Sikkema on Unsplash

Learning to be a creative coder

Coming to terms with the fact that coding is a creative medium

The arts have lived on the streets amongst the communities of the underprivileged fighting out against control, a response to political suffocation. Often depicted as sub-cultures, these movements of the Punk era in London were a rejection of the modernist Swiss Style of the 1940s and 1950s.

In the late 70s we saw a typographic explosion on the New York train lines in the form of graffiti, which took words and turned them into graphics. Both of …

https://unsplash.com/@bamagal, Creative Commons
https://unsplash.com/@bamagal, Creative Commons

I want to design again…

How design tools distort what should be obvious

I miss the design app Flash. It was the perfect design tool for digital designers. It visualised code concepts like using ‘movieclips’ like variables and the ‘stage’ like a UI canvas. This made the logic of programming accessible to visual makers who didn’t have a computer science background.

It was also excellent for getting teams to work together. When the sunsetting of Flash began, a lot of us fought against the tide, because we believed the …

Picture-Domenico Zampieri, Public Domain
Picture-Domenico Zampieri, Public Domain

Developers need to design

Our industry has spent the best part of 17 years trying to convince designers they need to code.

Last week, I heard a developer refer to someone on my team as a “unicorn”. This term has come to mean someone who can do multiple things, like a developer who can design. I don’t like this term. It implies that someone with dual abilities is a rare mythical creature.

For the best part of 17 years in the industry, I have witnessed the debate/polemic that designers should code. I feel they should; it’s just a matter of how much. Designers should …

Nature or nurture? Photo-Trang Ta, unsplash.com
Nature or nurture? Photo-Trang Ta, unsplash.com

Design nature and developer nurture

Does our upbringing make us who we are or are we born with magical talents

Imagine you’re Ada Lovelace. Your father is one of the most creative romantic poets of his generation and held up in high esteem by people from around the world. His work is an inspiration to revolutionaries across Europe, moving them emotionally with the flick of his quill.

Your mother is accomplished in multiple fields including science and philosophy and committed to social causes such as prison reform and the abolition of slavery. Her …

Faster horse or too much image? Miles Storey, Unsplash
Faster horse or too much image? Miles Storey, Unsplash

Designing below the fold

How language can affect the way and the things we design

This quote is often attributed to Henry Ford: “If I had asked people what they wanted, they would have said faster horses”. Even though there is no evidence to prove Ford actually said this, the quote has become a mantra in some design circles to mean:

Don’t ask the users what they think, and if they articulate what they want, simply ignore them.

I find these ideas quite painful as they assume that designers have some innate knowledge of …

Image by Jason Taellious
Image by Jason Taellious

Finding the spot where art and science meet

Where both creativity and logic can coexist and enhance one another.

Whenever I think the UX world is over regulating the creative process, the story of Jonas Salk, the inventor of the first polio vaccine, reminds me that there’s always hope and a way to find that creative spark.

Notes

This article is for a new youtube series called “Designer Vs Developer”, which you can see here on our Youtube Chrome Channel. You can also listen to a longer version of the conversation by downloading or …
Image by Joanna Kosinska, on unsplash.
Image by Joanna Kosinska, on unsplash.

Just make it look pretty…

The assumption that designers and developers sole role is to either make things look pretty

I was super excited. It was my first day of my brand new job. I had just finished university and was raring to go. I had made it. I could finally call myself a “Designer”. That glorious emotion was short lived though, when my manager approached me and said that my job was to “just make it look pretty…”.

Notes

This article is for a new youtube series called “Designer Vs Developer”, which you can see here on our Youtube Chrome …