Journal
Webdesign

My web design process: How do I create successful websites for my clients?

Self-Portrait
by Andreas Kuhnen
Published:
April 11, 2022

I’ve been working as a freelance designer for about five years now, but I’ve also learned a lot during my time as a staff UX/UI designer in agencies about the importance of an effective, efficient and field-tested process to complete a (web design) project on time and in the optimal quality. In this article I would like to not only share my experiences, but also give you insights into my personal design process. My experiences and failures in the past have helped me a lot to develop a process that works very well for me and my clients. However, I am still learning with each new project. Every project is different – and new requirements often make it necessary to flexibly adapt my process and also to develop and improve it with each project.

What happens before the project starts?

1. Getting to know each other & a “Discovery Session”

If potential clients are interested in working with me, we get to know each other in an initial call. If there is then a basic interest for a collaboration, we talk about current pain points, concrete goals, how success for the project would look like as well as its budget. It is very important to me not to “sell”, but to seriously find out if and how I can create real value with my services and skills. If I am not the right person for the project, I can recommend other experts from my network if desired.

My approach before starting a new project. © Andreas Kuhnen

2. Optional: review & quick-wins for current project/website

Even though I attach great importance to efficiency and speed in my work, I am not interested in a rushed and “cost-optimized“ website development process. For me, it is important to create the greatest possible value through the best possible work.

I understand that a new web presence for a company can be a major investment for the future. Of course, it is natural to aim to minimize the risk of this investment as much as possible. From my own experience I know that especially in the field of web design there are a lot of service providers on the market – offering their services for a wide range of prices – but their quality is sometimes very difficult to assess for people who are not experts in the field. If you are interested in what to look for in a web design proposal, you can find helpful info about it in this article.

Depending on the project budget, I can of course scale my design services to specific needs. In order to give potential clients the chance to get an idea of my work in advance, I offer under certain conditions smaller preliminary projects: For example the implementation of small optimizations & improvements or an exemplary redesign of the main stage of a website.

3. Proposal and estimation of costs

Once goals and expectations as well as project and service scope have been discussed in detail, the price for a project can also be estimated relatively precisely. Only when all open questions have been clarified and the scope as well as the costs of the project have been discussed in detail, I will create a concrete proposal. The proposal will include my services, as well as important project milestones including their exact deadlines.

How does the collaboration with me look like during a project?

It is important to me to work as transparently as possible and to keep lines of communication short. If necessary, I set up a Slack channel and I can be reached via e-mail at any time. Especially in the initial phase of a project, it makes sense to schedule about one to a maximum of two hours per week to coordinate work statuses via video conference. Later during the project, coordination is scheduled only when necessary. I am aware that time is an extremely valuable resource and I demand only as much as necessary from my clients during our collaboration. Of course, additional meetings can be scheduled at any time if desired.

1. Strategy & information architecture

Based on the goals already discussed in the “discovery session”, the strategic direction of the website and its contents is (further) developed. A Desk research and competitor analysis will also be carried out. An initial information architecture will set the stage for all upcoming steps.

Website sitemap example. © Andreas Kuhnen

2. Brand-driven design & design draft

I like to work with clients who are aware of how high-quality design can effectively and sustainably communicate their own brand messages. Ideally, certain values for which a company or brand stands have already been defined. If necessary, I define suitable brand values together with my clients or further develop the existing ones. I then translate these brand values into a unique design language that builds on the existing corporate design. A design language includes the use of colors, typography, shapes, icons & illustrations, visual language, tonality of UX & copywriting and even animations & interactions – in short, everything that holistically constitutes a “user experience”. An individual design language offers the chance to spark emotions in addition to optimized usability. It will establish a digital experience that inspires visitors, remains in their memory for a long time and may turn them into convinced customers.

“An individual design language offers the chance to spark emotions in addition to optimized usability. It will establish a digital experience that inspires visitors, remains in their memory for a long time and may turn them into convinced customers.”

The design language is applied to a specific page as an example, for instance the homepage. The special thing about this approach: Whether a design is more conventional or innovative is not decided by me as a designer, but is constituted by the brands core values and communication goals. Design decisions become not a matter of taste, but of purpose.

3. Concept

As soon as the design language is defined, further subpages of the website are conceived in the form of wireframes. Here I already work with real texts if possible, in order to define the visual design requirements as precisely as possible later on. Wireframes do not include design elements such as colors or images, in order to pragmatically and effectively lay the foundation for the later visual elaboration based on the content.

4. Visual design

In this step I create the production-ready design for all subpages of a website in Figma based on the wireframes. Here, all visual and aesthetic aspects of a website, such as images, illustrations or, if necessary, animations are fleshed out in detail.

5. Content production: visuals, photography, illustrations & animations.

Depending on the brand for which I am creating a website, it may happen that image material has to be created or acquired first. If desired, I support my clients in creating high-quality material. Depending on the project budget, either stock material is used or other freelancers such as illustrators or photographers (from my network) can be commissioned.

6. UX & copywriting

Also very important, but often neglected success factors of web design are UX & copywriting. Often mentioned at the same time, both terms mean different things:

UX writing supports the usability and pays off in a positive user experience. It helps to make content on a website clear, intuitively understandable and accessible and is thus indispensable, especially when it comes to conversion optimization. UX writing is more about functional elements of a website.

Copywriting is about writing compelling and powerful marketing copy that not only features a tone of voice that matches the brand, but also includes important keywords and is optimized for search engines.

I help my clients find suitable experts to write the copy for their new website or, if contacts already exist, prepare a good brief based on the brand and design direction.

7. Webflow development

As soon as the design of a website is agreed on and approved, the development in Webflow begins. This is a special milestone for my clients as well as for myself, because the project slowly takes its final shape and relatively soon you can experience for the first time how the website will actually look and feel. Usually I first set up the Content Management System (CMS) if needed, then I build the front-end and finally I optimize the layouts for all breakpoints. In doing so, I make sure that the website complies with all current accessibility standards and is already optimized for search engines as much as possible, respectively follows current best practices.

8. Webflow training & editorial content creation

Optionally, I offer Webflow training to familiarize my clients with the backend. This is especially helpful if the CMS functionality of Webflow is needed. Once the site is sufficiently developed, all dynamic content can be added. This could be blog articles or different team members of a team page. If required, I am of course happy to support my clients during this step.

9. Testing, bug fixing & third-party services

Once the website has been developed and all content has been added, all subpages are being tested on different browsers and devices to identify possible bugs and display errors and fix them before launch. If third-party services have to be implemented, for example a cookie or visitor behavior analysis solution, this will also be implemented at this stage.

10. Launch of the website 🚀

With the punctual launch of the website, the project is initially completed. If desired, I will guarantee that the site will continue to function properly for up to three months after launch. Usually Webflow is absolutely low-maintenance and it is nearly certain that a website can be operated in the long term without any maintenance & errors. Shortly after the launch, however, minor errors may occur or be noticed, which I then gladly solve at short notice and unbureaucratically.

What happens after the project is completed?

If my customers are happy with the result and don’t need any further services from me, I’m naturally very happy. However, some of my customers are also interested in successively developing their internet presence after the launch. This can be in the form of new content like modules or additional subpages or certain CMS functions that extend the site with dynamic content like a blog or a press or downloads section. In addition, a website can of course also be continuously optimized under real conditions with real feedback from its visitors.

1. Optional: strategy and planning of further development

Together, a roadmap is defined and a ticket board including time estimates and prioritizations is set up. Of course, this board can be continuously coordinated, updated and expanded.

2. Further development of the website

The predefined tickets are processed successively according to prioritization. New content of a website can be, for example, dynamic content such as a blog or the expansion or improvement of the existing range of services or new landing or campaign pages.

Did you notice that something important or certain information is missing? My process is certainly not perfect and I am continuously developing it under real-life conditions. Feel free to follow me on Instagram, LinkedIn, or Dribbble – I look forward to having a constructive conversation with you. 🤙

Self-Portrait

I’m glad if you’ve read my article up to this point. If these insights were helpful to you, feel free to share this post within your network. If you have any specific questions or comments, I look forward to hearing from you.

Share this article

Journal
Webdesign

Mein Webdesign Prozess: Wie erstelle ich erfolgreiche Webseiten für meine Kund*innen?

Self-Portrait
von Andreas Kuhnen
Veröffentlicht:
April 11, 2022

Ich arbeite seit rund fünf Jahren als selbstständiger Designer, aber ich habe auch in meiner Zeit als festangestellter UX/UI Designer in Agenturen sehr viel darüber gelernt, wie wichtig ein effektiver, effizienter und praxiserprobter Prozess ist, um ein (Webdesign-)Projekt fristgerecht und in der optimalen Qualität fertigzustellen. In diesem Artikel möchte ich nicht nur meine Erfahrungen teilen, sondern Dir auch Einblicke in meinen individuellen Designprozess geben. Meine Erfahrungen und auch Fehlschläge in der Vergangenheit haben mir sehr dabei geholfen, einen Prozess zu entwickeln, der für mich und meine Kund*innen inzwischen sehr gut funktioniert. Dennoch lerne ich natürlich bei jedem neuen Projekt dazu. Jedes Projekt ist anders – und neue Anforderungen machen es häufig notwendig, meinen Prozess flexibel anzupassen und ihn auch mit jedem Projekt weiterzuentwickeln und zu verbessern.

Was passiert vor dem Projektstart?

1. Kennenlernen & „Discovery Session“

Falls potenzielle Kundinnen oder Kunden an einer Zusammenarbeit mit mir interessiert sind, lernen wir uns in einem ersten lockeren Gespräch gegenseitig kennen. Wenn dann grundsätzliches Interesse für eine Zusammenarbeit besteht, sprechen wir über aktuelle „Pain Points”, konkrete Ziele, wie Erfolg für das Projekt aussieht, sowie über das Budget. Mir ist es grundsätzlich sehr wichtig, nicht zu „verkaufen“, sondern ernsthaft herauszufinden, ob und wie ich mit meinen Leistungen und Skills echte Mehrwerte schaffen kann. Falls ich nicht der Richtige für das Projekt sein sollte, kann ich auf Wunsch andere Expertinnen oder Experten aus meinem Netzwerk weiterempfehlen.

Meine Vorgehensweise vor Beginn eines neuen Projekts. © Andreas Kuhnen

2. Optional: Review & Quick-Wins für aktuelles Projekt/Webseite

Auch wenn ich auf Effizienz und Geschwindigkeit bei meiner Arbeit großen Wert lege, ich bin nicht an einer überhasteten und möglichst „kostenoptimierten“ Webseiten-Entwicklung interessiert. Für mich ist es wichtig, mit der bestmöglichen Arbeit auch den größtmöglichen Mehrwert zu schaffen.

Ich verstehe, dass eine neue Internetpräsenz für ein Unternehmen eine größere Investition in die Zukunft sein kann. Natürlich ist es naheliegend, das Risiko dieser Investition möglichst weit minimieren zu wollen. Aus eigener Erfahrung weiß ich, dass es gerade im Bereich Webdesign sehr viele Angebote auf dem Markt gibt – für die unterschiedlichsten Preise – deren Qualität für Fachfremde teilweise allerdings sehr schwer einzuschätzen ist. Falls Du Dich dafür interessierst, worauf du bei einem Webdesign Angebot achten solltest, findest du in diesem Artikel von mir hilfreiche Infos dazu.

Damit meine Kundinnen und Kunden sich von meinen Leistungen und meiner Arbeit vorab zu überzeugen können, biete ich neben der Skalierung meiner Design-Leistungen unter bestimmten Voraussetzungen auch kleinere Vorab-Projekte an, um beispielsweise kleine Optimierungen & Verbesserungen oder ein beispielhaftes Redesign der Hauptbühne einer Webseite umzusetzen.

3. Angebot

Sobald Ziele und Erwartungen sowie Projekt- und Leistungsumfang genau besprochen sind, lässt sich auch der Preis für ein Projekt relativ gut einschätzen. Erst wenn sämtliche offenen Fragen vorab geklärt sind und der Umfang sowie die Kosten des Projekts genau besprochen wurden, erstelle ich ein konkretes Angebot. Darin sind dann meine Leistungen, sowohl als auch wichtige Projekt-Meilensteine inklusive deren genaue Fristen enthalten.

Wie Läuft die Zusammenarbeit mit mir während einem Projekt ab?

Mir ist es wichtig, möglichst transparent zu arbeiten und Kommunikationswege kurz zu halten. Bei Bedarf richte ich einen Slack-Channel ein und ich bin jederzeit per E-Mail erreichbar. Gerade in der Anfangsphase eines Projekts ist es sinnvoll, etwa eine bis maximal zwei Stunden pro Woche Zeit für die Abstimmung von Arbeitsständen per Video-Konferenz einzuplanen. Im späteren Verlauf des Projekts werden Abstimmungen nur noch bei Bedarf geplant. Ich bin mir bewusst, dass Zeit eine äußerst wertvolle Ressource ist und beanspruche sie während der Zusammenarbeit mit meinen Kundinnen und Kunden nur so viel wie nötig. Auf Wunsch lassen sich natürlich jederzeit weitere zusätzliche Abstimmungen planen.

1. Strategie & Informationsarchitektur

Auf Basis der bereits in der „Discovery Session“ besprochenen Ziele wird die strategische Ausrichtung der Webseite (weiter)entwickelt. Anhand eines Desk Researchs werden Mitbewerberinnen und Mitbewerber analysiert. Mit einer initialen Informationsarchitektur werden dann die Voraussetzungen für sämtliche folgenden Arbeitsschritte geschaffen.

Sitemap Beispiel. © Andreas Kuhnen

2. Brand-Driven Design & Design Draft

Ich arbeite gerne mit Kundinnen und Kunden zusammen, die sich darüber bewusst sind, wie hochwertiges Design effektiv und nachhaltig eigene Markenbotschaften kommunizieren kann. Idealerweise sind bereits bestimmte Werte definiert, für die ein Unternehmen, beziehungsweise eine Marke steht. Bei Bedarf definiere ich gemeinsam mit meinen Kundinnen und Kunden passende Markenwerte oder entwickle die bestehenden weiter. Diese Markenwerte werden dann von mir in eine Designsprache überführt, die auf dem bereits vorhandenen Corporate Design aufbaut. Zu einer Designsprache gehören der Umgang mit Farben, Typografie, Formen, Icons & Illustrationen, Bildsprache, Tonalität des UX & Copywritings und sogar Animationen & Interaktionen – kurzgesagt alles, was ganzheitlich betrachtet eine „User Experience“ ausmacht. Eine individuelle Designsprache bietet die Chance, neben einer optimierten Usability Emotionen zu wecken und ein digitales Erlebnis zu schaffen, das Besucher*innen begeistert, nachhaltig in Erinnerung bleibt und das Potenzial birgt, sie in überzeugte Kund*innen zu verwandeln.

„Eine individuelle Designsprache bietet die Chance, neben einer optimierten Usability Emotionen zu wecken und ein digitales Erlebnis zu schaffen, das Besucher*innen begeistert, nachhaltig in Erinnerung bleibt und das Potenzial birgt, sie in überzeugte Kund*innen zu verwandeln.“

Die Designsprache wird konkret anhand einer Seite, zum Beispiel der Homepage angewendet und abgestimmt. Das besondere an dieser Vorgehensweise: Ob ein Design später eher konventionell oder innovativ und neuartig ist, entscheide nicht ich als Designer, sondern dies wird aus der Marke, ihren Werten und Kommunikationszielen heraus begründet. Designentscheidungen sind also keine Geschmacksfrage, sondern erfüllen jeweils einen bestimmten Zweck.

3. Konzeption

Sobald die Designsprache definiert ist, werden weitere Unterseiten der Webseite in Form von Wireframes konzipiert. Hierbei arbeite ich bereits falls möglich mit realen Texten, um die Anforderungen an das visuelle Design später so genau wie möglich zu definieren. Wireframes beinhalten keine Gestaltungselemente wie Farben oder Bilder, um pragmatisch und effektiv auf inhaltlicher Basis das Fundament für die spätere visuelle Ausarbeitung zu legen.

4. Visuelles Design

In diesem Arbeitsschritt erstelle ich auf Basis der Wireframes das produktionsfertige Design für sämtliche Unterseiten einer Webseite in Figma. Hierbei werden sämtliche visuelle und ästhetischen Aspekte einer Webseite wie Bilder, Illustrationen oder ggf. auch Animationen im Detail ausgearbeitet.

5. Produktion von Inhalten: Bildmaterial, Fotografie & Illustrationen, Animationen

Je nach Unternehmen, für das ich eine Webseite erstelle, kommt es vor, dass Bildmaterial zunächst noch erstellt oder erworben werden muss. Ich unterstütze meine Kundinnen und Kunden auf Wunsch dabei, hochwertiges Material zu erstellen. Passend zum Projektbudget wird entweder Stock-Material verwendet oder es werden andere Freiberufler*innen wie Illustrator*innen oder Fotograf*innen (aus meinem Netzwerk) beauftragt.

6. UX & Copywriting

Ebenfalls sehr wichtige, aber häufig vernachlässigte Erfolgsfaktoren von Webdesign sind UX & Copywriting. Häufig in einem Atemzug genannt, meinen beide Begriffe unterschiedliche Dinge:

UX-Writing unterstützt die User-Experience und zahlt auf ein positives Nutzererlebnis ein. Es hilft dabei, Inhalte einer Webseite klar, intuitiv verständlich und zugänglich zu machen und ist damit insbesondere dann, wenn es um Conversion-Optimierung geht, unverzichtbar. UX-Writing betrifft eher funktionale Inhalte einer Webseite.

Bei Copywriting geht es um das Schreiben fesselnder und überzeugender Marketingtexte, die sich nicht nur durch eine zur Marke passende Tonalität auszeichnen, sondern auch wichtige Keywords enthalten und für Suchmaschinen optimiert sind.

Ich unterstütze meine Kunden dabei, passende Expertinnen und Experten für die Erstellung der Texte ihrer neuen Webseite zu finden oder, falls bereits Kontakte bestehen, ein gutes Briefing auf Basis der Marken- und Designausrichtung vorzubereiten.

7. Webflow Entwicklung

Sobald das Design einer Webseite abgestimmt und freigegeben ist, startet die Entwicklung in Webflow. Dies ist sowohl für mich, als auch für meine Kundinnen und Kunden ein besonderer Meilenstein, da das Projekt hierbei langsam seine finale Form annimmt und schon relativ bald zum ersten mal erfahren werden kann, wie sich die spätere Webseite genau „anfühlen“ wird. In der Regel setze ich zunächst das Content-Management-System (CMS) auf, sofern benötigt. Danach baue ich das Front-End auf und schließlich optimiere ich die Layouts für sämtliche Breakpoints. Dabei achte ich darauf, dass die Webseite allen gängigen Accessibility-Standards entspricht und bereits möglichst gut für Suchmaschinen optimiert ist, beziehungsweise den gängigen Best Practices folgt.

8. Webflow Schulung & Einpflegen redaktioneller Inhalte

Optional biete ich eine Webflow Schulung an, um meine Kundinnen und Kunden mit dem Backend vertraut zu machen. Das ist insbesondere dann hilfreich, falls die CMS Funktionalität von Webflow benötigt wird. Sobald die Seite ausreichend weit entwickelt wurde, können dann nämlich sämtliche dynamische Inhalte eingepflegt werden. Das können beispielsweise Blog-Artikel oder unterschiedliche Team-Mitglieder einer Team-Seite sein. Bei Bedarf unterstütze ich meine Kundinnen oder Kunden natürlich gerne bei diesem Arbeitsschritt.

9. Testen, Fehlerbehebung & Dienste von Drittanbietern

Sobald die Webseite fertig entwickelt ist und sämtliche Inhalte eingepflegt wurden, werden alle Unterseiten auf unterschiedlichen Browsern und Devices getestet, um mögliche Darstellungsfehler zu identifizieren und noch vor dem Launch zu beheben. Falls Dienste von Drittanbietern implementiert werden sollen, zum Beispiel eine Cookie- oder Lösung zur Analyse von Besucherverhalten, wird dies ebenfalls von mir umgesetzt.

10. Launch der Webseite 🚀

Mit dem pünktlichen Launch der Webseite ist das Projekt zunächst abgeschlossen. Auf Wunsch übernehme ich eine Gewährleistung dafür, dass die Seite bis zu drei Monate nach dem Launch einwandfrei funktioniert. In der Regel ist Webflow absolut wartungsarm und es ist mit großer Sicherheit davon auszugehen, dass eine Webseite langfristig ohne Wartung & Fehler betrieben werden kann. Kurz nach dem Launch können allerdings kleinere Fehler auftreten oder auffallen, die ich dann gerne kurzfristig und unbürokratisch löse.

Wie geht es nach dem Projektabschluss weiter?

Wenn meine Kundinnen und Kunden glücklich mit dem Ergebnis sind und keine weiteren Leistungen von mir benötigen, freut mich das natürlich sehr. Einige meiner Kundinnen und Kunden sind aber auch daran interessiert, ihre Internetpräsenz nach dem Launch sukzessive weiterzuentwickeln. Dabei kann es sich zum einen um neue Inhalte wie Module oder zusätzliche Unterseiten handeln oder aber auch und bestimmte CMS Funktionen, die die Seite um dynamische Inhalte wie einen Blog erweitern. Außerdem lässt sich eine Webseite natürlich auch unter realen Bedingungen mit echtem Feedback von Besucher*innen kontinuierlich weiter optimieren.

1. Optional: Strategie & Planung der Weiterentwicklung

Gemeinsam wird eine Roadmap festgelegt und ein Ticket-Board inklusive Aufwandsschätzungen und Priorisierungen aufgesetzt. Dies kann natürlich stetig gemeinsam abgestimmt, aktualisiert und erweitert werden.

2. Weiterentwicklung der Webseite

Die vorab definierten Tickets werden sukzessive nach Priorisierung und Rücksprache abgearbeitet. Neue Inhalte einer Webseite können zum Beispiel dynamische Inhalte wie ein Blog oder die Erweiterung oder Verbesserung des bestehenden Leistungsangebots oder neue Landing- oder Kampagnenseiten sein.

Ist Dir aufgefallen, dass in meinem Prozess noch etwas Wichtiges fehlt oder vermisst Du bestimmte Infos? Der Prozess ist sicherlich noch nicht perfekt, und ich entwickle ihn kontinuierlich unter Praxisbedingungen weiter. Folge mir gern auf Instagram, LinkedIn oder Dribbble – ich freue mich schon darauf, mich konstruktiv mit Dir auszutauschen. 🤙

Self-Portrait

Es freut mich sehr, dass Du meinen Post bis hierhin gelesen hast. Falls diese Einblicke hilfreich für Dich waren, teile den Artikel gern in Deinem Netzwerk. Falls Du konkrete Fragen oder Anmerkungen hast, freue ich mich schon auf Deine Nachricht.

Diesen Artikel teilen