In screen based design 1 I chose Toronto cupcake, and in screen based design 2 I will continue with the chosen website and the group I was a part of during SBD1.
Prototype in Figma:
The website:
Moodboard
My inspiration for the mood board and the website are cupcakes and the colors they will give the website. So in the mood board I only have pictures of cupcakes and in the color theme I have black, pink and red. I will also use a lot of white, because the pictures of the cupcake will have a lot of color, so it will be a lot with a colorful website
My second prototype og Torontocupcake after I have done som more work on the page and make it more up to date.
Under it is a Link to prototype, torontocupcake.
Start on the webpage.
The first thing I did on my second try, was to make the basics even if it doesn’t look good and move on form site to site and then go back and improve later. And I’m starting to make the page for PC and my plan is to change the page down when it’s ready, as it seems to be easier in webflow than scaling up at this time.
In the start i was going to make a real store, but I’m stopping because I need to fill in a lot of company information and it would have been possible to buy cupcakes from the store. So because it’s a redesign and a school assignment, it will not going to be a real store, I decided to make the store look the way I want it, but you can’t buy anything from the site. But I show the design and how it will look.
After i had done the basic on the site i went back and start with the details on the site and start to move a little bit around on the items on the site to get a cleaner lock. I also change the colors to a lighter color then i had on figma.
I use the colors:
Typography i use Lato 400 and 700 regular and bold.
I also did some other changes on the web-page from the prototype
i make a new navbar.
And another Fotter, on the fotter i put some links that you didn’t need to go up on the page to navigate to another site. To make it easier.
I make the custom page different, that was because i didn’t have all the function i need on the student account. I needed a businesses account to ad upload function on the site.
So i make it like a form that you cud send inn and order your custom cupcake.
Under I have photos from my website:
under I have photos from mye webpage.
Reflection of the task.
This assignment has been a journey where I have learned a lot, I have learned more about colors and how I can put them together to get a more calm impression. As my first prototype, I use a lot of bright pink, and if I had still used the first plan, visitors would have left the page because the colors took all the focus. Now the colors give more peace, and you can see the pictures.
I’ve also spent a day trying to make a button, which I didn’t think was possible, but when I went from figma to webflow everything was new. I have used other web builders but the web flow was very different from them.
I have a strong color on the buttons, because I want the visitors to see them and let the eye find it, and press the button.
I can also mention that figma was not easy to use at first, but after some you tube videos it went well.
Back to webflow, I think it’s a good tool, but it takes a lot of practice to get it right and I still have a lot to learn in the program.
I see now that I spent a lot of time at the start on figma and the second part of the task as the prototype in figma. Which I should rather have used on webflow. But this is something I have problems with previous tasks as well, for example too much time can be spent on the points and tasks at the beginning and too little at the end of the task.
So I need to spend a good amount of time in the future to learn the program better and so that I can feel confident about possibly creating websites for someone else in the future with webflow.
NORNESDESIGN © Med enerett
