🖌️The design process

To start designing websites, you only need one thing. Our Figma template. This template contains all the cards you saw in the previous section as well as further instructions and a complete example. You can view it here:

Now, it's up to you if you want to create a copy and create your template there or simply copy and paste the elements into your own file. We do require that you use the same cards provided to ensure that our developers can understand your precise requirements.

As for the process it can be broken down into a couple steps

1. Select the data

Of course, the whole first section of this was about the data and now we're talking about it again, and we will talk about it more in the section about Launchpad. Data is crucial to this process.

In this phase of the process the designer should know exactly what data they're going to put where. You can always change your mind, but it really helps to start with an idea. Normally, you would know the exact content, here we just know the fields.

It could help to lay out the data so that you can keep the ideas in mind during your design. Just a simple list for a homepage like this:

Website Element	Data Source
Hero Section	Firstname Lastname + Profile banner
Research Description	Research Description
Contact Information	Phone, email, address

You could also do this on the Figma template itself, just use the provided cards and place them next to your page. You can move them around as needed once your design begins to take shape.

Essentially, get everything organized and prepared before you sink hours in your design only to realize that there's some sections that won't work with the data

Make a preliminary design

Now, you don't need me to tell you how to complete this step. You're the designer so go design. I can however give you some tips:

• For some short sections (name, topic, etc.) you can just use the name of the Uniweb field as a placeholder. Not only does this help you avoid thinking of dummy content but it can help with your data identification later

• Think about how you can reuse designs and speed up your workflows. There are lots of pages like publications, courses taught, and recognitions that essentially are lists of links. You can create these pages in a way so that the content can be changed or the user can select their preference

  • For example you could create a 2 column list page as well as a page with horizontal carousels that could really be used interchangeably

  • See Publications list and Recognitions on the example Figma template.

• Remember your exceptions. It doesn't hurt to show versions covering all the different possibilities

• Design specific elements (navigation bar, footer, card design, filter/sort options). These are elements that will be reused throught the site. By creating them as their own element it saves you having to repeat defining the paths and rules for each one individually

Test your design

This is where you should try your design with some "real" content. Fill out all the fields with proper information and try a few different times, trying to get content with different lengths covering the minimum and maximum and something in between. If there are any issues, this is where you'll spot them and be able to correct them.

When testing, you should consider duplicating your design onto new pages. Have one with your default design, one where you fill it out with the minimum amount of content, and one where you fill it in with the maximum. This way it's easy to check and compare the two while also making it easier to get feedback.

Refine and identify

After testing this is your chance to refine your design and make sure everything is perfect enough. We know it won't be perfect, that's not how this works.

Once you're happy with it, it's time to identify all the paths, rules, notes, and user-configurable settings. The process is easy. All the cards on the Figma template rescale as you type and can be copied and pasted wherever they need to be. A few things first:

• Don't change the colour of the cards, it's much easier on the devs if they can see more information at-a-glance.

• Align the cards to the left of the frame, for smaller sections you can put the card over some content as long as none of the information needed by the devs is covered.

• Ensure everything is as clear as possible.

Refer to the example page on the Figma template to see all of this in action.