Webdesign brief
Lifoxy
Karen Rombouts
karen.rombouts@innomedio.be
1. About Innomedio
Innomedio is a web agency located in Belgium. We develop web applications (including
informative websites, landing pages, e-commerce solutions, web applications, …) and provide
online marketing.
We develop several web applications a month. And depending on the project, we need web
design services on a regular basis. For this we attempt to create a network of web (and
logo/illustration) designers that understand our needs and that we can reach out to depending on
the type of project.
Since we are a web development agency, we will not need coding services. Unless specifically
requested. This brief is only for design services.
1.1 Our clients
Most of our clients are also located in Belgium, but they range in size from SME’s to multinationals
with branches in several countries.
Most of our projects will require Dutch texts, which we will provide to you with English translations
where possible/useful.
If you want more info about our services or workflow, feel free to reach out to us.
2
2. Website design brief
2.1 Name of the organization
Lifoxy
2.2 Summary of the project
Lifoxy is a distributor/importer of cosmetics and perfumes. They want to create a new website
as a digital business card. Mainly to create visibility and to and to demonstrate their mission,
vision and offer to potential customers.
2.2.1 Look & feel
The look of this new website:
• Must attract women with interests in beauty and daily care
• Show that Lifoxy is an accessible, solution-oriented company that provides customers a
feel-good-me-time moment
• Must radiate business, luxury and an international atmosphere.
2.3 Current website
https://lifoxy.be/home
2.4 Example websites
• https://www.carecosmetics.nl/
• leijtensimport.com
• https://www.beautytasting.com/
• https://milanocosmetics.it/
• https://www.boozyshop.nl/
• https://www.douglas.nl/nl
3
• https://www.orbicobeauty.com/
• https://cosmetics.nl/
• https://anviri.nl/
2.5 Description of the organization and its target audience
The client is always the central starting point and therefore it’s important that the website
focuses primary on retailers who want to distribute their brand and end-consumers.
2.6 Logo & colors
• Colors: now they use orange in their logo but they like black/white or bright pink
• Logo: they also want a new logo in the same style as the website (see logo design brief
attached)
2.7 Typography
• Any Google Font(s) – free to choose.
2.8 Number of different pages/screens
We want to start with design of navigation and homepage only. Other pages will follow later.
4
2.9 Technical guidelines
General guidelines and expectations for our website designs. These are the same for all our
projects and help us to work as efficiently as possible.
2.9.1 Deliverables
• You are free to use any of the following software:
o Sketch
o Figma
o Adobe XD
• Review/feedback gathering you can use any solution that allows us to place comments
and send a preview to our client:
o Adobe XD Design Review
o Figma Presentation View
o InvisionApp
o Zeplin Scene
o …
• Final designs:
o Will need to be exported to our Zeplin account for our web developers. We will
create a new project under our account and send you an invite.
o Source file can be sent through 99designs or by e-mail.
• Note that we do not like working with Photoshop (or PSD files), since we have bad
experience with PSD-exports to Zeplin. If you only work with Photoshop, please pass on
this project.
2.9.2 Grid
• We prefer to use a 12 column grid
• You are free to choose any gutter, as long as it’s divisible by 2. Most used are 24px, 30px
and 32px.
• The minimum container width (for desktop) is 1140px. Wider is not a problem, a fluid
container (full screen width) is also an option.
• Please stay inside the container as much as possible and align to the grid columns
wherever possible. Of course images can fall outside the container, but keep in mind that
the part outside will be hidden on smaller screens. (So please don’t place faces outside
container)
• Please make sure the grid settings are exported to Zeplin. This way we can show them
in an overlay and read the exact dimensions. More info: here
2.9.3 Mobile designs
• Unless specifically requested, we only require designs for the desktop view.
2.9.4 Fonts
• Always use Google Fonts. This has worked best for us in the past.
o If our client explicitly requests another font, we will supply it to you.
• Don’t use more than 2 different font families, unless there’s a good esthetic reason to do
so.
• Font-settings should be reused as much as possible. This means that something that
should be a H2 should have the same weight, size, etc. throughout the design so we can
reuse the settings.
2.9.5 Images & icons
• Make sure that assets (.jpg, .png, .svg, ..) are always exported to Zeplin, so our
developers can download them directly from Zeplin. How to: Sketch / Figma / Adobe XD
o Please pay extra attention to do this and check if every asset is exported. This is
the number one issue that blocks our developers’ workflow.
o For SVG’s, please group layers as much as possible, so we can use them in icon
fonts etc.
o Make sure images are exported in retina format (x2 and x3).
• When working with stock images which we don’t have the right to use, please mark them
as ‘example’ (e.g.: red text on the image). This way when they are used for testing
purposes copywriters don’t forget to replace the images.
• Keep feasibility in mind when selecting (stock) images. Our clients tend to have a lot of
difficulty in supplying proper cutout pictures for example.
6
• Reuse image dimensions as much as possible. E.g.:
o Make sure a product image in a product list has the same ratio as in a ‘featured
products’ slider, since we’ll probably reuse the product-tile template.
• Supply icons in SVG-format as much as possible.
• Make sure there is no empty space around the SVG icon in the exported file. This makes
it harder for us to use the icon in icon fonts.
2.9.6 General guidelines
• Don’t add features that require (a lot of) extra development when not explicitly stated in
the briefing document. This creates false expectations for our client. Good examples are:
o Newsletter subscription forms
o Filters for a product list
• Add breadcrumbs to every page (except the homepage). For SEO purposes.
2.9.7 Avoid as much as possible
• Too many (unnecessary) variations of what is essentially the same block. E.g:
o Hero with background-image on one page and an image next to the page title on
another page.
o A contact form on a dark background on one page and a white background on
another page.
o Navigation with colored logo and white background on one page, transparent
background and white logo on another page.
• Forms in with multiple steps (on different pages)
• Form fields without labels (where placeholders serve as a label)
• Small subtitles above bigger section titles
• Google Maps with custom styling (or the company’s logo). Our customers need a paying
Google Cloud account for this feature, and for most clients this is too much of a hassle to
set up. So use Google’s ‘embed map’ view as much as possible.
o Keep in mind that when a map requires multiple markers, we need a Google
Cloud account anyway, so custom styling is allowed.
7
• Carousels / sliders above the fold.
• Too ideal representations. E.g.: texts next to each other which happen to be the exact
same length, when we know beforehand that this will rarely be the case:
o USP’s
o Testimonials
o …
• Single texts extended over multiple columns.
