Felicity Brown

Green Living Website

https://greenliving.earth/

Whilst learning design and web development, to expand my knowledge and skills I have focused on producing this Green Living website. I came up with the project whilst considering the barriers people may face when trying live a more sustainable life. Whilst developing this site I focused on producing a practical and useful website, all whilst learning further about different coding languages and design.

To make the experience of the site engaging I have concentrated on user interaction through the use of JavaScript. This ensures that the user can navigate quickly around the site. As a site that is used on the go it was important to create a responsive layout, for use on all mobile devices and browsers. The constraints of adapting the site for smaller screens required me to implement techniques such modifying font-sizes and toggling layers for the map and directory views. Whilst developing this I have also considered how people use touch-screen devices and how this needs to be reflected in the design. This is shown in aspects such as the ‘pinch and zoom’ function on the map, and scrolling through the list of places.

The technologies I have used so far on the back-end are Python and Django with a Model View Controller (MVC) approach. The custom Content Management System (CMS) I built ensures that the site is easy to maintain and expand. This will allow me to further expand the website to other areas of the country, in time, and create an Android and iOS app using the Application Programming Interface (API).

Through developing this site I have focused on producing a user friendly and intuitive experience. This has been achieved through a cohesive colour scheme to reflect the environmental ethos and through attention to typography and white space of the site to create the perception of minimalism and professionalism.

As part of marketing for the site I have created social media accounts to engage users visually. Through this I have expanded my photo editing and graphic design skills, using both Inkscape and GNU Image Manipulation Program (equivalent to Illustrator/Sketch and Photoshop respectively). An example of using these can be seen in my Eco Advent calendar on Instagram, whereby I sourced and edited stock photography in a cohesive style that compliment the website. Vector tools such as Inkscape have also been beneficial in my projects for drawing icons and logos so that they are scalable to any size, whether on high resolution screens or printed.

I have thoroughly enjoyed developing this website as it has been a way to combine both my passion for the environment and take charge of my learning, providing a real usable platform that I am able to continue to expand and adapt. Whilst developing this site and social media I have also really valued the opportunities it has provided to release my creativity and work on designing a site that I am proud of.

Land Connexions

https://landconnexions.co.uk/

Land Connexions is a site that I was requested to create for a small start-up Business. Currently it is a simple, yet sophisticated, holding page reflecting the company’s pre-existing branding, until further content is provided.

This project has allowed me to develop skills with working with a client. Discussing their ideas and vision for the site, taking inspiration from their pre-existing business cards, and as well as allowing me to input my own creative ideas in order to provide a cohesive and unified website in-line with their branding.

Unravelling Fern

Codepen Unravelling Fern

Whilst expanding my knowledge and skills in web development I have regularly visited Codepen to explore others’ projects providing me with not only inspiration, but also allowing me to explore the latest design trends and how others’ have achieved their projects through reading their code.

The idea behind my unravelling fern once again was from my passion for nature, combined with wanting to create a moving animation.

The project intentionally does not include any JavaScript and was a way to explore the capabilities of pure CSS. Although the concept and execution of this was relatively straight-forward, using both HTML and CSS for the finished animation, I was able to explore and implement using keyframes, as well as working on the design aspect. Each segment of the fern is a child of the previous container which amplifies its parent’s movement.

I was keen to create the fern unravelling as was particularly interested in how the mathematics of fractals that occur in nature.

I feel that it brings another element to my page as the animation, with the green fern on the black background, is eye-catching and appealing.

I have thoroughly enjoyed developing this website as it has been a way to combine both my passion for the environment and take charge of my learning, providing a real usable platform that I am able to continue to expand and adapt. Whilst developing this site I have also really valued the opportunity to release my creativity and work on designing a site that I am proud of.

React Cookie To-do List

Codepen React Cookie To-do List

I started learning React as a way to organise code and create interactive User Interfaces (UIs). I also liked the idea of being able to create components once and re-use across future projects.

The React Cookie To-do list project idea was to create a visually pleasing, fun tick list that I can develop further to become a useful app for people who want to achieve their goals.

I used the Create React App tool on my local machine to start the project. This was useful because I was able to use the live code reloading and write code in a structure that follows best practices. When the project was complete, I was able to copy the code into a pen on Codepen to share with other users.

• Cookiepage – this contains the state of the to-do items and whether they are ticked or not.
• Cookie – this accepts the step number prop which related to how many tasks have been ticked off the list, and displays the SVG bites accordingly.
• TodoList – this takes all of the state of the to-do items, looping over and rendering TodoListItems.
• TodoListItem – this renders each item using name and checked props. When a TodoListItem is clicked it calls a function that updates the state in Cookiepage using React Hooks.

I enjoyed designing the images for this app in Inkscape as SVGs and experimenting with colour palettes and fonts to ensure that it looked decorative and exciting.