LT 9.1 Create a social media visual story

LT 9.1 Create a social media visual story

You’ve been asked to design a campaign to advertise a specific product: keto bars.

The purpose of the campaign is to get Instagram followers to click on the link on the Instagram account, view a specially designed product page and purchase the product. You’ve been tasked with designing 3 graphics for Instagram posts. Use your creativity and the images on the website to get started.


Reklame
LT 8.4 Getting technical

LT 8.4 Getting technical

This lesson task has two questions about the course assignment you are currently working on. Include the answers to this lesson task in your report for the course assignment as part of your research.

  • Consider how API integration can boost the efficiency of the website you are creating for your course assignment. List at least three ways that you can incorporate API integration and explain why you’ve chosen them. Also expand on how you went about integrating them, for example did you use a plugin, widget, or outside source?
  • When your website is published, inspect the load time of your site. You can do this by using a developer tool like Google PageSpeed Insights or Web Page Test. Write down how long it takes to load the full page initially. Are there any elements that you can identify that is slowing down the load time of the page? If so, try to optimize at least one file. Redo the load time and write about the success you have achieved in improving the load time.

Post your answers and changes to your website to your WordPress blog and share screenshots where possible to better illustrate what you have learned


Will answer this LT when the website is published.

LT 8.3 Page inspections

LT 8.3 Page inspections

Which are your favourite eCommerce sites that you use regularly? Pick one to focus on for this Lesson Task.

Think about the functional design and discuss why each of the following pages are effective:

  • Homepage
  • Category page
  • Product page
  • Cart
  • Checkout

Post your conclusion about the effectiveness of each of the five pages to your WordPress blog and share screenshots to support your writing.


I chose https://shop.mango.com/no

Homepage:

The homepage has a good header where you can choose between gender and age categories, as well as a search bar, favourites, cart and a customer page you can log into. It has big pictures with links that’s displays the latest trends etc.

Category page:

A dropdown menu becomes visible when you hover over one of the gender/age categories. From there you chose your main catagorie e.g. clothing and then you can chose sub-catagorie like jeans or t-shirts.

Product page:

The product page has big good quality images that displayes there products well. You can choose between showing 2 or 4 products in the frame. You can hover over the products for more images and add it to your cart instantly, instead of having to go to a new page. You can also add the products to your favourites by pressing the heart.

Cart:

The cart displayed all your chosen products and the price for everything combined. From here you can easily press «Til kasse/Checkout».

Checkout:

To get to the checkout you first have to make a user. This is good for keeping track of all you latest orders and following the shipping etc. The checkout page is where you put in all your information, chose what kind of delivery you want etc. This site offers a lot of different payment methods which is a good thing.

LT 8.1 Rate and review

LT 8.1 Rate and review

For this lesson task you must review three eCommerce websites, preferably small businesses (not in the category of Amazon or Walmart). Give star ratings out of five for the following categories:

  • First impression
  • Trust/credibility established
  • Loading time
  • Professionalism
  • Creativity

Along with the star rating for each category, name three reasons for your rating and one suggestion on how to improve the rating.

Combine the star ratings and reasons for each website in a creative and visual way and post it to your WordPress blog.


https://www.no.ellenkvam.com

EllenKvam is a norwegian small business that sells jewellery.

First impression: ****

Trust / credibility established: ****

Loading time: *****

Professionalism: ****

Creativity: **

The website looks clean and is pretty easy to navigate, the items is displayed in a good way. The main thing that gave me a not so good first impression is that the logo looks very «home-made». It has a grey box around it that should be transparent and the quality is bad, so that’s the first thing I would change. I can’t see any contact page either, but they have a live chat so that’s good.

https://www.christinaledang.com
https://www.christinaledang.com

First impression: *****

Trust / credibility established: ****

Loading time: *****

Professionalism: ****

Creativity: *****

This website has a very good and creative visual design, I love the landing page, and the items is displayed in a cool way I haven’t seen before. It made me want to explore the whole page. When you click «shop» it sends you to a new page with info about shipping and prices but no items to shop, I had to click around the page to actually find the items, so that’s something that could have been done better.

https://abbyboutique.no

First impression: ***

Trust / credibility established: *****

Loading time: *****

Professionalism: ****

Creativity: **

This website looks like any other online clothing store, nothing exciting about it but it looks professional enough and is easy to navigate. I personally don’t like the logo so that’s one of the things that didn’t give me a perfect first impression. There is no contact or about us page, but there is some contact info in the footer. I would change the header and add some more exiting elements to the website.

LT 7.4 Creating email newsletter

LT 7.4 Creating email newsletter

For this task, you will be creating your own email newsletter using MailChimp. Once you’ve completed the newsletter design, you’ll be sending a test email to a classmate or friend.

Part 1

Take your time as you populate the template with meaningful images and content. For this task you can create an email for any brand you like, it can even be your own invention.

Here are a few business ideas:

  • A florist
  • A pet accessories shop
  • A tree nursery
  • A shoe or clothing shop
  • A bakery

Part 2

When your email newsletter is complete, preview it and make the required changes (if any).

Part 3

Finally, send a test email to a classmate or friend. Discuss the email you sent with your classmate or friend. If you used a classmate, you can also discuss the mail they sent to you.


I decided to use Crust and Crumb from the previous LT as the business. I made a very simple newsletter, just to understand how Mailchimp works. This is how it looks on a phone screen:

LT 7.2 Designing a form

LT 7.2 Designing a form

There are many bad forms out there! Now that you know all about forms, it will be easy for you to spot bad form design. For this task, you will be redesigning a form used to make appointments at a vet.

Part 1

Apply what you’ve learnt as you critically analyse this form from the Paw Paws Vet Clinic and list out what you think is wrong with it. You only need to look at the first two steps:

  • Online booking 1/3
  • Online booking 2/3

Part 2

Use the software of your choice for this part e.g., Figma. Screenshot the website and then redesign the form section (both steps 1 and 2). To help guide you, here is the list of tips we covered in today’s lesson:

  • Keep it simple
  • Mark optional or required fields
  • Use visual design strategically
  • Use persistent labels
  • Consider the context within the user flow
  • Use verbs for the submission button text
  • Programmatically set the right keyboard for touchscreens
  • Make use of inline form validation when possible

Part 3

Choose three components anywhere in the form that will show error states i.e., what happens if the user submits the form and there is a problem? Remember that a good designer will try to help users with the use of error messages. Error messages are not there to make users feel bad if they’ve made a mistake filling out the form.


Part 1

The form looks confusing and overwhelming due to the amount of questions and the way they are asked. It also feels weird to start the form with these questions, instead of asking about personal information first. The form looks much longer and more advanced than it need to be.

Part 2

Part 3

LT 7.1 Designing interactive headers and menus

LT 7.1 Designing interactive headers and menus

Let’s practise what you’ve learnt today within the context of a very basic brief. Imagine you have been contacted by a local bakery called Crust & Crumb that opened in your neighbourhood. They would like you to help them with their website design. Your task is to create a low-fidelity prototype to show them how the header and menu could look and work. 

Part 1

Design a logo for the brand to use on the website header.

Part 2

Consider which type of menu you might need for the bakery and create this in your choice of prototyping software (i.e., think about the website scope and information architecture as well as which content is most important).

Part 3

Add the links, at least one type of menu and other necessary interactive elements to your header wireframe.

Part 4

Make the required elements interactive using component states.


Part 1

This is the logo I made for the bakery, very simple and modern.

Part 2, 3 and 4

I decided to go for a classic menu with all links visible, since the website only require a few sites. The links changes color to brown when hovered over. The search bar is only visible with an icon, and opens up ready to type when pressed.

This is how the website looks without hovering.
The links changes colors when hovered.
The search bar pops up.
LT 6.1 Understanding basics

LT 6.1 Understanding basics

Part 1

Choose one template that you like from the above lists and demo it. Sketch out the structure of the website template as a low fidelity wireframe to understand the different sections or building blocks of the template. 

Take screenshots of the template and publish this with the wireframe sketches to your blog.

Part 2

An individual hosting service will be needed throughout the rest of your studies, and this Lesson Task is therefore mandatory. We recommend one.com, but you are free to choose any hosting service.

If you choose one.com, the monthly fee is low. The beginner plan is sufficient, and there are step-by-step guides showing you how to set up an account, create e-mail addresses, connect via FTP etc.

Consider your domain name very carefully. This cannot be altered. You can of course sign up for other domain names and delete the one you have, but it has unnecessary cost implications and transferring the website and domain at a later stage involves effort. Also note that it can take 24 hours for the hosting provider to complete the registration.

After completing the domain registration, you can write a short paragraph about the process, the hosting package you chose, and how you went about choosing a domain name. You can include screenshots of the process to illustrate it more graphically


Part 1

I went to SquareSpace and found a template that I really enjoyed looking at, called Meriden.

https://meriden-demo.squarespace.com/?nochrome=true

Then I opened up Adobe XD and made a low fidelity sketch of the template:

Part 2

Part two of this learning assignment was to choose one of the plans from one.com and buy your own domain. I went for the «Enthusiast» plan instead of «Beginner» because then you get five websites instead of one, and wordpress is included. You also get a lot more storage, which might come in handy.

I chose «byahv.com» as my domain name. I wanted something simple and «open to interpretation» since I am not 100% sure what I am gonna use the websites for yet, apart from the next Course Assignment.

LT 5.3 Judge and box their personalities

LT 5.3 Judge and box their personalities

Part 1

Create your own table with details about the archetypes we discussed today:

Part 2

If you were creating a brand for your own portfolio, to represent your personality, which archetype would you choose? How would this archetype be presented with the:

  • Overall visual style (use three descriptive words) 
  • Fonts (choose two fonts) 
  • Colour (create a colour palette) 
  • Layout (use three descriptive words to define this) 
  • Photography style (use three descriptive words to define this)

Part 1

Part 2

Overall visual style: Minimalistic, interesting, clean

Fonts: Butler, Aleo, Woodland

Color: White, Black, Cream/beige, Green, Red

Layout: Clean, easy to navigate, with interesting twists

Photography style: high quality, black and white, creative