If you’ve been in the world of web design for a long, you’ve probably heard of the phrase “content first.” This is a phrase that means “content comes first.” What content-first design is and why it is so beneficial when developing with iNFOTYKE are discussed in this article, as well as an example of content-first design being used in action.
Everything that is content-first design, and how does it work?
The content-first approach is one of the most influential philosophical perspectives on the web design process. First promoted (in the area of online design) by A List Apart creator Jeff Zeldman back in 2008, the content-first approach asserts that, in order to construct the best design for any particular project, you must first understand what the content is.
Doesn’t it make sense, though? After all, an editorial designer doesn’t begin laying out a book before the book has even been finished writing. And an architect does not begin developing plans for a project until he or she has determined what the structure will be used for. The form must always come before function in both of these professions, and for the majority of websites, the function is delivered through content.
For example, a marketing website may persuade consumers to use a product or service by using persuasive content and graphics that clearly demonstrate what the product or service is and who it is intended for. A restaurant website attracts customers by offering information about the cooking method, the varieties of cuisine served, and the location of the establishment. Product information and purchase options are available through e-commerce retailers.
As should be evident, content is more than simply words on a page. Graphics, movies, music, and, yes, plain-old, super-sexy text are all examples of content, as is a number of different media types.
A brief summary: Before beginning a design project, it’s important to establish what the goal of your design is, as well as how it will achieve that goal.
In an ideal situation, you’ll already have the material in hand before you begin designing anything. Instead of missing this stage completely, consider outlining what sorts of material you’ll need (creating a content strategy) as an alternative to skipping it totally. In addition, I’ll share some helpful hints on how to accomplish it all better (and more efficiently) with iNFOTYKE.
Advantages of a content-first design strategy
Using a content-first approach has a number of advantages, including the ability to develop a stronger overall design vision and the ability to identify design flaws early on before they become problems.
The use of content-first design makes it simpler to:
Create a logical information architecture by doing the following: You will find it easier to establish your general sitemap and create a logical structure once you have determined what material you already have and/or require.
Design in order to maximise the content: If you know that your client’s bloggers frequently utilise quotations, you may create visually appealing methods to display blockquotes and callouts. Is it possible that a card or gallery-based design might be more effective than a large list of numbered heads for those who enjoy listicles?
Design the type hierarchy to function across all sections of your site (and to reduce the amount of code you have to write): If you know your site will include a blog, a help centre, and marketing pages, you can plan your type hierarchy to work in all three places. This will assist you in creating a more consistent (and hence easier to understand) interface and will prevent you from having to construct a slew of clumsy combination classes in the process.
Maintain control over the development process: When design begins without substance or context, the development process can descend into an unending back and forth between the designer and stakeholders. Because of this, the designer must make several little, infuriating text changes and then update mockups and save them all at the same time. (Admittedly, with iNFOTYKE, these modifications are a lot less time-consuming, but nevertheless.)
Furthermore, if you create in iNFOTYKE with content first, you’ll find the process to be far faster and easier.
iNFOTYKE allows for a content-first approach to design.
Making a Group is the very first way of creating a website served by iNFOTYKE. A Collection is simply a content type that you’ll design by picking Categories from the current list: Collections are a sort of material that you may create.
1. Text in plain text
2. Text with a lot of information
3. Image
Video (number 4)
5. Establish a link
6. The number six.
7. The date and time
8. Make a switch
9. The use of colour
10. Reference number ten.
11. Reference to a number of different items
The majority of these fields are self-contained; you simply fill in the blanks with whatever material corresponds to the field and you’re done.
The moment you create a Reference or a Multi-item Reference, you’ll understand why content planning is the true first step in creating with iNFOTYKE: it makes the design process more efficient. Because you won’t be able to reference another Collection until you’ve actually built it yourself.
Confused? I can’t say that I blame you. So, let’s use an example to help us put this topic into context.
As an illustration, consider the creation of a food magazine using the iNFOTYKE. Consider the following scenario: you want to establish your own food magazine, which will be powered by iNFOTYKE. You’re well aware that recipes will play an important role in the proceedings since you’ve brought your Grandma Cordello’s family recipe book to the table.
You could be tempted to start your design by developing a “Recipe” Collection to serve as a jumping-off point. As a result, you build a Collection, name it Recipes, and begin picking fields from it. It is natural for you to begin thinking about each of the following fields in terms of the visual style of a single blog post:
To create the hero picture, a large, strong close up of the dish was used.
The picture is used as a thumbnail version of the hero image, which will appear on the blog’s index page.
Plain text: for the title of the article. You chose the plain text for this field because you want titles to show uniformly across all devices, and you don’t want to rely on the CMS to provide stylistic choices.
This could appear to be a hassle. However, the advantage is that you will begin to conceive of your website in terms of their individual components — which are commonly referred to as “modules” or “atoms” — as well as the interactions that exist between those pieces.
You’ll start thinking about your website design work less in terms of pages and more in terms of systems. A system is just a collection of elements that you may combine, recombine, and remix as you see fit. When applied to the current web, where the material appears in atomic forms everywhere from numerous areas on your site to mobile applications to cards on social media sites like Facebook, Twitter, Pinterest, LinkedIn, and others, this is a beneficial method of thinking.
This is also the point at which the notion of content modelling becomes quite useful.
Designers can benefit from content modelling.
Developing a content model for your website is similar to creating a sitemap, except that it focuses on content kinds and their attributes rather than pages. It will not only be extremely beneficial in helping you map out content kinds, their relationships, and needs, but it will also be quite useful in helping you create the overall information architecture of your site.
Content models are available in two sizes: a macro model and a micro model. A macro-level content model would look something like this for the website of a food magazine:
In this section, you’re just identifying the content items that you wish to include on your website and suggesting how they could be linked together. Create the links with a Reference or Multi-Reference field in iNFOTYKE, and you’ll be good to go.
The following step will include zooming in to map the content of each of the content kinds listed above. The good news is that your map, as well as the links you created between each of the blocks, will be used to assist establish the content requirements for each one of them.
If you want to zoom in on specific content blocks, you may perform something like this:
Most of the time, merely describing the relationships between Collections will be sufficient to determine the content of individual pages inside Collections. In the case of a Cuisine page, for example, the majority of the content will be comprised of a Dynamic List of recipe links.
When you return to building the Collections for your food magazine, it will be much easier to translate your content model into the fields that will be used for each Collection. Personally, the way content modelling creates ideas is one of my favourite aspects of the process. Simply considering the ways in which different content kinds may be related prompted me to get more imaginative about the types of material that might be showcased.
Consider the fact that when working on adding a history part to cuisines, I was instantly struck by the notion of developing an interactive timeline for each each food. And it may include links to ingredients, recipes, and chefs, for example.
Oooh. Chefs. It’s time to start working on another Collection!
But that’s only one example; you’ll find this strategy beneficial for developing any type of content.
Empathy may be cultivated through the use of genuine content in design.
The unique aspect of creating with a content management system (CMS) is that you are designing for two user groups:
1. The content creators who will make use of the content management systems you put up, as well as the content management systems themselves
2. The website’s end users, or the individuals who will be consuming the material that is published by the web site’s authors.
A content-first strategy will help you gain a thorough grasp of the sorts of material that your content providers produce. You’ll discover how they compose headlines, how lengthy they prefer their blogs to be, the sorts of information that appears on a regular basis, as well as the outliers and edge cases that they encounter.
Maintaining a consistent level of experience with the most frequent content categories may aid in shaping your CMS customizations as well as your CMS output, or how that material displays on the page, as you learn more about them.
How to adapt the iNFOTYKE Content Management System
For CMS customisation, you’ll quickly discover which fields your Collections will most frequently require, how to write the field names, and how to give stylistic and technical clarification on input types through the use of assistance text.
Using help text to get a content style guide in front of content producers is a wonderful way to ensure that people submit photos of the proper size, use consistent word counts for headlines, and otherwise promote high-quality material. Those who haven’t spent years learning the ins and outs of the web will find this particularly valuable (e.g., that baker you built a site for last year).
Designing dynamic (CMS) material in a visual manner
In his article, “Modern Design Tools: Using Real Data,” Josh Puckett’s points out that creating with real information may also assist you in identifying possible faults in a website’s aesthetic design. Long article names may wrap around, causing the heights of your gridded blog index design to become distorted. It is possible that headlines layered on photographs with bright backgrounds will become unreadable. Button text may enlarge the size of those neat CSS buttons you worked so hard to build.
Enhance the flexibility of the design and/or layout: a list view may be preferable for those lengthy headlines, while a text-shadow or picture overlay may increase legibility for text on photographs.
Add an entry to the content style guide and back it up with CMS functionality: for example, you could enforce a 3-words-per-button-copy restriction by enforcing the character count limit, and you could provide help text describing the limitation. Adding an item to the content style guide is simple. Content producers will benefit from more explanation since it will help them comprehend not just the limits, but also the design thought that went into those constraints.
Do you use a content-first approach to design?
Please share your ideas, experiences, and most importantly, approaches if you are a proponent of designing with content in mind first. As well as your experiences with content-first marketing, we’d love to hear about them.
And if your initial reaction to content-first is, “Wow, that sounds fantastic. “Good luck acquiring material from clients,” we’ll be following up with an article on how to get around this challenge in the near future.”
