Why do Redesigns happen? Most of the time, redesigns happen because there was barely any strategy (or worse: none at all) in place yet. Like for this little blog of mine *cough*.
1. Take inventory
Think which parts of the old website you want to keep, list them in your own personal content-listing file. Keep in mind which new content has to be released, we aren’t organizing content into categories yet, just listing in a hirarchy-like style. I use sublime text/atom for this, so I can organize my items in a tabbed hirarchy.
Begin by giving each piece of content a name or title if it has none yet.
Content Ready to reuse Riot Cheatsheet A couple of articles To write Riot Tutorials Examples Loop Events Modularity Routing Processwire Content Management Resources About me Call to Action (subscribe opt-in) Featured (AKA home page): Tutorial Line in News form (ordered by date desc) Recommended Reads
Well, for this blog, there is not that much content in place (un)fortunately, so this is an easy task for me. Depending on complexity, you want to focus on the most important content first. Mostly whats already shown on the website, or if statistics/analytics are existing: which pages gets the most views, which does not always equal to important or qualitative, you could have mislead them for a while before they could find top quality content. Your personal opinion on what is important to the user is needed here too.
If you need a couple of minutes to figure out the importance of each content, don’t worry. This usually is something companies do for days and weeks, so they employ their own content strategists.
This does not always mean pages, but pieces of content depending on layout. Like the call to action (subscribe opt in) I place after every article, the about-me blurb etc. They are not one page, but they are part of it.
2. See the patterns and reorganize
Thinking about atomic design in terms of content pieces.
Now, looking on your previous collected data, see which content pieces use which kind of elements. Most of the time, you can just go with the html elements (h1,h2,h3,..) but you have to put a little more effort into that task to really get crispy clear reusable UI components.
Again, here is what it may look like. Some of these elements appear on almost every website (title, subtitle).
Content Elements Atom Text Title Subtitle Blurb/Teaser Chapter Name Number Code Preview Actual Code Explanation (Text) Image Video
We are not done there yet, we can ask a lot more about each individual part of your website to really get a clear understanding of what’s going on. We are getting into this in the next step.
3. The purpose, relation of every element and their context
Some elements on the old website of your project don’t even have a name yet. Find which parts are similar. For example: is the little preview on an article listing the same as the blurb on a cart item? Not just in terms of design but also (especially) it’s meaning. Think of the function of EVERY content element you run across.
What is a title? It is a short name of the current piece of document the user is.
What is a subtitle? It is an extension of the title to give away a bit more information.
What is a blurb? The little preview on an article/product/item to give the user enough information to get into the full article.
What is a chapter? Divides a long exhausting tutorial/article into many smaller parts that don’t necessarily get published at the same time and/or date.
What is a date? It gives the user information about when the last time something has been created and/or modified.
Even if the function of some elements seem so obvious – I know what a title is, duh! – take note of the purpose of every single little element on your website. The first 5~10 times you do this is hard work, but keep in mind that this will help you to grasp the current situation of your project. We are so focused on design, shiny transitions and other frontend tasks, that we forget about the importance of this very step.
Now, after taking inventory and thinking about the purpose of every item on your list, we’ll have a look on how to sew it all together into their respective UI parts.
Content Elements Molecules/Organisms Code Code (HTML/CSS/JS/PHP) Preview Explanation Pagination Numbered (1,2,3....18,19,20) Chaptered (previous tutorial, first, index, next tutorial) Tutorial Line Language/Tool Chapter Goal (kinda like blurb, but it is not only a description but also: in this tutorial you know how to achieve this!) Recommended Reads Title Latest Articles Title Blurb Date
Why is there no date on the recommended reads section?
Some of the most successful websites omit their date on recent content. Why? Because activity does not always mean quality and you can show that with minimalism (e.g. omit the date). So it is not always wise to display all the available information on a reference to something. To get your users to the full-length articles/products/whatever you need to think about some kind of navigation that leads them where they think they’ll find what they look for. We’ll learn about that in the next step.
4. Building the navigation
Got your list of content elements, their meaning, their context (where they belong to) and the list of the actual pieces of content ready? Good.
Most times, the homepage contains only references to other pieces of content on your website. So the entire homepage should be not more than a navigation. In some rare minimalistic cases, where there is only little content, you don’t have to create a navigation and display your content as-is.
Now you can grab your favorite layout/sketching tool to create a rough layout (not design). Which in my case, is balsamiq mockups.
You already know which content is the most important, what kind of content is declared as which element – so lets get down to business.
I came to the following conclusion: My blog consists of article/lesson only. So I have to go with a very minimalistic approach. I display a big preview of the most recent article or lesson, but users can decide to show lessons or articles only. Thats the entire navigation to find the most recent information. Navigation does not always mean a bar of items with dropdowns. If you know how to fill your homepage with referneces, but still keep it dynamic (most recent news) you can make the recent articles display part of your navigation. Keep that in mind.
2 links to an archive, which will open a list of categories for the lessons and a list of recommended articles + all other articles for the articles page.
In conclusion, what did you learn in this article?
With a clear set of content elements in mind, you know exactly what layouts fit your content.
Depending on your content and it’s importance, you can flexibly extend the layout everytime, as much or often you want without getting stuck into a organizing dilemma.
By extending your list of content elements you always have a quick overview and you can easily move around pieces of content as needed.
Stay tuned for more articles about content management and the way from loose content to an organized content management.
Are you excited about your next redesign/relaunch yet? Show your co-workers that just a little planning can already boost your productivity for redesign processes.
How do you build re-usable interactive webcomponents without wasting your precious time bending the DOM to your needs? Get my latest content about building front-end web-apps delivered directly to your inbox and get free code samples for all the components I create.
See other articles
Using noUiSlider as range slider to filter between two numbers
Do you know these fancy range sliders that can filter items with the blink of an eye? You move around a handle and get the desired results right away. In this article, you are going to learn how to implement a range slider to filter your data.
How to group together filter inputs to obtain and combine their values
When you want to filter a set of products or other lists, naturally you have to think how you could wire together the variety of filters. With this article, you will learn how you can retrieve the data and combine the values to filter your items in real-time.