7 steps of web design process

A simplified step guide by Lukas Rudrof

Luka Rudrof is an experienced product designer based in Nuremberg, Germany with a passion for user interfaces and web design. His planning for a new project is quite similar to the one I carry out in my day to day and we both agree that great design is actually about having a website creation process that aligns with an overarching strategy.

01_Goal identification

The initial stage is all about understanding how you can help your client.

Who is the site for?

What do the expect to find or do there?

Does the website need to convey a brand’s core message or is it part of a wider branding strategy?

What competitor sites are there?

02_Scope definition

A chart which details a realistic timeline for the project, including any major landmarks, can help to set boundaries and achievable deadlines.

Provides an invaluable reference for designer and client

Helps keeping focus

Helps to negotiate when the project expand or evolve

03_Sitemap/wireframe

It helps give web designers a clear idea of the website’s information architecture and explains the relationships between the various pages and content elements. Possible tools:

Pencil & paper (the basics :)

Axure

Webflow

Sketch

Adobe XD

04_Content creation

Content serves two essential purposes:

Engagement and action
Content engages readers and drives them to take action. By breaking large test blocks up into short paragraphs supported by visuals can help to keep a light, engaging feel

SEO
Content also boots a site’s visibility for search engines. Content that’s well-written, informative, and keyword-rich is more easily picked up by search engines, all of which helps to make the site easier to find.

05_Visual elements

This phase will often be shaped by existing branding elements, color choices, and logos, as stipulated by the client.

But the designer can shape a lot in this phase too. Important for this stage:

High-quality images/graphics

Moodboards, style tiles, element collages

Visual style guides

06_Testing

Once the site has all its visuals and content, It is ready for testing. Important here is:

Does the website display correct on all devices and browsers?

Are all links working?

Proper meta tittles and descriptions?

Loading performance of the website?

07_Launch

When everything has been thoroughly tested, It’s time to launch.

Some elements maybe still need fixing. Web design is a fluid and ongoing process that requires constant maintenance. This includes:

User testing

New content or features

Monitoring analytics

You can take a look at Luka Rudrof’s portfolio here

--

--

--

Digital product designer based in Madrid. I like fun projects and working with people who feel passion for what they do. www.cayetanogros.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Inspiring quotes in UX to give you the hope you’ve been looking for

Communication Studio — Project 2 Navigating Information

Download In %PDF The Complete Guide to Blender Graphics: Computer Modeling & Animation, Fourth…

Influence & Interactive Design — Review

300 Sales — New Milestone achieved in Geeks UI kit

Food Delivery Service App: From Invision to Adobe XD

Case study: Improving user’s grocery shopping experience

Face-Off Design: UX/UI Patterns And Branding

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Cayetano Gros

Cayetano Gros

Digital product designer based in Madrid. I like fun projects and working with people who feel passion for what they do. www.cayetanogros.com

More from Medium

UI/UX for re-setting the password

Enter your user ID

‘Design is Everything and Everything is Design’

Design Tips in Less Than 3 Min — Give your job away…

Thoughts on Product Design: Safari