As part of the Fedora Website Revamp project, I have a draft of the Fedora IoT front page. This page is designed to look related to Mo’s work on the Fedora Workstation front page. A lot of the elements are the same, they have just been adjusted to fit the IoT page.
The full mockup can be found here. This is just a static mockup at the moment, links will be added in soon!
For the background image, I reworked the Fedora 29 wallpaper. Fedora IoT’s colour is purple, so this seems like a good image to use. I think the image reflects an electric connectivity element which suits IoT.
RAM Hero image
The RAM image used is a 3D blender render so other angles are available. I sourced it on https://www.blenderkit.com/, which has a large library of free assets for Blender. Picking what hardware to use as the hero was tricky as there’s no single device to use Fedora IoT. Suggestions are welcome but limited to resources available.
This section is similar to that on the Fedora workstation page. Colours were changed to suit the theme of Fedora IoT. Information here was taken from notes taken during meetings with Peter. Suggestions on how to improve the wording are welcome!
Information on this section was taken from the docs pages. Vendors/platforms displayed are those we have relationships with who are doing in-house testing. I am currently waiting for approval for logo use.
As Mo stated in her post, one of the goals we have for the website revamp is to make it more obvious how to contribute / how to join Fedora. I just updated the colour scheme to match Fedora IoT’s colours and changed the contact information.
Feedback Welcome!
Please feel free to suggest any changes/additions you might see fit. The next step is refining the downloads page and creating a community page for Fedora IoT.
Thank you for putting the time and effort into working on this. I reshared this within the Websites and Apps Engineering Team for their perusal. I am sure they would be just as excited to provide feedback on these as much as I am. On the surface, these look awesome and are a worthy extension to what @duffy laid down as the foundation. I would go into detail with my feedback down below.
Background graphic on hero area
I beg to differ here with respect to the choice of the image used as the background graphic. In my opinion, this image does not seem as relevant to the project as I would want it to be. Please note that IoT is used to make smart homes, automatic lighting devices, curated surveillance systems, voice assistants, parking doors, low powered boards etc. so I would suggest you research further on this and create/use an abstract design which encompasses these in a way that looks relevant to the offering that we plan to provide here. Adding to that, the download and reviewer buttons do not seem to have proper offsets.
RAM Hero image
For some reason, I am a bit sceptical about the use of RAM image as the hero as here again, it is not as relevant to IoT as something in the likes of a single-board computer like Raspberry Pi would be. Using its image would be a lot more to the point than using a RAM image. Just in case, a 3D render of Raspberry Pi (or a similar single board computer) is not available - I would much rather have a static image of it instead of a fancy 3D render of something which gives out an incorrect or disconnected idea about our provision. Simply put, people use Fedora IoT in Raspberry Pis or similar devices so they can represent well.
Why Fedora IoT?
Please restrict the use of full stops only in complete sentences and omit them in those which are incomplete. Take, for instance, the subtitle the first topic/feature (i.e. Leading Technology) is not a complete sentence so a full stop is not needed there. Also, I would suggest uniformity in the lengths of the subtitle text for the sake of visual consistency as well as conveying adequate information. For example, the subtitle for the second topic/feature (i.e. Flexible) does not convey much info while the one for the fifth topic (i.e. Open-source Ecosystem) is very detailed. If possible, I would also suggest the use of icons to better represent these topics/features.
Platforms tested against Fedora IoT
I would suggest the use of compact logos over expanded ones to have a better uniformity in the widths of sections that are aligned beside each other. Please consider looking into the proper nouns mentioned here (trademarks, device lineups, brands and model names) on the internet to correct their mentions. For instance, “NVidia” is correctly spelt as “Nvidia” and albeit this looks like a small issue, we would really not want to get into the complications that might happen as a consequence of a certain proper noun, being misspelt. Also, please separate conjunction items under the Pine64 class into different points - to mark support on different devices (and not variations of the same device as it conveys right now)
Built By You
This section looks good the way it is and I would not quite suggest anything different here. No, that’s a blatant lie - I would totally love to see some icons here but maybe I am obsessed with icons. If you feel like adding icons here would be a bit too much, then totally feel free to not add them.
Nice work! It fits really well with the Workstation design. The angled colors dividing sections is actually giving me some new ideas for the Flock design that I’m working on!
I have some feedback that I hope is helpful.
Hero Section
I like the background image, the color theme makes sense and the bit of magenta in the net relates well to the ‘watch the latest reviews’ CTA. Thematically it makes sense to me because it denotes a futuristic interconnectedness net like metaphor.
I agree with Akashdeep that the ram image may not be the best choice for the foreground. If it’s to be a chip focused piece, then yeah a Rasberry Pi might be better. Something that caught my eye was this image for how it uses a connectedness metaphor with icons that relate directly to an IOT ecosystem.
Why Fedora IoT
The left column points look good. I’m personally a fan of using “Open Ecosystem” because it looks more concise and is expanded on in the extended info.
Regarding the right column, “Flexible” and “Make the most of your device” aren’t quite balanced with the rest.
Maybe something like “Flexible Installation” and then clarify in the subtext on some of the possible install methods.
For “Make the most of your device”, the subtext is good and could even be expanded to include a couple of examples of devices. After thinking about it a bit, I lean towards “Hardware Tested” or something to that effect.
I’m not sure if there are links to follow up information that should be included here, but that could potentially be use as well.
Platforms Tested
For this section my only real point of critique is that it would be better visually to have 3 items, turn them more into a card design and have a CTA that leads to more content on another page (like a FAQ page or documentation page on IOT hardware support). I presume that this is a topic that will see growth, so design wise, it would be good to facilitate growth and increase information with a design pattern that is better suited to it.
Build By You
This section is well done. It especially does a good job of providing useful information. There’s something throwing me about the light blue for the bold text, but it likely makes more sense to use that colour to make it cohesive with the other pages.
I would add a larger CTA button(s) to the bottom of this section to pull everything together. Like a “Get Started” sorta thing. This idea is more narrative based as you’ve done a good job throughout telling a story. Leaving visitors who have read through on a strong actionable next step for getting to work would be a good accompaniment to the more social/interactive team/community links available in the Build by you section.
I hope these points and suggestions are helpful, this is great work and I’m excited to see your work put to code!
1. Background graphic on hero area
Thanks for the advice on this! I’ll look into other background images that are more suitable.
2. RAM Hero Image
I was a bit unsure as to what device to place here. I remember there was an issue using an RPi as the hero image as that was my first idea. I’ll look into it more. I used the 3D render in place of an image because there wasn’t an available static posed image available to use. But I’ll dig into it a bit more and see what I can do
3. Why Fedora IoT?
Very useful feedback here! I’ll take it all on board
4. Platforms tested against Fedora IoT
I’ll rectify this.
1. Hero Section
I’m going to look into another device! I’m going to see if there’s an RPi image I can source/use for this section. I like that image you linked also! But for the device I’d like to keep it similar to the workstation page with the device as the image eg. showing what device the OS can be used on.
2. Why Fedora IoT
Thanks for the feedback here! I’m going to have to edit this section a lot so I appreciate the advice!
3. Platforms Tested
I like the card idea! It would add more dimension to this section and help tidy it up more.
Your points were very helpful Ashlyn thanks again!
I have a Pandaboard… I don’t think it’s supported but it’s a similar type of device. I think I have an (old) Raspberry Pi kicking around as well. Happy to do glamour shots of these with my 6D. Actually - I will ask around in the Boston/Westford offices and see if anybody has a supported device I can borrow for some glamour shots.
I beg to differ here with respect to the choice of the image used as the background graphic. In my opinion, this image does not seem as relevant to the project as I would want it to be. Please note that IoT is used to make smart homes, automatic lighting devices, curated surveillance systems, voice assistants, parking doors, low powered boards etc. so I would suggest you research further on this and create/use an abstract design which encompasses these in a way that looks relevant to the offering that we plan to provide here.
I would actually argue the image @ekidney chose depicts the networked nature of IoT well. Look at these images from Microsoft and Network World with a similar vibe:
These look quite on par with what we want to convey about our IoT provision. Talking about the second image - with the graphical depiction of clouds and small dots connected with those to depict IoT devices/nodes etc., it feels right at home with the “interconnected nature” of IoT devices and most importantly, their platforms. Maybe, we can give a similar spin to that image that @ekidney originally made use of to have both the interconnected vibe as well as a graphical representation of nodes, clouds, devices etc.
The first image is a bit on the abstract side (which is not a bad thing), but it kind of makes it difficult to draw inspiration from it when it itself is a result of multiple co-jointed inspirations. A clever spin on it would be to have a similar depiction, added with the graphical representation of the devices and elements which are part of the interconnected network that we are trying to convey here. All in all, my point is to have a hero image which is as representative as possible while not losing out on the parts where it could potentially look cool and stand out
I think the second one with the cloud icons and dots is a bit too on the nose though, we’re definitely going for a more subtle / refined visual identity which is why I think the image Emma put into the mockup is the right one.
Hello!
For the device image, I think it would look awesome to have multiple different devices “scrolling” in a way. For example, there could be a Raspberry Pi device followed by an Nvidia device, and so on and so forth.
As for the hero image, I think the current one looks great, but that’s just my opinion, and it seems others might disagree with me on that.
Additionally, I think the “tested devices” section should use a tab layout, with one tab for each company. Of course, this could be omitted for consistency with the rest of the site.
Finally, I agree with @t0xic0der that the last section definitely needs some icons to spice it up.
I think those are all the suggestions I can come up with for now. Can’t wait to see the final product!
So I considered both sides of the hardware vs. icon cloud debate and created a case for each as well as some sketch ideas of potential new header images:
I think that in both cases you run into the problem of potentially losing users who don’t know about IoT, but I wonder how much we should worry about that kind of person. Someone who still needs to learn more about what IoT is may start learning from this site, but I don’t think they’re going to download this edition of Fedora, let alone contribute or plug into the community.
So if we put aside the concern for people who are new to IoT, we can instead focus on whatever is the cool, more eye-catching graphic that would capture the attention of someone who would download this.
In my opinion, the term IoT already tells you what it is if you know. Maybe somewhere below the hero image it can be spelled out as “Internet of Things” and we can potentially add a link that says “What is Internet of Things?” if we want to be explicit and cover that base. Which is to say that we don’t need the graphic to do that much heavy lifting to communicate what the page is about.
With less knowledgeable users and abstraction out of the way, I personally think that a hardware graphic can communicate the rest of the vibe that I think Fedora IoT has, which is that it’s technical, involved, and empowering. I would rather trade the corporate energy of icons for the hobbyist energy of handling physical components. Heck, I might wager that even people who are interested in Fedora IoT for business reasons could still be attracted to a more adventurous tone, but I’m not as familiar with the IoT edition’s most popular use cases so I could be speaking ignorantly.
The Download Now and Reviewed by buttons are at the far left, which require a lot of eye travel and moving your mouse/trackpad when wanting to click. This behavior worsens with an ultra-wide display:
I’ve come up re-design for the hero image and I’m looking for feedback.
The concept is a close up view of a section of a motherboard, showing some components and capacitors. Also taking some inspiration from Emma’s concept sketches. The colour-scheme is based around the IoT purple and complementary supporting colours.
Hey everyone! IDK if many people saw @ppower’s comment on this, but we were hoping to get some insights for his design and whether it can be pushed to the website?
