One of the things I enjoy about Codetalk is finding out about new …things. New sites, new worlds, new inspo, and today I’m overjoyed to find out about yet another site.
Today I found out about the Awwwards site, and the Awwwards world. First of all the name is genius, second of all, the content is purely on another level of design eliteness.
Our assignment of the week is to find three sites that we enjoy, not for the products or services they are selling, but simply for the level of quality design and thoughtfulness that has gone into them.
The first site that I’m going to discuss is the Qudrix e-commerce design website [https://www.ozero.design/works/qudrix]. Not only did this website win an Awwwards “Site of the Day” recognition, but it’s also won a CSS Design Award, for good reason. The homepage is absolutely stunning, with gorgeous photography on a vertical and horizontal scrollbar.
The color palette is aesthetically pleasing, with earth tones and a scattering of sage green scattered throughout, and it makes for a calm vibe.
Qudrix is a responsive website that looks great on all devices, and it has a large, easy-to-read font. Overall it’s a gorgeous site that would lend well to any brand that is looking to appeal to audiences of all demographics.
The second website that I chose is the “Sugar” website by “CodebyDennis”.
This is a fun website. It’s responsive and has a lighthearted vibe to it and it’s purple. The way the content is laid out on the page fills it up and draws the viewer’s eyes to all corners – but it’s not overcrowded.
I showed the Sugar website to three of my friends—different ages, genders, and professions—and they all liked it. It has universal appeal and would lend itself well to anyone that is looking to reach a broad audience.
The final website that I chose is the “Playbook”project – completed by NIKI – an independent digital design studio based out of Vietnam.
I enjoy this website because it’s different. There’s a bold font, and a lot of black space separates each item. The menu is tucked away at the top of the site, and the e-commerce portion is tucked into a corner instead of being the focal point of the site.
I showed this site to my teenagers, and they thought it looked modern, and it appealed to them. They believe it can be used for a cool clothing line or artist – something that appeals to a younger, edgier demographic.
Out of all three sites, I personally enjoy the Qudrix site the most – it’s calming and really resonates with my personal taste. I can definitely see myself leaning towards this vibe in future sites.
I look forward to learning more along this tech journey and seeing what I can create in the future!
The topic that I enjoyed doing the most was actually starting to set up the websites in visual studio code and getting a start on building a working webpage.
I don’t enjoy terminal at all; I find it extraordinarily confusing, and knowing how many levels or layers and remembering terms confuse me. I really hope to either get a lot more experience on this so I can make my mistakes and learn by doing.
Back to Visual Studio Code: the best assignment we’ve had so far was the snowman assignment – having to learn by doing was great, and literally the best way for me to learn. I’m pretty happy that the instructors are so patient, because some things still threw me for a loop, but it was an enjoyable experience. The time constraints made it a bit stressful, and to be honest I get overwhelmed and overstimulated when theres so many students talking at once, at various pitches and sound levels. We need to keep our sound on to hear if we are being called, but to always have someone chattering makes things a little difficult. I literally took the entire break to lie down on my couch with a cold compress on my head and some Vicks on my temples to get my mind right again before the second half of class.
Anyways, back to the snowman assignment. I loved that we were given a challenge, and got to attempt to recreate it on our own. I have been doing the code academy assignments, and am still finding myself confused as to when to add attributes and hrefs or additional tags etc etc, but to actually limp along and get the majority of the site right (with help from both Jalaya and Nancy), was pretty awesome. It was a simple little website, but dang did it feel good to complete it. I really can’t wait to see where my skills are at the end of the program.
To create a project in Visual Studio Code, you do the following:
1) Create a project folder and drag it into Visual Studio Code
2) Create your index.html file
3) Type html:5 in the bar, and the content of the site will auto populate for you. Html 5 is the most up to date.
4) Two finger click and open in live server.
5) Go to address bar, type Simple Browser, then enter whats in the address bar
6) Click on the double bar icon that sits next to the three dots, and drag the tab into the window.
7) Set your title and start creating.
What else did I learn? Hmmmm… I learned how to add a visible line break with the <hr> tag, and how to generate lorem in my paragraphs (<p>). I’m still confused with attributes as required info, and how to use which tag and when, but I’m getting there slowly but surely.
I really can’t wait to start WordPress though, and I’m super excited about learning how to continue bettering myself and gaining these skills to do things right.
For this week’s blog post, I didn’t have to look very hard outside my own immediate circle of websites, and it’s a large part of why I’m taking this course.
The first website that I will critique is the website for the community of Little Pine First Nation.
I took a screenshot of the homepage for LPFN, and it is an upgrade of the old website. With that being said, there are a few things that I would fix, especially after learning about graphic design concepts.
When the site first loads, the slider photos enlarge slowly to fill the space. There are no signs of similarity in this homepage other than the drop-down headings being the same size and font. There is some continuity again with the headings being a uniform shape and size.
As far as closure goes, the image that I have screenshotted is one of the branded trucks from the First Nation. The waves actually move in this photo, and the photos themselves expand to eventually fill the screen, so although parts of the truck are always hidden by the waves, we know its a truck with tires sitting on the ground. Proximity-wise, we also allude to the buttons being close enough together that the user can identify that they are all working buttons that lead to other pages, with the exception of the services button being a drop-down.
As far as Figure/Ground goes, the call to action button of “Contact Us” is highlighted, as is the Homepage button. For Symmetry and Order, I’d have to once again refer to the Heading buttons located in a pattern at the top of the homepage. There is no example of common fate unless you count the rolling waves that appear to be a design choice—there are no sliders or anything in motion on the page.
As far as how I feel about the design, I feel that there is a lot that could be improved on the site. The spacing of the logo is off and actually touches the slider, and it serves no function if clicked upon. The logo itself is extremely busy, and it appears to be an artistic interpretation of the medicine wheel and utilizes a lot of colors.
The fonts are all mashed together with no uniformity, and the font sizes are scattered—the actual name of our First Nation is a skinny little font and almost appears to be an afterthought. Color choices all appear to be picked out of the logo and clash together. The white space stretches on under the slider, and then another huge Little Pine logo sits underneath alongside the Chiefs name and phone number. Continuing on there is also a pinkish photo with a rubber duck on it with a bright blue “Learn More” button with details for the LPFN daycare.
In my opinion, the website is a mess. It looks like a basic squarespace “Drag and Drop” type of website, with mismatching photos, a random color scheme, and some links don’t function. The postsecondary application also leads to an outdated word document that hasn’t changed in 20+ years. One of the first things I will do when I graduate this program will be texting my Chief and offering to redo the site for free – I don’t charge my community for anything since it’s one of the ways that I can give back from over here in California.
The second website that I am selecting is not even the website that I had in mind when I was searching for it, but it popped up, and I decided to go with it instead since I had a reaction to it.
The website is called “Shop Native Online”; here is the screenshot.
Alright, so… similarity wise, the Headings at the top of the page match in terms of fonts, size, etc. The photos do not match whatsoever in size or even in uniformity of the button placements. Continuity-wise, the only thing that shows that items are meant to be grouped together is the awkward rectangular buttons placed over them.
Closure wise, some of the photos disappear, leading the user to believe there is additional content to be seen; indeed, the next two sections on the site are eight large photos of bracelets, then a full-screen grid of recent Instagram posts, which then disppears into four featured products, then a random Journal with two large photographs and blocks of text.
Proximity-wise objects are slapped on the site with no thought to design elements. Each clickable item technically functions, at least the ones I clicked on, but its quite messy. For the Figure/Ground element, the buttons are placed in the forefront of the screen and draw the viewers attention with a call to action.
The only thing symmetrical about the site is the headings, the entire thing looks thrown together. It does not look orderly at all. There are also no moving parts to this site to show Common Fate.
If I were to elevate the design of the website, I’d start with the logo itself. It’s quite garish and does not encapsulate Native designs; it looks like it was created as a tribute to cave paintings or primitive drawings, which does not age well as we enter a technological era.
The photos themselves appear to be of good quality, and I would position them in a more aesthetic manner, in small squares, spaced neatly throughout the shopping sections. I would make better use of white space in between the photos and work with clear headings throughout the entire site. I’d also organize the headings better and make clear sections in the website.
In summary, I do believe that both websites get the general message across of who they are and what they’re doing.
I also understand that Little Pine First Nation may not be moving forward with clear ideas of who they are in terms of branding, and thats probably not where their focus lies. They probably assigned one of the university interns the job of creating a drag-and-drop website, and it worked, so whatever, which is why I want to help them by creating a well-thought-out site that’s easy to navigate for members to use. I can also think of a few other things that could be added to the calendar that I could help out with as well: a calendar of events, a staff page in addition to the Chief and Council page, and more. I believe a few minor changes could make a difference for the better and could probably create up-to-date sites for other reserves as well.
I applied for the Codetalk program out of pure frustration.
Years ago, I had the idea to create an online marketplace where Indigenous artisans could post their authentically made designs and creations online and sell to a global market. It proved to be easier said than done.
I studied entrepreneurship, wrote a business plan, obtained some capital to create the site… and ran into a brick wall. I was (attempting) to create an e-commerce business in a small city where most marketing agencies were creating small Shopify sites for other small businesses. Back then, it was unheard of to create a massive platform from scratch. We looked at Shopify, Squarespace, WordPress, and more, and finally settled on piecing together a WordPress site.
The first agency did an amazing branding package for me and failed on the marketplace. It looked pretty but didn’t function the way it was supposed to.
The second agency tried and failed again. They updated some of the original site, added a few extensions, and this time we were able to get items posted in the Artisans dashboard and actually selling. It required a lot of back and forth between myself and the Artisans, and it was a complete mess on my side of things. Items were able to sell, however, but it could definitely be improved.
The third agency attempted to create a new website from scratch, and it also barely worked. It was still a lot of back and forth to get items listed and sold, and it was an overall headache. I was about to give up on the idea of a marketplace completely when the agency partners split, and one of them came onboard as part of my small business team. He was able to build a solid marketplace that was by far the easiest and most attractive site to date.
Through it all, I bled capital. I obtained small business capital through a variety of loans, savings, business competition winnings, and grants and sunk all of it back into the site. The majority of it went to pay developers, and it was frustrating to see them receive the funds and then to have the website(s) continue to fail. There was always something that needed to be fixed, and it always came with a price tag. I was also one of their smaller clients, so my needs were always on the backburner, which led to extended wait times for myself and my artisans.
I used to sit in coffeeshops and pick at my website myself. Through the power of YouTube, I was able to learn smaller WordPress tricks and could soon update various assets, add new forms and events, and piece together things myself. I ended up deleting a huge chunk of code once and had to get my agency to do a reset, but that was part of my learning curve – and yes I had to pay them to reset it.
In 2019, I closed the website down. The dream remained dormant for years as the pandemic happened, and we moved to California from Canada. As we settled in and created a life here, I realized that this was where I wanted the next chapter of my life to play out. My kids are thirteen and fifteen now, and it’s time to get back to being who I am again, and thats an entrepreneur.
Learning to code will give me the freedom I need to start creating a new website that I’ve been developing in my mind again. I remember how excited. I would get when something actually worked in the old site and how great it felt to not have to rely on someone else to do it for me.
My old website helped me grow as an entrepreneur. I won fourteen business plan competitions to earn the capital to make it happen. I was also the first Native American venture to be accepted into the Canadian Technology Accelerator in its history—I flew back and forth to Boston every two weeks for the entirety of that cohort. I received numerous business awards and accolades, including the CCAB national Indigenous Entrepreneur of the Year Award, and I spoke at dozens of incredible conferences, summits, reserves and communities.
To me, learning web development equals freedom. It equals the opportunity to create what’s been living in my mind for the last three years. It equals the journey of becoming a Native in STEM once more and the chance to become who I am once more.
A few weeks ago I heard a quote by Desmond Tutu that stuck with me: “There is only one way to eat an elephant: one bite at a time.”. That quote resonates with me as I prepare to take some of the first bites of my website/elephant. My plan is to complete the Codetalk program at the top of the class and to make the most of every opportunity and networking that comes my way as I go through it. This is why I’m so excited about the beautiful world of web development—because it holds my future.
